本文介绍一种简洁高效的方案，用于对比两个结构相似的数组（如旧数组含嵌套对象和状态字段，新数组仅含基础数据），根据id匹配关系保留、移除或新增元素，并自动设置默认状态。
本文介绍一种简洁高效的方案，用于对比两个结构相似的数组（如旧数组含嵌套对象和状态字段，新数组仅含基础数据），根据id匹配关系保留、移除或新增元素，并自动设置默认状态。
在前端开发中，常需将“带状态的旧数据集”（如含 active 标志的列表）与“纯结构的新数据集”（如后端返回的最新项）进行同步：既要复用已有状态（如 id: '1' 的 active: true），又要为新增项赋予默认状态（如 active: false），同时剔除已不存在的项。核心在于以 id 为唯一标识进行映射，而非浅层或深层全量比对。
以下是一个生产就绪的实现方案：
const oldArray = [
{ item: { id: '1', path: "some text" }, active: true },
{ item: { id: '2', path: "some text" }, active: true },
{ item: { id: '4', path: "some text" }, active: false },
{ item: { id: '10', path: "some text" }, active: false }
];
const newArray = [
{ id: '1', path: "some text" },
{ id: '4', path: "some text" },
{ id: '6', path: "some text" }
];
// 提取所有旧数组中的 ID 集合，用于 O(1) 查找
const oldIds = new Set(oldArray.map(obj => obj.item.id));
// 构建结果：遍历新数组，为每个 item 创建标准结构
const result = newArray.map(item => ({
item,
active: oldIds.has(item.id)
? oldArray.find(old => old.item.id === item.id)?.active
: false
}));
console.log(result);
// 输出：
// [
// { item: { id: '1', path: "some text" }, active: true },
// { item: { id: '4', path: "some text" }, active: false },
// { item: { id: '6', path: "some text" }, active: false }
// ]
✅ 关键设计点说明：
- 使用 Set 存储旧数组所有 item.id，确保查找时间复杂度为 O(1)，整体算法为 O(n + m)；
- map() 遍历新数组，保证输出顺序与新数据一致（符合 UI 渲染预期）；
- 对于存在匹配的 ID，通过 find() 精确复用原始 active 值（避免硬编码逻辑）；
- 新增项自动设为 active: false，符合“默认非激活”的业务约定。
⚠️ 注意事项：
- 若 oldArray 中存在重复 ID，find() 将返回首个匹配项；如需支持多实例，请预先去重或改用 filter() + 明确策略；
- 确保 id 字段类型一致（如均为字符串），避免 '1' !== 1 导致匹配失败；
- 如需深度比较（如 path 变更也影响状态），应在 active 赋值逻辑中扩展判断条件。
该方法轻量、可读性强，无需引入 Lodash 等依赖，适用于 React/Vue 等框架的状态同步场景，是处理“带元数据的列表更新”问题的经典范式。
