在JavaScript中，普通对象中的属性顺序是一个复杂的主题。

虽然在ES5中没有明确地指定顺序，但ES2015在某些情况下定义了顺序，此后规范的连续更改越来越多地定义了顺序(甚至在ES2020中定义了for-in循环的顺序)。给定的是以下对象:

const o = Object.create(null, {
  m: {value: function() {}, enumerable: true},
  "2": {value: "2", enumerable: true},
  "b": {value: "b", enumerable: true},
  0: {value: 0, enumerable: true},
  [Symbol()]: {value: "sym", enumerable: true},
  "1": {value: "1", enumerable: true},
  "a": {value: "a", enumerable: true},
});

这将导致以下顺序(在某些情况下):

Object {
  0: 0,
  1: "1",
  2: "2",
  b: "b",
  a: "a",
  m: function() {},
  Symbol(): "sym"
}

“拥有”(非继承)属性的顺序是:

类似正整数的键，按升序排列 按插入顺序排列的字符串键 符号插入顺序

因此，有三个段，它们可以改变插入顺序(如示例中所发生的那样)。类似正整数的键完全不遵循插入顺序。

在ES2015中，只有特定的方法遵循以下顺序:

Object.assign Object.defineProperties Object.getOwnPropertyNames Object.getOwnPropertySymbols Reflect.ownKeys JSON.parse JSON.stringify

截至ES2020，所有其他都有(一些在ES2015和ES2020之间的规格，其他在ES2020)，其中包括:

对象。钥匙,对象。条目,对象。值,… 对. .

最难确定的是for-in，因为它独特地包含继承属性。这在ES2020中已经完成了(除了边缘情况)。以下列表来自链接的(现在已经完成)提案，提供了未指定顺序的边缘情况:

Neither the object being iterated nor anything in its prototype chain is a proxy, typed array, module namespace object, or host exotic object. Neither the object nor anything in its prototype chain has its prototype change during iteration. Neither the object nor anything in its prototype chain has a property deleted during iteration. Nothing in the object's prototype chain has a property added during iteration. No property of the object or anything in its prototype chain has its enumerability change during iteration. No non-enumerable property shadows an enumerable one.

结论:即使在ES2015中，你也不应该依赖JavaScript中普通对象的属性顺序。它很容易出错。如果需要有序的命名对，则使用Map，它只使用插入顺序。如果只需要排序，则使用数组或Set(也使用纯插入顺序)。

从ES2015开始，对于迭代属性的某些方法，属性顺序得到了保证。但其他人不是。不幸的是，不保证有顺序的方法通常是最常用的:

对象。钥匙,对象。值,Object.entries 在循环. . JSON.stringify

但是，从ES2020开始，这些以前不值得信任的方法的属性顺序将由规范保证，以与其他方法相同的确定性方式迭代，这是由于完成的提议:for-in机制。

就像有保证迭代顺序的方法一样(比如Reflect。ownKeys和Object.getOwnPropertyNames)，之前未指定的方法也将按以下顺序迭代:

数值数组键，按升序排列 所有其他非符号键，按插入顺序 符号键，按插入顺序

这是几乎每个实现都已经在做的事情(并且已经做了很多年)，但是新提案将其正式化。

虽然目前的规范在迭代顺序中留下了..，但“几乎完全不确定，真正的引擎往往更一致:”

ECMA-262缺乏特异性并不能反映现实。在几年前的讨论中，实现者已经注意到for-in的行为有一些约束，任何想要在web上运行代码的人都需要遵循这些约束。

因为每个实现都已可预测地遍历属性，所以可以在不破坏向后兼容性的情况下将其放入规范中。

有一些奇怪的情况，实现目前没有达成一致，在这种情况下，结果的顺序将继续未指定。财产顺序担保:

Neither the object being iterated nor anything in its prototype chain is a proxy, typed array, module namespace object, or host exotic object. Neither the object nor anything in its prototype chain has its prototype change during iteration. Neither the object nor anything in its prototype chain has a property deleted during iteration. Nothing in the object's prototype chain has a property added during iteration. No property of the object or anything in its prototype chain has its enumerability change during iteration. No non-enumerable property shadows an enumerable one.

Object和MAP with Example的主要区别:

它是循环中的迭代顺序，在Map中它遵循创建时设置的顺序，而在OBJECT中没有。

看到的: 对象

const obj = {};
obj.prop1 = "Foo";
obj.prop2 = "Bar";
obj['1'] = "day";
console.log(obj)

**OUTPUT: {1: "day", prop1: "Foo", prop2: "Bar"}**

MAP

    const myMap = new Map()
    // setting the values
    myMap.set("foo", "value associated with 'a string'")
    myMap.set("Bar", 'value associated with keyObj')
    myMap.set("1", 'value associated with keyFunc')

OUTPUT:
**1.    ▶0: Array[2]
1.   0: "foo"
2.   1: "value associated with 'a string'"
2.  ▶1: Array[2]
1.   0: "Bar"
2.   1: "value associated with keyObj"
3.  ▶2: Array[2]
1.   0: "1"
2.   1: "value associated with keyFunc"**

对于一个100%故障安全的解决方案，你可以使用嵌套对象，并像这样做:

const obj = {};
obj.prop1 = {content: "Foo", index: 0};
obj.prop2 = {content: "Bar", index: 1};

for (let i = 0; i < Object.keys(obj).length; i++)
for (const prop in obj) {
    if (obj[prop].index == i) {
        console.log(obj[prop].content);
        break;
    }
}

这是我吃了不少苦头才知道的。

使用React和Redux，我想遍历的键的状态容器，以生成子，每次存储被更改时都会刷新(根据Redux的不变性概念)。

因此，为了获取Object.keys(valueFromStore)，我使用了Object.keys(valueFromStore).sort()，这样我至少现在有了键的字母顺序。

在现代浏览器中，您可以使用Map数据结构而不是对象。

开发人员mozilla >地图

Map对象可以按插入顺序迭代其元素…