JavaScript数组map操作使用Number()转换元素导致顺序改变的原因

核心触发原因 #

该现象和Array.map()方法本身无关，map会严格按照原数组的索引顺序遍历生成新数组，不会主动调整元素顺序，问题出在你构造chargingBeforePercentage数组的过程中，经过了以order_No值为键的普通对象中转步骤：

• 当x为字符串类型时，即使是纯数字形式的字符串作为普通对象的键，JS引擎也会按插入顺序存储，你后续遍历对象生成chargingBeforePercentage数组时，顺序就和原数组一致
• 当你通过Number()把x转为数字类型后，数字作为普通对象的键会被JS引擎自动按升序排序，你再遍历对象生成数组时，就会出现前三项1、1、7的排序结果，和原数组顺序不一致
  你生成orderNumbers数组时是直接遍历原数组提取字段，没有经过对象中转步骤，所以不管order_No是什么类型，数组顺序都不会发生变化。

其他可能场景 #

如果你没有用到对象中转逻辑，那就是你在chargingBeforePercentage数组生成后，额外执行了按x字段升序排序的逻辑，且该排序逻辑仅对数字类型的x生效（字符串排序时你额外加了自定义规则保留了原顺序），而orderNumbers数组没有执行该排序步骤。

验证方案 #

你可以在map生成chargingBeforePercentage的代码行后立刻打印数组，判断顺序异常的触发节点：

• 如果此时顺序已经异常，可确认是中间存在对象中转逻辑
• 如果此时顺序正常，后续才发生变化，可排查后续执行的排序相关代码

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