分析JS对象内部属性的遍历顺序

背景

在我们日常的开发中，有很多下拉选框里面的选项值是通过后端传回来的枚举值（enums）来作为渲染的数据的。例如这样子的下拉选框：
如果我们需要让下拉选框里面的选项顺序，是依据后端返回的数据进行排序，那这个时候就有两种方法。一种是后端返回一个数组数据，然后我们按照顺序遍历这个数据数据。但如果是后端返回的是这样的一个对象，
那我们就需要考虑一下Object.keys(), for ... in 等一系列的遍历对象的方法能否按照后端属性创建的顺序来输出了。

问题重现

我们先看一下下面这段代码：

var obj = {
      name: 'abc',
      3: 'ccc',
      age: 23,
      class: 'first',
      hobby: 'basketball'
};
console.log(Object.keys(obj));
// ["3", "name", "age", "class", "hobby"]

可以看出，Object.keys()是无法保证输出的属性的顺序的。

Object.keys不保证对象属性的顺序？

在MDN-Object.keys中描述是这样的

说是和手动遍历相同，那再看一下MDN-for..in

最后一句表达了不同浏览器的实现方式是不同的。 但在一篇文章中描述Property order is predictable in JavaScript objects since ES2015
根据文章重的描述是 Object.getOwnPropertyNames, Reflect.ownKeys他们都是内部通过ownPropertyKeys这个方法实现的，而且在文章中他还给出了对象中属性的输出顺序的规则

Reflect.ownKeys()在IE中是不支持的

Object.getOwnPropertyNames()的兼容性更好

但如果是想用Object.keys，这个是否是基于ownPropertyKeys方法，还要根据浏览器实现而不同。

标准参考

根据 ECMA-262（ECMAScript）第三版中描述，for-in 语句的属性遍历的顺序是由对象定义时属性的书写顺序决定的。

在现有最新的 ECMA-262（ECMAScript）第五版规范中，对 for-in 语句的遍历机制又做了调整，属性遍历的顺序是没有被规定的。

经过上面问题重现的代码复现以及查阅网上的信息，Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范。因此，使用 for-in 语句遍历对象属性时遍历顺序并非属性构建顺序。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范，属性遍历顺序由属性构建的顺序决定。

Chrome的Object.keys的输出顺序以及原因分析

Chrome 的 JS 引擎遍历对象属性时会遵循一个规律：

它们会先提取所有 key 的 parseFloat 值为非负整数的属性，然后根据数字顺序对属性排序首先遍历出来，然后按照对象定义的顺序遍历余下的所有属性。例如下面的输出：

let obj = {
    'b': 'testb',
    'a': 'testa',
    '1': 'test1',
    '测': 'test测',
    '2': 'test2'
}

console.log(Object.keys(obj));

// [1, 2, 'b', 'a', '测']

Chrome有这样的表现是因为V8引擎为了提高对象的访问速度，V8 里的对象就维护两个属性，会把数字放入线性的 elements 属性中，并按照顺序存放。会把非数字的属性放入 properties 中，不会排序。寻找属性时先 elements 而后在 properties。V8引擎这样做的原因可以在李兵老师的V8采用了哪些策略提升了对象属性的访问速度？中找到。

总结

我们目前的项目是只需要兼容Chrome浏览器即可，可以看出只要是数组的返回值里面，属性值的key不是数字与字符串混合用，那么完全可以使用Object.keys并且可以保证读取时的顺序的，保证下拉选项渲染的顺序，无需后端为此改为数组返回，后端也省去了把之前数据和代码全部更改的工作量和风险。

引用

为什么 JS 对象内部属性遍历的顺序乱了
Object.keys(..)对象属性的顺序？
Property order is predictable in JavaScript objects since ES2015
js中关于for...in遍历对象属性的顺序问题