JavaScript中合并共享同键的对象数组内容的最优方法

需要将数组中共享相同键的对象内容合并，把所有值（无论是否为数组）合并到同名键的对象中，以下是具体实现方案：

示例输入（修正语法错误后） #

const array = 
[
  {
    brand: ['Adidas', 'Nike'],
    color: ['red']
  },
  {
    brand: ['Puma', 'Nike'],
    size: ['31', '32']
  }
];

预期输出 #

[{
  brand: ['Adidas', 'Puma', 'Nike'],
  size: ['31', '32'],
  color: ['red']
}] 

实现方案 #

核心使用Array.prototype.reduce()遍历数组，自定义合并逻辑，同时处理数组去重、非数组值的收集：

方案1：用Set去重（简洁高效，顺序可能变化）

const mergedArray = [array.reduce((acc, curr) => {
  for (const key in curr) {
    if (curr.hasOwnProperty(key)) {
      const value = curr[key];
      if (acc[key]) {
        // 合并数组并去重
        if (Array.isArray(acc[key]) && Array.isArray(value)) {
          acc[key] = [...new Set([...acc[key], ...value])];
        } else {
          // 非数组值转为数组收集，也可根据需求改为直接覆盖
          acc[key] = Array.isArray(acc[key]) ? [...acc[key], value] : [acc[key], value];
        }
      } else {
        // 初始化键值，非数组转为数组保持格式统一
        acc[key] = Array.isArray(value) ? [...value] : [value];
      }
    }
  }
  return acc;
}, {})];

方案2：手动去重（保持原顺序）

如果需要严格保留元素的出现顺序，可替换去重逻辑：

// 手动去重函数，保留元素首次出现的顺序
const uniqueArray = (arr) => arr.filter((item, index) => arr.indexOf(item) === index);

const mergedArray = [array.reduce((acc, curr) => {
  for (const key in curr) {
    if (curr.hasOwnProperty(key)) {
      const value = curr[key];
      if (acc[key]) {
        if (Array.isArray(acc[key]) && Array.isArray(value)) {
          acc[key] = uniqueArray([...acc[key], ...value]);
        } else {
          acc[key] = Array.isArray(acc[key]) ? [...acc[key], value] : [acc[key], value];
        }
      } else {
        acc[key] = Array.isArray(value) ? [...value] : [value];
      }
    }
  }
  return acc;
}, {})];

说明 #

• reduce方法是这类合并场景的最佳选择，它允许你完全控制合并逻辑，适配数组、非数组等不同类型的值
• 去重逻辑可根据需求调整，若不需要去重，直接合并数组即可
• 非数组值的处理可根据业务需求改为覆盖模式（比如acc[key] = value），上述示例默认转为数组统一格式

内容的提问来源于stack exchange，提问作者Dang Khoa Duong