JavaScript按属性值排序带数字键对象：我的实现有误？

嘿，我来帮你排查下问题～

你的排序逻辑本身是完全正确的，但问题出在JavaScript普通对象的键顺序规则上：

在ES6规范之后，对象虽然开始保留插入顺序，但有个特殊例外：数字类型的键（包括能被解析成数字的字符串键，比如"1""2"这类）会被引擎自动按数字升序排列，不管你实际插入的顺序是什么。所以你用reduce构建的新对象，会自动把键"1""2""3""4"按数字顺序重新排列，直接覆盖了你辛苦排序后的结果。

下面给你几个可行的解决方案：

方案1：用数组存储排序结果（最推荐） #

数组是JavaScript里唯一严格保证顺序的集合类型，如果你需要按顺序访问这些数据，用数组是最稳妥的选择：

var myObj = {"1": {"Value": 40}, "2": {"Value": 10}, "3": {"Value": 30}, "4": {"Value": 20}};

// 转成键值对数组后排序，保留完整结构
const sortedArray = Object.entries(myObj)
  .sort(([, a], [, b]) => a.Value - b.Value)
  .map(([key, value]) => ({ [key]: value }));

console.log(sortedArray);
// 输出：[{"2": {"Value": 10}}, {"4": {"Value": 20}}, {"3": {"Value": 30}}, {"1": {"Value": 40}}]

如果后续需要更灵活的访问，也可以把数组结构改成[{key: "2", value: {...}}, ...]的形式。

方案2：用Map保留插入顺序（ES6+） #

Map类型会严格保留键的插入顺序，完全不受键类型的影响：

var myObj = {"1": {"Value": 40}, "2": {"Value": 10}, "3": {"Value": 30}, "4": {"Value": 20}};

const sortedMap = Object.keys(myObj)
  .sort((a, b) => myObj[a].Value - myObj[b].Value)
  .reduce((map, key) => map.set(key, myObj[key]), new Map());

// 遍历Map时会按排序后的顺序输出
sortedMap.forEach((value, key) => {
  console.log(key, value);
});
// 输出：
// 2 { Value: 10 }
// 4 { Value: 20 }
// 3 { Value: 30 }
// 1 { Value: 40 }

方案3：修改键为非数字开头（仅在必须用普通对象时使用） #

如果一定要用普通对象存储，可以把键改成非数字开头的字符串（比如"item1"而非"1"），这样对象就会保留你的插入顺序：

var myObj = {"item1": {"Value": 40}, "item2": {"Value": 10}, "item3": {"Value": 30}, "item4": {"Value": 20}};

const sortedObj = Object.keys(myObj)
  .sort((a, b) => myObj[a].Value - myObj[b].Value)
  .reduce((_sortedObj, key) => ({ ..._sortedObj, [key]: myObj[key] }), {});

console.log(sortedObj);
// 输出：{ item2: { Value: 10 }, item4: { Value: 20 }, item3: { Value: 30 }, item1: { Value: 40 } }

总结一下：你的排序逻辑没问题，只是普通对象的数字键特性干扰了结果。优先用数组或Map来处理需要保持顺序的键值对场景哦～

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