在JavaScript中比较两个对象数组并按ID合并更新值

需求：合并两个对象数组arr1和arr2，对于ID相同的元素，使用arr2中的值覆盖arr1的元素；保留arr1中独有的元素，同时添加arr2中独有的元素，最终得到目标数组。

原始数组 #

var arr1 = [{"id": "15-1", "value": {"x": {"on": false}}}, 
           {"id": "15-2", "value": {"x": {"on": true}}}, 
           {"id": "15-3", "value": {"x": {"on": false}}},
           {"id": "15-4", "value": {"x": {"on": true}}}, 
           {"id": "16-2", "value": {"x": {"on": false}}} ];

var arr2 =[{"id": "16-1", "value": {"x": {"on": true}}}, 
           {"id": "16-2", "value": {"x": {"on": true}}} ];

方法1：使用Map实现高效合并（推荐） #

利用Map的键值对特性，实现O(n)时间复杂度的合并更新，适合处理大数据量的数组：

// 将arr1转换为以id为键的Map
const mergedMap = new Map(arr1.map(item => [item.id, item]));

// 遍历arr2，更新Map中已存在的元素或添加新元素
arr2.forEach(item => mergedMap.set(item.id, item));

// 将Map的值转换为数组，得到最终结果
const finalArray = Array.from(mergedMap.values());

console.log(finalArray);

方法2：基础数组操作实现 #

通过过滤和拼接数组完成需求，逻辑直观，适合理解基础数组API：

// 过滤掉arr1中与arr2存在相同id的元素
const filteredArr1 = arr1.filter(item => !arr2.some(arr2Item => arr2Item.id === item.id));

// 合并过滤后的arr1和完整的arr2
const finalArray = filteredArr1.concat(arr2);

console.log(finalArray);

最终结果 #

两种方法都会得到目标数组：

finalArray = [{"id": "15-1", "value": {"x": {"on": false}}}, 
              {"id": "15-2", "value": {"x": {"on": true}}}, 
              {"id": "15-3", "value": {"x": {"on": false}}},
              {"id": "15-4", "value": {"x": {"on": true}}}, 
              {"id": "16-1", "value": {"x": {"on": true}}},
              {"id": "16-2", "value": {"x": {"on": true}}} ];

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