如何合并嵌套对象数组并去重？JavaScript实现方案

我有一个包含多层对象数组的集合，每个对象都包含键值对。希望基于所有对象共有的Element键，合并并拆分这些对象数组，对象数组的数量可以为n个。

示例输入 #

const array1 = [
  [ 
    { Time: 45, Element: 'Hi'},
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' }
  ],
  [
    { Time: 45, Element: 'Hi' }, 
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' },
    { Time: 25, Element: 'Hello' }, 
    { Time: 35, Element: 'Hello' }, 
    { Time: 20, Element: 'Hello' }
  ],
  [
    { Time: 45, Element: 'Hi' },
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' },
    { Time: 25, Element: 'Hello' },
    { Time: 35, Element: 'Hello' },
    { Time: 20, Element: 'Hello' },
    { Time:100, Element: 'Bye'}
  ]
];

期望输出 #

const mergedArray = [
  [ 
    { Time: 45, Element: 'Hi'},
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' }
  ],
  [
    { Time: 25, Element: 'Hello' }, 
    { Time: 35, Element: 'Hello' }, 
    { Time: 20, Element: 'Hello' }
  ],
  [
    { Time:100, Element: 'Bye'}
  ]
];

我的尝试 #

我写了以下代码，但它仅返回第一个数组，达不到预期效果：

const arrays = [
  [ 
    { Time: 45, Element: 'Hi'},
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' }
  ],

  [
    { Time: 45, Element: 'Hi' }, 
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' },
    { Time: 25, Element: 'Hello' }, 
    { Time: 35, Element: 'Hello' }, 
    { Time: 20, Element: 'Hello' }
  ],
  [
    { Time: 45, Element: 'Hi' },
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' },
    { Time: 25, Element: 'Hello' },
    { Time: 35, Element: 'Hello' },
    { Time: 20, Element: 'Hello' },
    { Time:100, Element: 'Bye'}
  ]
];

const uniqueMergedArray = arrays.reduce((result, obj) => {
  if (!result.some(item => item.Element === obj.Element)) {
    result.push(obj);
  }
  return result;
}, [])

console.log("Merged Array:", uniqueMergedArray);

解决方案 #

核心思路是先将多层数组平铺为一维，再按Element键分组，最后转换为目标格式：

1. 平铺数组：用Array.flat()把嵌套的数组展开成一维数组，方便统一处理所有对象。
2. 分组对象：用Array.reduce()遍历所有对象，以Element的值为键，将相同Element的对象归类到同一个数组中。
3. 转换格式：用Object.values()把分组后的对象转换为二维数组，就是最终需要的结果。

完整代码如下：

const array1 = [
  [ 
    { Time: 45, Element: 'Hi'},
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' }
  ],
  [
    { Time: 45, Element: 'Hi' }, 
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' },
    { Time: 25, Element: 'Hello' }, 
    { Time: 35, Element: 'Hello' }, 
    { Time: 20, Element: 'Hello' }
  ],
  [
    { Time: 45, Element: 'Hi' },
    { Time: 55, Element: 'Hi' },
    { Time: 65, Element: 'Hi' },
    { Time: 25, Element: 'Hello' },
    { Time: 35, Element: 'Hello' },
    { Time: 20, Element: 'Hello' },
    { Time:100, Element: 'Bye'}
  ]
];

// 平铺数组 + 分组 + 转换格式
const mergedArray = Object.values(
  array1.flat().reduce((groups, item) => {
    const key = item.Element;
    // 如果当前分组不存在，初始化空数组
    if (!groups[key]) {
      groups[key] = [];
    }
    // 将当前对象加入对应分组
    groups[key].push(item);
    return groups;
  }, {})
);

console.log(mergedArray);

这段代码会输出和期望一致的结果，而且可以处理任意数量的嵌套数组和Element类型。

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