JavaScript中如何将对象数组的键值对合并到另一对象数组（含ID匹配）

原方法无效的原因 #

你之前用map结合索引i的方式，是依赖数组元素的顺序来匹配的——只有当array1和array2的元素顺序完全一致、且每个位置的元素ID相同时才会生效。如果两个数组的元素顺序打乱，或者某一方缺少对应索引的元素，就会出现匹配错误甚至报错。

基于ID匹配的正确合并方法 #

要实现按共同ID合并，最稳妥的方式是先把其中一个数组转换成以ID为键的映射（查找效率更高），再遍历另一个数组进行属性合并：

方法1：用普通对象做映射

const array1 = [{id: 'A123', state: 'Test'}];
const array2 = [{id: 'A123', value: 'Test Value'}];

// 将array2转换为ID为键的对象，方便快速查找
const idToItemMap = array2.reduce((map, item) => {
  map[item.id] = item;
  return map;
}, {});

// 遍历array1，合并对应ID的属性
const mergedArray = array1.map(item => ({
  ...item, // 保留array1原有的属性
  ...idToItemMap[item.id] // 合并array2中对应ID的所有属性
}));

console.log(mergedArray);
// 输出：[{id: 'A123', state: 'Test', value: 'Test Value'}]

方法2：用ES6 Map做映射

如果更倾向于使用原生数据结构，也可以用Map来实现：

const array2Map = new Map(array2.map(item => [item.id, item]));

const mergedArray = array1.map(item => ({
  ...item,
  ...array2Map.get(item.id)
}));

额外说明 #

• 如果array1中存在某个ID在array2里没有对应项，上面的代码会自动忽略（不会添加不存在的属性），如果需要兜底处理，可以写成...(idToItemMap[item.id] || {})，避免出现undefined。
• 如果需要合并两个数组的所有元素（包括仅在其中一个数组存在的ID），可以先收集所有唯一ID，再分别从两个数组中取对应属性合并。

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