本文介绍如何基于一个“选中 ID 列表”，对目标对象数组进行稳定排序，使所有 id 匹配的元素统一前置，相同 ID 的多个对象保持原有相对顺序，并避免修改原数组。
本文介绍如何基于一个“选中 id 列表”，对目标对象数组进行稳定排序，使所有 `id` 匹配的元素统一前置，相同 id 的多个对象保持原有相对顺序，并避免修改原数组。
在前端开发中，常需根据用户选择动态调整数据展示顺序——例如将已勾选的商品、已收藏的条目或已激活的配置项置顶显示。但与简单去重或唯一映射不同，本场景的关键约束在于：同一 id 可能对应多个对象（如不同名称的同 ID 车型），且这些对象都应被整体提升至顶部，同时保持它们在原数组中的相对位置。
直接使用 unshift() 逐个插入会破坏稳定性（多次插入导致顺序错乱），也难以高效判断归属；而暴力遍历+拼接则逻辑冗长、可读性差。最优解是采用 “索引映射 + 稳定排序” 策略：先构建选中 ID 到优先级序号的映射表，再通过 Array.prototype.sort() 实现语义清晰、性能可控的排序。
✅ 核心实现步骤
-
构建优先级映射表（Map）
将 selectedArr 中每个 id 映射为其首次出现的索引（即优先级：越小越靠前）。使用 Map 保证 O(1) 查找效率：const sortMap = new Map(selectedArr.map(({ id }, idx) => [id, idx])); // 示例：Map { '1' => 0, '3' => 1 } -
执行稳定排序
对原数组进行浅拷贝（避免副作用），利用 sort() 比较函数返回值决定顺序：- 若 a.id 在 sortMap 中 → 返回其优先级值（如 0, 1）
- 若不存在 → 返回极大值（如 10000000），确保排至末尾
- 差值比较自然实现升序：优先级小的排前面
const sortedArray = [...arr].sort((a, b) => { const priorityA = sortMap.get(a.id) ?? 10000000; const priorityB = sortMap.get(b.id) ?? 10000000; return priorityA - priorityB; });
? 完整可运行示例
const arr = [
{ id: "1", name: "Skoda - Auto" },
{ id: "2", name: "BMW - Auto" },
{ id: "3", name: "Mustang" },
{ id: "2", name: "Ferrari" },
{ id: "1", name: "Ford" }
];
const selectedArr = [
{ id: "1", name: "something - 1" },
{ id: "3", name: "something - 1" }
];
// Step 1: 构建 ID → 优先级映射
const sortMap = new Map(selectedArr.map(({ id }, idx) => [id, idx]));
// Step 2: 排序（不修改原数组）
const sortedArray = [...arr].sort(
(a, b) => (sortMap.get(a.id) ?? 10000000) - (sortMap.get(b.id) ?? 10000000)
);
console.log(sortedArray);
// 输出：
// [
// { id: "1", name: "Skoda - Auto" },
// { id: "1", name: "Ford" },
// { id: "3", name: "Mustang" },
// { id: "2", name: "BMW - Auto" },
// { id: "2", name: "Ferrari" }
// ]⚠️ 注意事项与最佳实践
- 稳定性保障：现代 JavaScript 引擎（V8、SpiderMonkey 等）对 sort() 的实现已保证 stable sort（ES2019+ 规范要求），因此相同优先级的元素（如两个 id: "1"）将严格保持原始相对顺序。
- 默认值设计：?? 10000000 中的极大值应显著大于 selectedArr.length，避免因 ID 冲突导致意外排序；若需更健壮，可用 Infinity 替代（sort 能正确处理）。
-
性能考量：时间复杂度为 O(n log n)，适用于数千条以内数据；若数据量极大（>10万），可考虑分组 + 拼接方案（O(n)）：
const selectedIds = new Set(selectedArr.map(({ id }) => id)); const [matched, rest] = arr.reduce( ([match, other], item) => selectedIds.has(item.id) ? [[...match, item], other] : [match, [...other, item]], [[], []] ); const sortedArray = [...matched, ...rest]; -
扩展性提示：如需支持多级排序（如先按选中优先级，再按名称字母序），可在比较函数中嵌套逻辑：
return priorityA - priorityB || a.name.localeCompare(b.name);
该方法简洁、可读性强、无副作用，是处理“条件置顶排序”问题的标准实践，推荐在各类管理后台、筛选器、多选列表等场景中复用。
