javascript - Chrome 控制台中展开 View 与折叠 View 中的键顺序

Question

在处理 another problem 时，我被 Chrome(可能还有其他浏览器)在将对象输出到控制台时以某种方式神奇地对对象键进行排序这一事实误导了:

let inputs = ["XMl", "SFJ", "dTg", "amN"];
let promises = {};

for (let val of inputs) {
   let p = new Promise(
      (resolve) => setTimeout(resolve, 500 + Math.random() * 1500, "new:" + val)
   );
   promises[val] = p
}

console.log(promises)
Promise.allSettled(Object.values(promises)).then((res) => console.log(res))

现在浏览器 (Chrome) 向我显示:

因此，展开输出和折叠输出之间存在差异。这是标准行为吗？这是从哪里来的？

Answer 1

下面是问题的简单复制:

const obj = {
    XMl: 1,
    SFJ: 1,
    dTg: 1,
    amN: 1,
};
console.log(obj);

为此我得到:

摘要似乎是按属性顺序显示的(稍后会详细介绍)，但是当显示对象详细信息时，Chrome 的开发工具会按字母顺序显示属性(包括将大写字母组合在一起；它看起来非常像简单的排序< 和 > 可以，而不是 localeCompare 或类似的)。 Firefox 看起来很相似。

第一个包含在 JavaScript 规范中 (details here)。我不认为有任何标准涵盖第二个，但如果您考虑一下，当您试图在具有大量属性的对象中查找属性时，alpha 顺序可能比属性顺序更有用。属性顺序很复杂，只有大部分基于属性创建的顺序，所以它看起来可能很困惑。考虑到 JavaScript 约定首字母大写字母几乎完全保留给构造函数和所有大写常量，将大写字母组合在一起稍微分类。

---

最初您使用术语“关联数组”而不是对象。正如我在评论中提到的，它们实际上是对象，而不仅仅是关联数组。如果您只想要一个基本的“ map ”样式名称/值对，那将是 Map map 条目的顺序非常简单:这是创建条目的顺序。如果我们做与上面相同的事情，但使用 Map ，摘要和详细信息都以相同的顺序显示信息:

const map = new Map([
    ["XMl", 1],
    ["SFJ", 1],
    ["dTg", 1],
    ["amN", 1],
]);
console.log(map);