如何根据userdetails数组的name键排序marks对象数组

现有两个对象数组：

const marks = [{name: "siva", value: "200"}, {name: "sai", value: "300"}, {name: "varma", value: "400"}]
const userdetails =  [{name: "varma", id: "012"},{name: "siva", id: "017"}, {name: "sai", id: "016"}]

需要将marks数组按照userdetails数组中name字段的顺序重新排序，预期输出如下：

const updatedmarks = [{name: "varma", value: "400"},{name: "siva", value: "200"}, {name: "sai", value: "300"}]

解决方案 #

先构建一个name到其在userdetails中位置索引的映射表，再利用这个映射表对marks数组排序，具体实现如下：

// 生成name与对应索引的映射，提升排序时的查找效率
const nameOrderMap = userdetails.reduce((mapping, item, idx) => {
  mapping[item.name] = idx;
  return mapping;
}, {});

// 复制原数组并排序，避免修改原数组（若无需保留原数组，可直接用marks.sort(...)）
const updatedmarks = [...marks].sort((a, b) => nameOrderMap[a.name] - nameOrderMap[b.name]);

说明 #

• reduce方法遍历userdetails生成映射表，后续排序时通过映射表获取索引的时间复杂度为O(1)，整体排序效率更高
• 使用扩展运算符[...marks]创建原数组的浅拷贝，保证原数组不被修改
• sort回调中通过对比两个元素name对应的索引值，实现按照userdetails的顺序排序

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