如何在JavaScript中合并两个同键对象并对数组值去重？

问题分析 #

你需要合并两个对象，将对象中同名的数组属性元素合并（并自动去重重复元素，比如apple只保留一次），而不是直接覆盖属性。

现有方法失败原因 #

1. 扩展运算符直接覆盖：object3 = {...object1, ...object2}会让object2的同名属性完全替换object1的属性，无法实现数组合并。
2. 错误处理数组：第二种方法用{...obj1[i], ...obj2[i]}把数组当作键值对象处理，本质是按索引覆盖元素，完全不是数组合并的逻辑，结果自然不符合预期。

正确实现方案 #

方案1：固定属性的手动合并（适合属性已知的场景）

let object1 = {
  fruits: ['apple', 'orange'],
  veggies: ['carrot', 'pumpkin'],
};

let object2 = {
  fruits: ['apple', 'banana', 'mango'],
  veggies: ['potato', 'brinjal'],
};

// 封装数组合并去重的工具函数
const mergeAndUnique = (arrA, arrB) => [...new Set([...arrA, ...arrB])];

// 手动合并每个数组属性
const object3 = {
  fruits: mergeAndUnique(object1.fruits, object2.fruits),
  veggies: mergeAndUnique(object1.veggies, object2.veggies),
};

console.log(object3);
// 输出：
// {
//   fruits: ['apple', 'orange', 'banana', 'mango'],
//   veggies: ['carrot', 'pumpkin', 'potato', 'brinjal']
// }

方案2：通用合并函数（支持任意数组属性的对象）

如果你的对象属性不固定，或者需要复用合并逻辑，可以用这个通用函数：

let object1 = {
  fruits: ['apple', 'orange'],
  veggies: ['carrot', 'pumpkin'],
};

let object2 = {
  fruits: ['apple', 'banana', 'mango'],
  veggies: ['potato', 'brinjal'],
};

const mergeObjectArrayProps = (obj1, obj2) => {
  // 获取两个对象的所有属性名，避免遗漏任何一方的属性
  const allKeys = [...new Set([...Object.keys(obj1), ...Object.keys(obj2)])];
  
  return allKeys.reduce((result, key) => {
    // 取出对应属性的数组，不存在则用空数组兜底
    const arr1 = obj1[key] || [];
    const arr2 = obj2[key] || [];
    // 合并数组并去重
    result[key] = [...new Set([...arr1, ...arr2])];
    return result;
  }, {});
};

const object3 = mergeObjectArrayProps(object1, object2);
console.log(object3);
// 输出符合预期的结果

可选调整：不需要去重的情况 #

如果允许数组中保留重复元素，只需要去掉new Set()部分，直接合并数组即可：

const mergeArrays = (arrA, arrB) => [...arrA, ...arrB];

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