Chrome 控制台中展开视图与折叠视图中的键顺序

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 的 devtools 按字母顺序显示属性（包括将大写字母组合在一起；看起来很像简单的排序< 和 > 会做，而不是 localeCompare 或类似的）。 Firefox 看起来很相似。

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

---

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

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