Object.keys返回对象的属性数组是无序的。MDN定义如下:
Object.keys()
方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for...in
循环遍历该对象时返回的顺序一致
而for….in
以任意序迭代一个对象的属性。
ECMA-262(ECMAScript)第三版中描述,for-in 语句的属性遍历的顺序是由对象定义时属性的书写顺序决定的
ECMA-262(ECMAScript)第五版规范中,对 for-in 语句的遍历机制又做了调整,属性遍历的顺序是没有被规定的。
Chrome Opera 中使用 for-in 语句遍历对象属性时会遵循一个规律,它们会先提取所有 key 的 parseFloat 值为非负整数的属性, 然后根据数字顺序对属性排序首先遍历出来,然后按照对象定义的顺序遍历余下的所有属性。其它浏览器则完全按照对象定义的顺序遍历属性。
阮一峰老师对Object.keys顺序解释:
- 首先遍历所有数值键,按照数值升序排列。
- 其次遍历所有字符串键,按照加入时间升序排列。
- 最后遍历所有 Symbol 键,按照加入时间升序排列。
var obj = {
city: "Beijing",
12: 12,
7: 7,
0: 0,
"-2": -2,
"age": 15,
"-3.5": -3.5,
7.7: 7.7,
_: "___",
online: true,
3: 3,
"23": "23",
"44": 44
}
for(var key in obj){
console.log(key)
}
//输出结果如下图:提取所有 key 的 parseFloat 值为非负整数的属性, 然后根据数字顺序对属性排序首先遍历出来,然后按照对象定义的顺序遍历余下的所有属性
总结
需要排序使用数组的sortObject.keys().sort()
参考:chrome opera for-in语句遍历出对象属性的顺序与定义的不同(ps:实测firefox66.0.5也是和chrome一样的输出结果)