聊聊JS中Object的Keys是无序的吗？

在最开始学习 JavaScript 时，聊聊我一直被灌输 Object 中的无序 Key 是无序的，不可靠的聊聊，而与之相对的无序是 Map 实例会维护键值对的插入顺序。

「But，聊聊Object 的无序键值对真的是无序的吗?」实际上在 ES2015 以后，Object.keys 的聊聊规则变了：

在一些现代的浏览器中，keys 输出顺序是无序可以预测的!

Key 都为自然数：

注意这里的自然数是指正整数或 0，如果是聊聊其他类的 Number —— 浮点数或者负数 —— 都会走到下一组类型里，像NaN或者Infinity这种也自然归到下一个类型里，网站模板无序但是聊聊像科学记数法这个会稍微特殊一点，感兴趣的无序同学可以自己试一下。

总结来说，聊聊就是无序当前的 key 如果是自然数就按照自然数的大小进行升序排序。

const objWithIndices = {

23: 23,聊聊

1: 1,

1000: 1000

};

console.log(Reflect.ownKeys(objWithIndices)); // ["1", "23", "1000"]

console.log(Object.keys(objWithIndices)); // ["1", "23", "1000"]

console.log(Object.getOwnPropertyNames(objWithIndices)); // ["1", "23", "1000"]

包括在 for-in 循环的遍历中，keys 也是按照这个顺序执行的。

Key 都为 String：

如果 key 是不为自然数的 String(Number 也会转为 String)处理，则按照加入的时间顺序进行排序。

const objWithStrings = {

"002": "002",

c: c,

b: "b",

"001": "001",

}

console.log(Reflect.ownKeys(objWithStrings)); // ["002", "c", "b", "001"]

console.log(Object.keys(objWithStrings));// ["002", "c", "b", "001"]

console.log(Object.getOwnPropertyNames(objWithStrings));// ["002", "c", "b", "001"]Key 都为symbolconst objWithSymbols = {

[Symbol("first")]: "first",

[Symbol("second")]: "second",

[Symbol("last")]: "last",

}

console.log(Reflect.ownKeys(objWithSymbols));// [Symbol(first), Symbol(second), Symbol(last)]

console.log(Object.keys(objWithSymbols));// [Symbol(first), Symbol(second), Symbol(last)]

console.log(Object.getOwnPropertyNames(objWithSymbols));// [Symbol(first), Symbol(second), Symbol(last)]

如果 Key 都为 Symbol，顺序和 String 一样，也是按照添加的顺序进行排序的。

如果是以上类型的源码库相互结合const objWithStrings = {

"002": "002",

[Symbol("first")]: "first",

c: "c",

b: "b",

"100": "100",

"001": "001",

[Symbol("second")]: "second",

}

console.log(Reflect.ownKeys(objWithStrings));

// ["100", "002", "c", "b", "001", Symbol(first), Symbol(second)]

结果是先按照自然数升序进行排序，然后按照非数字的 String 的加入时间排序，然后按照 Symbol 的时间顺序进行排序，也就是说他们会先按照上述的分类进行拆分，先按照自然数、非自然数、Symbol 的顺序进行排序，然后根据上述三种类型下内部的顺序进行排序。

Recap在 ES6 之前 Object 的键值对是无序的;在 ES6 之后 Object 的键值对按照自然数、非自然数和 Symbol 进行排序，自然数是按照大小升序进行排序，其他两种都是按照插入的时间顺序进行排序。References:

「Property order is predictable in JavaScript objects since ES2015」: https://www.stefanjudis.com/today-i-learned/property-order-is-predictable-in-javascript-objects-since-es2015

「The traversal order of object properties in ES6」: http://2ality.com/2015/10/property-traversal-order-es6.html#traversing-the-own-keys-of-an-object

源码下载

很赞哦!（17）