为何JavaScript对象中数字属性排在空字符串属性之前？

嘿，这个问题其实是JavaScript对象的属性枚举规则在作祟！先看看你的代码场景：

最初你定义了空字符串数组，执行函数后输出符合预期：

let setOne = [""];
function checkTheSameBetter(setOne) { 
  let ObjectShop = {}; 
  for (let indexSetOne = 0; indexSetOne < setOne.length; indexSetOne++) { 
    ObjectShop[setOne[indexSetOne]] = true; 
  } 
  console.log(ObjectShop); 
}
checkTheSameBetter(setOne); // 输出 { '': true }

但当你把数组改成["", 1]后，输出顺序就反过来了：

let setOne = ["", 1];
checkTheSameBetter(setOne); // 输出 {'1': true, '': true }，而非预期的 {'': true, '1': true}

原因解析 #

JavaScript普通对象的属性枚举顺序是有明确规则的，不是完全按照你添加属性的顺序来：

• 第一步：优先枚举所有可被解析为正整数的字符串属性键（比如你的数字1会被自动转为字符串'1'，属于这类），这些键会按数值大小从小到大排序；
• 第二步：再按照属性添加的先后顺序枚举剩下的非正整数字符串键（比如空字符串''就属于这一类）；
• 第三步：最后枚举Symbol类型的属性键（这里没涉及）。

所以在你的例子里，'1'作为正整数属性键会被优先排列，空字符串''则排在后面，这就导致了输出顺序和你预期的不一致。

解决办法：用Map保持插入顺序 #

如果想要严格保持属性的插入顺序，推荐使用Map来代替普通对象，因为Map会完全按照键的插入顺序来存储和遍历：

function checkTheSameBetter(setOne) { 
  let mapShop = new Map(); 
  for (let indexSetOne = 0; indexSetOne < setOne.length; indexSetOne++) { 
    mapShop.set(setOne[indexSetOne], true); 
  } 
  console.log(mapShop); // 输出 Map(2) { '' => true, 1 => true }
}

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