如何在JavaScript中按指定参照数组排序对象数组？

现有两个数组：

let array1 = [
{
    "label": "4kg",
    "value": "4kg",
    "optionId": "x_size",
    "mapKey": "sku-Food_x_size",
    "valueItem": 491,
    "optionName": "Size"
},
{
    "label": "1.3kg",
    "value": "1.3kg",
    "optionId": "x_size",
    "mapKey": "sku-Food_x_size",
    "valueItem": 699,
    "optionName": "Size"
},
{
    "label": "300g",
    "value": "300g",
    "optionId": "x_size",
    "mapKey": "sku-Food_x_size",
    "valueItem": 639,
    "optionName": "Size"
},
{
    "label": "10kg",
    "value": "10kg",
    "optionId": "x_size",
    "mapKey": "sku-Food_x_size",
    "valueItem": 492,
    "optionName": "Size"
}
]

let array2 = ['300g', '1.3kg', '4kg', '10kg']

需要将array1按照array2中元素的顺序（匹配对象的value字段）排序，得到目标数组array3。

方法一：基础实现（小数据量适用） #

使用数组的sort方法结合indexOf，直接通过元素在array2中的索引差值排序：

// 创建原数组副本，避免修改原数组
const array3 = [...array1].sort((a, b) => {
  return array2.indexOf(a.value) - array2.indexOf(b.value);
});

原理：array2.indexOf(a.value)返回a.value在array2中的位置索引，用两个索引的差值决定排序顺序——差值为负则a排在b前，为正则b排在a前，差值为0则位置不变。

方法二：高性能实现（大数据量适用） #

当数组元素较多时，indexOf的重复查找会降低效率，先构建一个value到索引的映射表，将查找复杂度从O(n)降为O(1)：

// 构建value与索引的映射对象
const valueIndexMap = array2.reduce((acc, val, idx) => {
  acc[val] = idx;
  return acc;
}, {});

// 基于映射表排序
const array3 = [...array1].sort((a, b) => {
  return valueIndexMap[a.value] - valueIndexMap[b.value];
});

这种方式避免了重复遍历array2查找索引，在处理大规模数据时性能更优。

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