JS使用sort与reduce排序对象时数字键未按插入顺序排列的原因

问题原因 #

这是JavaScript普通对象的属性排序规则导致的，ES6规范明确规定了对象属性的遍历顺序：

• 首先处理所有可以转换为非负整数的字符串键（也叫数组索引类键），按照数值升序排列，完全无视插入顺序
• 其次处理普通字符串键，按照插入顺序排列
• 最后处理Symbol类型键，按照插入顺序排列

你用到的所有键"51"、"54"、"61"等都属于可以转换为正整数的字符串，会被优先按数值大小排序。当你按顺序插入51→61→71→81之后，再插入54时，54的数值小于61、71、81，对象会自动把54放到51之后、61之前的位置，不会保留你的插入顺序。

解决方案 #

如果需要严格保留自定义的键顺序，有两种常用方案：

1. 使用Map代替普通对象，Map的键严格按照插入顺序存储，不会自动调整排序：

const result = new_key.reduce((r, k) => {
    r.set(k, data[k]);
    return r;
}, new Map());

读取值使用result.get(k)即可，遍历也会严格按你排序后的顺序执行。

2. 如果必须使用普通对象，可以给所有键加个非数字前缀，避免被识别为数组索引类键：

const new_key = Object.keys(data).sort((a, b)=>parseInt(a.slice(-1)) - parseInt(b.slice(-1)));
const result = new_key.reduce((r, k) => {
    r[`key_${k}`] = data[k];
    return r;
}, {});

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