本文介绍一种简洁、高性能的方法，用于根据 id 字段比对两个对象数组（一个含嵌套 item 结构，另一个为扁平对象），实现“保留已有状态、新增默认非激活、移除不存在项”的三步同步逻辑。
本文介绍一种简洁、高性能的方法，用于根据 id 字段比对两个对象数组（一个含嵌套 item 结构，另一个为扁平对象），实现“保留已有状态、新增默认非激活、移除不存在项”的三步同步逻辑。
在前端开发中，常需将服务端返回的“最新数据列表”与本地已维护的“带状态的列表”进行智能同步——例如菜单项、配置项或用户偏好设置。典型场景是：原始数组每个元素包含 item 对象及 active 状态；新数组仅提供纯数据对象（如 { id, path }），要求最终结果保留原 active 状态（若存在），新项默认 active: false，且剔除旧数组中不再出现的项。
核心思路是：提取旧数组中所有已知 id 构建查找集合，再遍历新数组逐项映射生成目标结构。该方案时间复杂度为 O(n + m)，避免嵌套循环，兼顾可读性与性能。
以下是完整实现：
const oldItems = [
{ 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 newItems = [
{ id: '1', path: "some text" },
{ id: '4', path: "some text" },
{ id: '6', path: "some text" }
];
// 步骤1：构建旧数组 id 集合（Set 提供 O(1) 查找）
const existingIds = new Set(oldItems.map(({ item }) => item.id));
// 步骤2：映射新数组 → 生成标准化结果
const result = newItems.map(item => ({
item,
active: existingIds.has(item.id)
? oldItems.find(el => el.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 }
// ]
⚠️ 注意事项：
- 上述示例使用 find() 精确获取原 active 值，确保语义清晰；若追求极致性能且确认旧数组无重复 id，也可预先构建 id → active 映射表（Map 或普通对象）替代 find；
- 若新数组可能存在重复 id，建议先去重（如用 Array.from(new Set(...)) 预处理）；
- 所有比较基于 id 字符串值，如需支持数字 ID，请统一转换类型（如 String(item.id)）；
- 此逻辑天然支持“增删改”中的增与删（通过新数组控制存在性），若还需保留旧数组中未出现在新数组里的项（即“只增不删”），则需改用 filter + map 混合策略。
总结：该方法以函数式思维解耦数据结构与业务逻辑，代码简短、意图明确、易于测试与复用，是处理此类“状态感知数据同步”问题的推荐实践。
