基于ID同步两个对象数组：新增项并入，缺失项移除

需求：将arr2中的新增项添加至arr1，同时移除arr1中不存在于arr2的项（以id字段为判断依据）。

用户尝试的代码：

const arr1 = [
  {name: "name1", id: 1},
  {name: "name2", id: 2},
  {name: "name3", id: 3}
];
    
const arr2 = [
  {name: "name1", id: 1},
  {name: "name2", id: 4},
  {name: "name3", id: 3}
];

const array1 = arr2.filter((val) => {
  return arr1.find((val2) => {
    const arr = [];
    if (!arr1.includes(val.id)) {
      arr.push(val);
    }
  });
});

console.log(array1)

期望输出：

[ 
  {name: "name1", id: 1},
  {name: "name3", id: 3},
  {name: "name2", id: 4} 
]

原代码问题分析 #

• 逻辑混乱：filter需要返回布尔值决定是否保留当前项，但内部的find既没正确判断id匹配，还定义了无意义的arr数组，完全没用到。
• 判断错误：arr1.includes(val.id)是错的——arr1是对象数组，includes判断的是对象是否存在，不是id是否存在。
• 未实现核心需求：既没移除arr1中arr2没有的项，也没添加arr2的新增项。

正确解法 #

用Set存储id集合实现高效查找，分两步完成需求：

1. 保留arr1中id存在于arr2的项
2. 添加arr2中id不存在于arr1的项

代码实现：

const arr1 = [
  {name: "name1", id: 1},
  {name: "name2", id: 2},
  {name: "name3", id: 3}
];
    
const arr2 = [
  {name: "name1", id: 1},
  {name: "name2", id: 4},
  {name: "name3", id: 3}
];

// 提取两个数组的id集合，方便快速查找
const arr1Ids = new Set(arr1.map(item => item.id));
const arr2Ids = new Set(arr2.map(item => item.id));

// 1. 筛选arr1中在arr2存在的项
const filteredArr1 = arr1.filter(item => arr2Ids.has(item.id));
// 2. 找出arr2中不在arr1的新增项
const newItemsFromArr2 = arr2.filter(item => !arr1Ids.has(item.id));
// 合并得到最终结果
const result = [...filteredArr1, ...newItemsFromArr2];

console.log(result);

如果要直接修改原arr1（而非返回新数组），可以这样写：

// 清空原arr1，再合并筛选后的项和新增项
arr1.length = 0;
arr1.push(...filteredArr1, ...newItemsFromArr2);

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