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

Question

在处理时，我被以下事实误导了 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 规范中 ()。我不认为有任何标准涵盖第二个，但如果你考虑一下，当你试图在一个对象中找到属性时，alpha order 可能比属性 order 更有用很多属性。属性顺序很复杂，只有 大部分 是基于创建属性的顺序，所以看起来可能很混乱。考虑到首字母大写字母几乎完全保留用于构造函数和所有大写常量的 JavaScript 约定，将大写字母分组在一起略有分类。

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

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

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

Order of keys in expanded vs collapsed view in Chrome console

javascript

google-chrome-devtools