如何基于指定key合并两个对象数组为一个对象数组？

问题场景 #

现有两个对象数组，需要以name为唯一key合并，保留所有对象的属性，最终得到包含全部元素的合并数组：

数组1

let array1 = [
  {
    name: "Deepak",
    age: 20
  },
  {
    name: "John",
    age: 30
  }
]

数组2

let array2 = [
  {
    name: "Deepak",
    favGame: "Cricket"
  },
  {
    name: "John",
    favGame: "Football"
  },
  {
    name: "Kailash",
    favGame: "Basketball"
  }
]

预期结果

let finalArray = [
  {
    name: "Deepak",
    age: 20,
    favGame: "Cricket"
  },
  {
    name: "John",
    age: 30,
    favGame: "Football"
  },
  {
    name: "Kailash",
    favGame: "Basketball"
  }
]

解决方案1：使用Map高效合并（推荐） #

利用Map的O(1)查找特性，避免嵌套循环的O(n²)复杂度，适合处理大数据量：

const array1 = [
  { name: "Deepak", age: 20 },
  { name: "John", age: 30 }
];

const array2 = [
  { name: "Deepak", favGame: "Cricket" },
  { name: "John", favGame: "Football" },
  { name: "Kailash", favGame: "Basketball" }
];

// 初始化Map存储合并后的对象，key为name
const mergedMap = new Map();

// 先存入array1的所有元素
array1.forEach(item => mergedMap.set(item.name, {...item}));

// 遍历array2，合并或新增元素
array2.forEach(item => {
  const existingItem = mergedMap.get(item.name);
  mergedMap.set(item.name, existingItem ? {...existingItem, ...item} : {...item});
});

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

解决方案2：使用reduce简洁实现 #

通过合并数组后用reduce聚合，代码更简洁：

const array1 = [
  { name: "Deepak", age: 20 },
  { name: "John", age: 30 }
];

const array2 = [
  { name: "Deepak", favGame: "Cricket" },
  { name: "John", favGame: "Football" },
  { name: "Kailash", favGame: "Basketball" }
];

// 合并数组后用reduce按name聚合，最后转成数组
const finalArray = Object.values(
  [...array1, ...array2].reduce((acc, curr) => {
    acc[curr.name] = {...(acc[curr.name] || {}), ...curr};
    return acc;
  }, {})
);

两种方法最终都会生成你需要的finalArray，其中方案1在数据量较大时性能更优。

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