细谈 JS 对象遍历的顺序问题

可能有些同学听过在 JavaScript 中遍历对象顺序不固定的这一说法。事实上，这个说法不是特别准确。

对待遍历顺序，对象有一套自己既定的规则，在此规则下呢，对象的遍历顺序会受插入元素顺序的影响，但是不完全受插入元素先后顺序的影响。如果您有「必须按插入元素顺序遍历」的场景，可以考虑使用 Map。

遍历对象的方法有很多种，我们经常会使用的有 for...in ，除此之外，还有：

1. Object.keys
2. Object.entries
3. Obejct.getOwnerProPertyNames
4. Reflect.ownKeys
5. ......

上面我们列的几个方法，都按照一样的规则去遍历对象。而实际的遍历规则会根据 key 值类型的不同而不同。

在一个对象中，如果我们的 key 值是像 '1'、'200'这种正整数格式的字符串。 遍历的顺序是按照 key 值的大小来排列的。

比如我们看这样的一个例子：

const obj = {}
obj['10'] = 'a';
obj['9'] = 'b';
obj[8] = 'c';
obj[7] = 'd';
console.log(Object.keys(obj)) //  ["7", "8", "9", "10"]

我们最后的遍历顺序完全忽视了插入顺序，并且，值得我们注意的是，在对象中，就算我们添加属性时的索引值是 Number 类型，最后的结果还是会被隐式的转为字符串。

数组作为对象的一种，也符合上面的规则，又或许，有上面的表现就是因为要兼容数组的缘故呢。除此之外，通过上面的规则，我们还可以推断出，对类数组（key 值是正整数且有 length 属性）进行遍历也是按照索引顺序的。

另外，如果我们的 key 值是不能转为正整数的字符串，这其中包括了可以转换为负数的字符串（ 如 '-1' ）、小数格式的字符串(如 '1.0' ) 和其他的字符串。他们的遍历顺序会比较符合直觉，就是插入对象的顺序：

const obj2 = {}
obj2['1.1'] = 'a';
obj2['1.0'] = 'b';
obj2['-1'] = 'c';
obj2['jack'] = 'd'

console.log(Object.keys(obj2)); //  ["1.1", "1.0", "-1", "jack"]

事实上，对象的索引值的类型不仅可以是字符串，还可以是 Symbol 类型。对于 Symbol 类型而言，它的遍历顺序也是单纯的按照插入对象的顺序。

如果我们的对象综合了上面所有的情况，即一个对象的索引值出现了所有的类型（各种形式的字符串、Symbol 类型），它会：

1. 先按照我们上面提的关于正整数的规则遍历正整数部分
2. 按接下来会插入顺序遍历剩下的字符串
3. 最后再按照插入顺序遍历 Symbol 类型

相信到这里，大家已经完全明白了对象的遍历顺序问题，最后还有一点值得大家注意的点，是 for...in 的遍历顺序问题。

最开始的时候，for...in 的遍历顺序并没有一个统一的标准，浏览器厂商会按照他们的喜好去设置 for...in 的遍历顺序。如果您对遍历顺序有要求并且要兼容老的浏览器版本，建议不使用它。后来 ES 2019 的 一个提案 对此现象进行了规范，现在 for...in 的顺序也遵循上面的规则。

尽管会遵循上面的规则，但是 for...in 还会遍历原型的属性。所以 for...in 的变量元素的规则是先按照我们上面讲的对象遍历规则去变量对象本身，接下来再按照此规则去遍历对象的原型，以此类推，直到遍历到顶部。

除了最后一个 for...in 的注意点之外，就没有其他的了，其实内容比较少。

这就是遍历对象的全部内容了，谢谢阅读。