如何合并键相同的两个对象并合并对应数组值？

有两个键名完全相同，但对应数组值不同的对象：

const obj1 = {
  "cars": ["nissan","toyota","hyundai"],
  "color": ["red","black","white"], 
};
const obj2 = {
  "cars": ["gmc","ford","chevrolet"],
  "color": ["orange","blue","grey"], 
};

使用Object.assign(obj1, obj2)或者扩展运算符let merge1 = {...obj1,...obj2}进行合并时，结果是obj2的数组直接覆盖obj1的对应数组：

{
  "cars": ["gmc", "ford", "chevrolet"],
  "color": ["orange", "blue", "grey"] 
}

如果需要将对应键的数组合并，得到如下结果：

{
  "cars": ["nissan","toyota","hyundai","gmc","ford","chevrolet"],
  "color": ["red","black","white","orange","blue","grey"] 
}

可以通过手动遍历键并合并数组的方式实现，以下是两种常用写法：

方法一：遍历键集合合并 #

const mergedObj = {};
// 收集两个对象的所有键，避免遗漏仅存在于单个对象中的键
const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);

for (const key of allKeys) {
  // 合并两个对象的对应数组，若某个对象无该键则用空数组兜底
  mergedObj[key] = [...(obj1[key] || []), ...(obj2[key] || [])];
}

console.log(mergedObj);

方法二：用reduce简化实现 #

const mergedObj = [...new Set([...Object.keys(obj1), ...Object.keys(obj2)])]
  .reduce((result, key) => {
    result[key] = [...(obj1[key] || []), ...(obj2[key] || [])];
    return result;
  }, {});

console.log(mergedObj);

为什么默认合并方法不行？ #

Object.assign和对象扩展运算符...的合并逻辑是直接替换相同键的属性值，不管属性值是基本类型还是数组这类引用类型，不会自动处理数组合并，因此需要手动编写数组拼接的逻辑。

内容的提问来源于stack exchange，提问作者Omar E. Manaa