如何按keyword匹配合并两个JS对象数组，缺失项补number:0

问题原因 #

你当前代码出现重复对象的核心原因是：遍历array1每个元素的逻辑里嵌套遍历了整个array2，每遍历到一个array2的元素都会执行一次push操作，array2有多少个元素，每个array1的元素就会被重复插入多少次到结果数组里，自然会出现大量重复对象。

解决代码 #

我们可以先把array2转换成以keyword为键的映射表，遍历array1的时候直接查表匹配即可，既不会出现重复问题，查找效率也更高，实现代码如下：

const array1 = [
  { keyword: 'present', prop: 'foo' },
  { keyword: 'another present', prop: 'bla' },
  { keyword: 'not present', prop: 'hey' }
]

const array2 = [
  { keyword: 'present', number: 12345 },
  { keyword: 'another present', number: 12345 }
]

// 构建array2的keyword映射表
const array2Map = new Map(array2.map(item => [item.keyword, item]))

const res = array1.map(obj1 => {
  const matchObj = array2Map.get(obj1.keyword)
  // 匹配到就合并两个对象属性，未匹配到就新增number:0
  return matchObj ? {...obj1, ...matchObj} : {...obj1, number: 0}
})

console.log(res)

运行后输出完全符合预期：

[
  { keyword: 'present', prop: 'foo', number: 12345 },
  { keyword: 'another present', prop: 'bla', number: 12345 },
  { keyword: 'not present', prop: 'hey', number: 0 }
]

可选优化 #

如果你的array2里存在同一个keyword对应多个对象的场景，可以提前对array2做去重或属性合并处理，避免映射表出现值覆盖的问题。

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