在对象数组中匹配同名属性并合并对象（累加value与subvalue）

你可以用Array.reduce()来实现这个需求，filter方法更适合筛选元素，没法直接完成累加合并的操作，而reduce可以帮你按name分组并完成属性累加。

实现代码 #

const arr = [
 { id: 1, name: 'a', value: 2, subvalue: 3 }, 
 { id: 2, name: 'b', value: 4, subvalue: 3 },
 { id: 3, name: 'c', value: 4, subvalue: 3 },
 { id: 4, name: 'b', value: 3, subvalue: 4 } 
];

const mergedArr = Object.values(arr.reduce((acc, curr) => {
  // 检查当前name是否已经在分组容器中
  if (!acc[curr.name]) {
    // 不存在则复制当前对象存入容器
    acc[curr.name] = { ...curr };
  } else {
    // 存在则累加value和subvalue属性
    acc[curr.name].value += curr.value;
    acc[curr.name].subvalue += curr.subvalue;
  }
  return acc;
}, {}));

console.log(mergedArr);

代码说明 #

1. 分组容器初始化：reduce的初始值是一个空对象，用来按name存储每个分组的合并结果
2. 遍历处理每个对象：
   • 如果当前对象的name还没在容器里，就用扩展运算符...复制当前对象的所有属性存入容器（避免修改原数组对象）
   • 如果name已经存在，就直接对容器中对应对象的value和subvalue进行累加
3. 转换为结果数组：用Object.values()把容器中的所有值提取出来，得到最终的合并数组

这里合并后的对象id会保留该name第一次出现的对象的id，符合你“可使用原同名对象中的任意一个”的要求。如果想保留最后出现的id，只需要把判断逻辑改成每次先复制当前对象到容器，再对之前的属性值进行累加即可。

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