基于参考数组排序目标数组并保留未匹配元素的实现咨询

核心思路 #

先将参考数组arr2转换为id-排序优先级的映射表，再利用这个映射表对目标数组arr1进行排序：

• 存在于arr2中的元素，严格按照arr2的顺序排列
• 不存在于arr2中的元素，自动追加到排序结果末尾，且保留原数组中的相对顺序

兼容两种形式的实现代码 #

// 生成id到排序优先级的映射表，兼容arr2的两种格式
const getPriorityMap = (arr2) => {
  return arr2.reduce((map, item, index) => {
    const id = typeof item === 'object' ? item.id.toString() : item;
    map[id] = index;
    return map;
  }, {});
};

// 目标数组
const arr1 =[ 
{id: 74, name: 'Mat', type: 'bus'},
{id: 2, name: 'Johan',  type: 'plane'},
{id: 25,  name: 'Kevin', type: 'car'},
{id: 10, name: 'Mary',  type: 'plane'},
{id: 34, name: 'Katrin',  type: 'car'}  
];

// 参考数组（两种形式任选其一）
const arr2 =[{id:25},{id:34},{id:10}];
// const arr2 = ["25","34","10"];

// 生成映射表
const priorityMap = getPriorityMap(arr2);

// 执行排序（复制原数组避免修改原数据）
const sortedArr = [...arr1].sort((a, b) => {
  const aId = a.id.toString();
  const bId = b.id.toString();
  // 不在映射表中的元素优先级设为无穷大，确保排在最后
  const aPriority = priorityMap[aId] ?? Infinity;
  const bPriority = priorityMap[bId] ?? Infinity;
  
  return aPriority - bPriority;
});

console.log(sortedArr);

代码说明 #

1. 映射表生成：通过reduce遍历arr2，将每个元素的id转换为字符串（兼容对象数组和字符串数组两种输入格式），并记录其在arr2中的索引作为排序优先级。
2. 排序逻辑：
   • 对arr1的元素两两比较，获取各自的优先级值
   • 优先级数值小的元素排在前面；不在映射表中的元素优先级设为Infinity，会自动排在所有指定顺序元素的后面
   • ES2019及之后的JavaScript引擎中，sort方法是稳定排序，因此不在arr2中的元素会保留原数组的相对顺序。

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