js”;在“;不按特定顺序追加键/值

js "for in" not appending key/values in a specific order

本文关键字：追加 定顺序 js      更新时间：2023-09-26

给定以下文字：

"rating":{
"overall": 89,
"atmosphere": 82,
"cleanliness": 91,
"facilities": 86,
"staff": 94,
"security": 91,
"location": 91,
"valueForMoney": 90
},

以及以下for/in循环：

for (key in data.rating) {
  if ( key != "overall" ){
    //<div class='ratingbar'><p>" + translateRating(language, key) + "<span class='right bold'>" +  data.rating[key]/10 + "</span></p><div class='bar-wrapper'><div class='bar' style='width:" + data.rating[key] + "%'></div></div></div>
    //current.find('.ratings ul').append("<li class='left'><span class='ratinglabel'>" + translateRating(language, key) + "</span><span class='ratingpercent bold'>" + data.rating[key]/10 + "</span><div class='ratingbackground rounded'><span style='width:" + data.rating[key] + "%'></span></div></li>");
    if ( key == "valueForMoney" ){
      current.find('.ratings ul').append("<li class='left'><span class='ratinglabel'>" + translateRating(language, 'valueForMoney') + "</span><span class='ratingpercent bold'>" + data.rating[key]/10 + "</span><div class='ratingbackground rounded'><span style='width:" + data.rating[key] + "%'></span></div></li>");
    }
    if ( key == "security" ){
      current.find('.ratings ul').append("<li class='left'><span class='ratinglabel'>" + translateRating(language, 'security') + "</span><span class='ratingpercent bold'>" + data.rating[key]/10 + "</span><div class='ratingbackground rounded'><span style='width:" + data.rating[key] + "%'></span></div></li>");
    } 
    if ( key == "location" ){
      current.find('.ratings ul').append("<li class='left'><span class='ratinglabel'>" + translateRating(language, 'location') + "</span><span class='ratingpercent bold'>" + data.rating[key]/10 + "</span><div class='ratingbackground rounded'><span style='width:" + data.rating[key] + "%'></span></div></li>");
    }                           
  }
}

当我打印对象的值时，我希望它们按特定的顺序打印——与if语句的顺序相同。相反，"valueForMoney"总是排在最后。我期待的订单是：

  1. 物有所值
  2. 安全性
  3. 位置
  4. 工作人员
  5. 大气
  6. 清洁度
  7. 设施

对象中的键不能保证有序；您需要使用数组或Map来确保它们的顺序正确。

如果可以的话，将数据结构转换为对象数组是最简单的解决方案：

"rating": [
    { name: "overall", value: 89 },
    { name: "atmosphere", value: 82 },
    ...
]

因为您可以按保证的顺序循环使用它们。

你也可以尝试将对象转换为Map，尽管Maps只存在于ES6中，所以如果你；你还没有。"贴图"中关键帧的顺序保证是它们插入的顺序，因此这适用于您的情况。

属性顺序在JavaScript中不受保证。

ECMAScript 3 中对象的定义

4.3.3对象

对象是object类型的成员它是属性的无序集合每个属性都包含一个基元值、对象或函数。存储在对象属性中的函数称为方法。

ECMAScript 6

9.1.11[[枚举]]（）

当调用O的[[Enumerate]]内部方法时，将采取以下步骤：

  1. 返回一个Iterator对象（25.1.1.2），其下一个方法迭代O的可枚举属性的所有String值键。Iterator物体必须继承自%IteratorPrototype%（25.1.2）。枚举属性的机制和顺序没有指定，但必须符合下面指定的规则

在没有的情况下直接打印怎么样？

 current.find('.ratings ul').append("<li class='left'><span class='ratinglabel'>" + translateRating(language, 'valueForMoney') + "</span><span class='ratingpercent bold'>" + data.rating.valueForMoney/10 + "</span><div class='ratingbackground rounded'><span style='width:" + data.rating.valueForMoney + "%'></span></div></li>");
 current.find('.ratings ul').append("<li class='left'><span class='ratinglabel'>" + translateRating(language, 'security') + "</span><span class='ratingpercent bold'>" + data.rating.security/10 + "</span><div class='ratingbackground rounded'><span style='width:" + data.rating.security + "%'></span></div></li>");
 current.find('.ratings ul').append("<li class='left'><span class='ratinglabel'>" + translateRating(language, 'location') + "</span><span class='ratingpercent bold'>" + data.rating.location/10 + "</span><div class='ratingbackground rounded'><span style='width:" + data.rating.location + "%'></span></div></li>");
相关文章：