如何将选中数组匹配ID的对象移至JavaScript数组顶部？

假设你的数据结构如下（结构不同可对应调整）：

• selectedArr：存储选中的id数组（如 [2, 5]）或包含id的对象数组（如 [{id: 2}, {id: 5}]）
• arr：通用展示数据数组，每个对象包含id字段（如 [{id:1, name: 'A'}, {id:2, name: 'B'}, {id:3, name: 'C'}, {id:5, name: 'E'}]）

方案1：匹配元素按selectedArr的id顺序排列到顶部 #

如果需要顶部的匹配元素和selectedArr的id顺序一致，可按以下步骤实现：

// 1. 提取选中的id集合（兼容id数组和对象数组两种格式）
const selectedIds = new Set(
  typeof selectedArr[0] === 'object' ? selectedArr.map(item => item.id) : selectedArr
);

// 2. 拆分数组：筛选出匹配和不匹配的元素
const [matched, unmatched] = arr.reduce((groups, item) => {
  groups[selectedIds.has(item.id) ? 0 : 1].push(item);
  return groups;
}, [[], []]);

// 3. 按照selectedArr的id顺序重新排列匹配元素
const sortedMatched = selectedArr
  .map(item => matched.find(ele => ele.id === (typeof item === 'object' ? item.id : item)))
  .filter(Boolean); // 过滤掉selectedArr中不存在于arr的id对应的undefined

// 4. 合并结果
const finalArr = [...sortedMatched, ...unmatched];

说明： #

• 用Set存储id是为了快速判断元素是否匹配，时间复杂度O(1)
• reduce拆分数组时，不匹配的元素会严格保留原数组的顺序
• filter(Boolean)用于处理selectedArr中存在arr里没有的id的情况，避免结果出现undefined

方案2：匹配元素按原数组顺序移到顶部 #

如果不需要按selectedArr的顺序，只需要把所有匹配元素移到顶部，同时保留它们在原数组中的相对顺序，代码更简洁：

// 提取选中的id集合（兼容两种格式）
const selectedIds = new Set(
  typeof selectedArr[0] === 'object' ? selectedArr.map(item => item.id) : selectedArr
);

// 合并匹配和不匹配的元素，各自保留原顺序
const finalArr = [
  ...arr.filter(item => selectedIds.has(item.id)),
  ...arr.filter(item => !selectedIds.has(item.id))
];

说明： #

• 两次filter操作分别筛选出匹配和不匹配的元素，各自保留原数组中的相对顺序，最后合并即可

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