带前导零的4位数字键对象排序后forEach遍历顺序异常问题

问题描述 #

我有一个键为带前导零4位数字的键值对对象，通过sortObjectByKeyParseInt函数（基于parseInt对键进行自然排序）得到了看似正确排序的对象，但使用Object.entries(sorted_options_parse_int).forEach遍历该对象时，遍历顺序却不符合预期：先输出1001、1101这类无前置零的键，再输出0101、0201这类带前置零的键。

问题原因 #

这是由JavaScript对象的自有属性遍历规则导致的：

• ES6及之后，JS对象的属性遍历顺序分为两个优先级：
  1. 优先遍历整数索引型键：即键字符串是无前置零的非负十进制整数（或"0"），这类键会按数值从小到大排序后被遍历；
  2. 再遍历普通字符串键：所有不符合整数索引规则的字符串键（比如带前置零的"0101"），会按插入顺序遍历。

你遇到的情况中：

• "1001"、"1101"这类键属于整数索引型键（转整数后再转回字符串与原键完全一致），因此会被优先遍历；
• "0101"、"0201"这类带前置零的键，转整数后得到的是101、201，转回字符串是"101"、"201"，和原键不一致，属于普通字符串键，只能在整数索引键遍历完成后才会被处理——哪怕你通过排序函数把它们提前插入对象，也改变不了这个遍历优先级。

另外要注意：对象本身不存在“排序”的概念，调试工具的显示顺序可能会误导你认为对象是有序的，但实际遍历顺序严格遵循上述规则。

解决办法 #

要保证遍历顺序符合预期，不要依赖普通对象，改用以下两种方式：

1. 直接使用排序后的键值对数组 #

跳过构建新对象的步骤，直接对原对象的entries数组排序后遍历：

// 原对象
const originalObj = {
  "1001": "A",
  "0101": "B",
  "1101": "C",
  "0201": "D"
};

// 对entries数组按键的数值排序
const sortedEntries = Object.entries(originalObj).sort(([keyA], [keyB]) => {
  return parseInt(keyA, 10) - parseInt(keyB, 10);
});

// 按正确顺序遍历
sortedEntries.forEach(([key, value]) => {
  console.log(key, value);
});

2. 使用Map存储排序后的键值对 #

Map会严格保持键的插入顺序，遍历顺序就是你排序后的顺序：

const originalObj = {
  "1001": "A",
  "0101": "B",
  "1101": "C",
  "0201": "D"
};

// 基于排序后的entries创建Map
const sortedMap = new Map(
  Object.entries(originalObj).sort(([keyA], [keyB]) => {
    return parseInt(keyA, 10) - parseInt(keyB, 10);
  })
);

// 按排序顺序遍历
sortedMap.forEach((value, key) => {
  console.log(key, value);
});

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