对象有顺序吗？

前言

对象有顺序吗？换句话说，如果我们遍历一个对象，获取属性的顺序是和属性添加时的顺序一样吗？这靠谱吗？这篇文章将为你揭晓答案。

JavaScript 对象基础

在 JavaScript 中，一个对象是一个无序的键值对集合，键通常是字符串或者 Symbol，而值可以是任何类型的数据。对象的基本创建方式如下：

const obj = {

    key1: 'value1',

    key2: 'value2',

}

虽然我们通常认为对象的属性是无序的，但实际上，JavaScript 对对象属性的排列有其特定的规则。

属性顺序的规则

根据 ECMAScript 规范，JavaScript 对象属性的顺序受以下规则的影响：

整数属性，会按照升序排列。

何为整数属性？指的是一个可以在不做任何更改的情况下与一个整数进行相互转换的字符串，也就是可以被解析为整数的字符串。

const obj = {
2: 'two',
1: 'one',
'3': 'three',
'a': 'alpha',

}


console.log(Object.keys(obj)); // -> ['1', '2', '3', 'a']

所有普通的字符串属性，按照其插入的顺序排列。

const obj = {
b: 'beta',

    a: 'alpha',

    c: 'gamma',

}


console.log(Object.keys(obj)); // -> ['b', 'a', 'c']

Symbol 类型的属性总是放在最后，并且保留其插入顺序。

const sym1 = Symbol('key1');
const sym2 = Symbol('key2');

const obj = {

    [sym1]: 'value1',
1: 'one',

    [sym2]: 'value2',
'a': 'alpha',

}

console.log(Object.keys(obj)); // -> ['1', 'a']
console.log(Object.getOwnPropertySymbols(obj)); // -> [sym1, sym2]

结合上述规则，我们再看一个综合示例。

const sym1 = Symbol("key1");
const sym2 = Symbol("key2");

const obj = {

  [sym2]: "value2",

  z: "last",
3: "three",
2: "two",

  a: "alpha",
1: "one",

  b: "beta",

  [sym1]: "value1",
0: "zero",

};


console.log(Reflect.ownKeys(obj)); // -> ["0", "1", "2", "3", "z", "a", "b", Symbol("key2"), Symbol("key1")];

可以看到，整数属性按升序排列，普通属性按插入顺序排列，符号则放在最后并保留插入顺序。

最后

虽然 JavaScript 对象的属性被称为“无序”，但实际上它们有“特别的顺序”。整数属性会按升序排列，普通属性按插入顺序，Symbol 类型的属性总是排在最后并保留插入时的顺序。

如果文中有错误或者不足之处，欢迎大家在评论区指正。

你的点赞是对我最大的鼓励！感谢阅读~