JavaScript：基于键值合并更新字典数组的高效实现方法

嘿，你说得对，嵌套循环确实是效率最低的方式——尤其是当两个数组的元素数量较多时，时间复杂度会达到O(n*m)，完全没必要。咱们可以用**映射表（Map 或普通对象）**来实现O(n+m)的高效合并，这才是最优解。

核心思路 #

1. 先把第一个数组的元素以id为键，存到一个映射结构里，这样后续查找和更新的操作都是O(1)的时间复杂度。
2. 遍历第二个数组，对于每个元素：
   • 如果id已经在映射表中，就用当前元素覆盖映射表里的旧元素；
   • 如果id不存在，就把当前元素添加到映射表中。
3. 最后把映射表中的值提取出来，转成数组就是咱们要的结果。

代码实现（JavaScript） #

方案1：用ES6 Map（推荐，支持任意类型的id）

const arr1 = [{ id: "1", color: "orange" }, { id: "2", color: "red" }];
const arr2 = [{ id: "1", color: "pink" }, { id: "3", color: "yellow" }, { id: "4", color: "blue" }];

// 用arr1初始化Map，每个元素的id作为键
const mergedMap = new Map(arr1.map(item => [item.id, item]));

// 遍历arr2，覆盖已有id或新增新id
arr2.forEach(item => mergedMap.set(item.id, item));

// 将Map的值转换为数组
const mergedResult = Array.from(mergedMap.values());

console.log(mergedResult);
// 输出：[{ id: "1", color: "pink" }, { id: "2", color: "red" }, { id: "3", color: "yellow" }, { id: "4", color: "blue" }]

方案2：用普通对象（适合id为字符串/数字的场景）

如果你的id都是常规的字符串或数字，用普通对象也能实现，代码更简洁：

const arr1 = [{ id: "1", color: "orange" }, { id: "2", color: "red" }];
const arr2 = [{ id: "1", color: "pink" }, { id: "3", color: "yellow" }, { id: "4", color: "blue" }];

const tempObj = {};

// 先存入arr1的元素
arr1.forEach(item => tempObj[item.id] = item);
// 再处理arr2，覆盖或新增
arr2.forEach(item => tempObj[item.id] = item);

// 把对象的值转为数组
const mergedResult = Object.values(tempObj);

为什么这是最优解？ #

• 时间效率：Map/对象的set/赋值操作都是O(1)，整个过程只需要遍历两次数组，总时间复杂度是O(n+m)，比嵌套循环的O(n*m)高效得多——当数组元素数量从几十涨到上万时，差距会非常明显。
• 可读性：代码逻辑清晰，一看就知道是按id做合并，比嵌套循环的多层嵌套好理解多了。
• 扩展性：如果后续需要对合并逻辑做调整（比如合并时保留某些字段不被覆盖），在映射表的操作里修改就行，非常灵活。

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