解决JavaScript中for...in遍历对象顺序错乱问题
本文详解JavaScript中for...in遍历对象时顺序错乱的原因及解决方案。指出整数属性按升序排列,非整数属性按创建顺序排列。通过Object.keys排序或修改键名为字符串形式(如+49)可控制遍历顺序,确保数据展示符合预期。
问题描述与解决方案
后台返回的对象参数展开后如下所示:

当通过 for...in 循环将该对象存放到数组时,得到了如下结果:

显然,遍历顺序与预期不符。由于对象本身不保证属性顺序(不同于数组),若要获得特定顺序,需先对对象指定规则。此处通过对象value的字母顺序来指定规则。
//循环中使用
for(let item in this.objectOrder(data[0])){
this.ChartsTabData.push(item)
}
//方法
objectOrder(obj) {//排序的函数
var newkey = Object.keys(obj).sort(); //先用Object内置类的keys方法获取要排序对象的属性名,再利用Array原型上的sort方法对获取的属性名进行排序,newkey是一个数组
var newObj = {};//创建一个新的对象,用于存放排好序的键值对
for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
}
return newObj;//返回排好序的新对象
}最终结果如下:

for...in 遍历顺序规律
附:JavaScript for...in 循环出来的对象属性顺序到底是什么规律?
简单归结成一句话就是:先遍历出整数属性(integer properties,按照升序),然后其他属性按照创建时候的顺序遍历出来。
我们来看一个例子:
let codes = {
"49": "Germany",
"41": "Switzerland",
"44": "Great Britain",
"1": "USA"
};
for(let code in codes) {
alert(code); // 1, 41, 44, 49
}
最终遍历出来的结果是:属性 1 先遍历出来, 49 最后遍历出来。
这里的 1、41、44 和 49 就是整数属性。
那什么是整数属性呢?我们可以用下面的比较结果说明:
String(Math.trunc(Number(prop)) === prop
当上面的判断结果为 true,prop 就是整数属性,否则不是。
所以
"49"是整数属性,因为String(Math.trunc(Number('49'))的结果还是"49"。"+49"不是整数属性,因为String(Math.trunc(Number('+49'))的结果是"49",不是"+49"。"1.2"不是整数属性,因为String(Math.trunc(Number('1.2'))的结果是"1",不是"1.2"。
按创建顺序遍历的技巧
上面的例子中,如果想按照创建顺序循环出来,可以用一个 讨巧 的方法:
let codes = {
"+49": "Germany",
"+41": "Switzerland",
"+44": "Great Britain",
// ..,
"+1": "USA"
};
for(let code in codes) {
console.log( +code ); // 49, 41, 44, 1
}
总结
到此这篇关于JS for in遍历对象顺序不对解决办法的文章就介绍到这了,更多相关JS for in遍历对象顺序不对内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
