JavaScript如何根据相同id键值合并两个长度不同的对象数组

之前用Map.set()未生效，通常是遍历逻辑缺漏导致：要么是同id项直接覆盖丢失原有字段，要么是没有正确归集id键，要么是最后未将Map迭代器转为普通数组。以下是可直接运行的正确实现：

实现代码 #

const errArray = [
  { 'id': 1, 'error': ["Error 1", "Error2"] },
  { 'id': 2, 'error': ["Error 3", "Error4"] }
]

const warnArray = [
  { 'id': 1, 'warning': ["Error 5", "Error6"]}
]

const idMap = new Map()

// 遍历第一个数组存入Map，以id为键
errArray.forEach(item => {
  idMap.set(item.id, { ...item })
})

// 遍历第二个数组，同id则合并属性，不存在则新增
warnArray.forEach(item => {
  const existItem = idMap.get(item.id)
  if (existItem) {
    idMap.set(item.id, { ...existItem, ...item })
  } else {
    idMap.set(item.id, { ...item })
  }
})

// 提取Map值得到最终合并数组
const result = Array.from(idMap.values())

输出结果 #

运行后得到的结果和预期完全一致：

[
  {
    id: 1,
    error: ["Error 1", "Error2"],
    warning: ["Error 5", "Error6"]
  },
  {
    id: 2,
    error: ["Error 3", "Error4"]
  }
]

注意点 #

• 存入Map时用扩展运算符做浅拷贝，避免后续修改污染原数组对象
• 同id项合并时要先取出原有项，再和新项做属性合并，不能直接set覆盖
• 如果后续要合并更多同结构数组，只要重复遍历、同id合并的逻辑即可，不需要修改原有代码

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