如何阻止Chrome控制台自动排序对象属性？

我太懂这种困扰了——明明对象创建时属性是按自己想要的顺序来的，结果控制台一展开就全乱了，尤其是像你截图里那种带数字前缀的字符串键，很容易被浏览器工具当成类数字键排序，完全打乱了原本的逻辑顺序。

先给你拆解下原因：现代浏览器的开发者工具（比如Chrome、Firefox）在展示展开后的对象时，会默认对属性键做排序优化——优先把数字/类数字的键按升序排列，再按插入顺序展示普通字符串键。而顶部的即时预览之所以能保留原始顺序，是因为它直接读取了对象的原始属性序列，没有做排序处理。

下面给你几个快速解决这个问题的小技巧，不用改数据结构也能看到真实的属性顺序：

• 用console.table()替代console.log()
  这个方法简直是为这种场景量身定做的，它会以表格形式展示所有属性，并且严格遵循对象属性的原始插入顺序，完全不会自动排序。用法很简单：

  console.table(yourProblemObject);
  

  打印出来的表格能让你一眼看清每个属性的位置，不用展开也能排查问题。

• 转成键值对数组打印
  如果你还是习惯看类似对象的结构，可以把对象转换成[key, value]格式的数组，数组的顺序就是属性的原始插入顺序，控制台展开数组也不会重新排序：

  const orderedEntries = Object.entries(yourProblemObject);
  console.log(orderedEntries);
  

• 代码层面改用Map存储（如果可行）
  要是你在代码里本身就需要严格的键值对顺序，Map比普通对象更靠谱——它会严格保留键的插入顺序，而且控制台打印Map时也会维持这个顺序：

  const orderedMap = new Map(Object.entries(yourProblemObject));
  console.log(orderedMap);
  

虽然你提到改用数组可能是更优解，但如果暂时不想调整数据结构，上面的几个控制台技巧应该能帮你解决当前的麻烦，让你看到真实的属性顺序。

内容的提问来源于stack exchange，提问作者Dylan