详解JS对象遍历的顺序问题

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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

对待遍历顺序，对象有一套自己既定的规则，在此规则下呢，对象的遍历顺序会受插入元素顺序的影响，但是不完全受插入元素先后顺序的影响。如果您有「必须按插入元素顺序遍历」的场景，可以考虑使用 Map。
遍历对象的方法有很多种，我们经常会使用的有 for...in ，除此之外，还有：

Object.keys
Object.entries
Obejct.getOwnerProPertyNames
Reflect.ownKeys
......

上面我们列的几个方法，都按照一样的规则去遍历对象。而实际的遍历规则会根据 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 类型），它会：