如何通过外部键值对/Map对JavaScript对象数组排序

核心逻辑 #

根据数组元素的name属性匹配外部排序规则中的权重值，通过比较权重大小决定元素顺序：权重高的元素排前面，同一权重的元素保持原数组中的顺序（利用ES2019后Array.sort的稳定性）。

用普通键值对对象实现 #

const dataSortBy = { bar: 2, foo: 3 };
const dataRaw = [
  {name:"foo", relation:"baz"},
  {name:"foo", relation:"buz"},
  {name:"bar", relation:"baz"},
  {name:"bar", relation:"buz"},
  {name:"foo", relation:"biz"}
];

// 复制原数组避免修改原数据，再执行排序
const dataSorted = [...dataRaw].sort((a, b) => {
  // 获取两个元素对应name的权重
  const weightA = dataSortBy[a.name];
  const weightB = dataSortBy[b.name];
  // 权重降序排列：大权重在前
  return weightB - weightA;
});

console.log(dataSorted);
// 输出结果与期望一致

用Map结构实现 #

注意：Map的正确创建方式是通过new Map()传入键值对数组，而非你写的{foo => 3, bar => 2}。实现代码如下：

const dataSortByMap = new Map([['foo', 3], ['bar', 2]]);
const dataRaw = [
  {name:"foo", relation:"baz"},
  {name:"foo", relation:"buz"},
  {name:"bar", relation:"baz"},
  {name:"bar", relation:"buz"},
  {name:"foo", relation:"biz"}
];

const dataSorted = [...dataRaw].sort((a, b) => {
  // 用Map的get方法获取权重
  const weightA = dataSortByMap.get(a.name);
  const weightB = dataSortByMap.get(b.name);
  return weightB - weightA;
});

console.log(dataSorted);
// 输出结果与期望一致

额外补充：处理未定义的name #

如果数组中存在排序规则里没有的name值，可以给这类元素设置默认权重（比如0），让它们排在最后：

// 以普通对象为例，Map写法只需替换为dataSortByMap.get(a.name) ?? 0
const dataSorted = [...dataRaw].sort((a, b) => {
  const weightA = dataSortBy[a.name] ?? 0;
  const weightB = dataSortBy[b.name] ?? 0;
  return weightB - weightA;
});

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