如何合并对象数组重复项的value值而非删除整个对象

问题背景 #

原数组：

[
  {item: 'Item 1', value: 1},
  {item: 'Item 2', value: 3},
  {item: 'Item 3', value: 5},
  {item: 'Item 1', value: 3},
  {item: 'Item 2', value: 5}
]

期望合并后结果：

[
  {item: 'Item 1', value: 4},
  {item: 'Item 2', value: 8},
  {item: 'Item 3', value: 5}
]

原代码仅保留每个item的最后一个实例，无法累加value：

const findDuplicates = () => {
    return objArr?.reduce((arr, item) => {
        const removed = arr?.filter(i => i.item !== item.item)
        const dup = [...removed, item]
        return dup
    }, [])
}

解决方案 #

使用reduce先构建item到对象的映射，累加相同item的value，再转换为数组：

const mergeDuplicates = () => {
  // 处理空数组的情况
  if (!objArr) return [];
  
  // 用reduce创建映射表，key为item值，value为合并后的对象
  const mergedMap = objArr.reduce((acc, current) => {
    if (acc[current.item]) {
      // 存在相同item，累加value
      acc[current.item].value += current.value;
    } else {
      // 不存在则添加新对象（用扩展运算符避免引用原对象）
      acc[current.item] = { ...current };
    }
    return acc;
  }, {});
  
  // 将映射表的values转为数组，得到最终结果
  return Object.values(mergedMap);
}

代码说明 #

1. 映射表构建：通过reduce遍历数组，以每个对象的item值作为键，存储对应的对象。遇到相同item时，直接累加value。
2. 数组转换：使用Object.values()将映射表中的值提取为数组，得到合并后的结果。
3. 空值处理：开头判断objArr是否为空，避免报错。

这个方法的时间复杂度是O(n)，比原代码中每次filter的O(n²)效率更高。

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