如何使用ES6或简单函数合并数组对象并累加value值？

当然可以用ES6的方法轻松实现这个需求，最常用的就是Array.prototype.reduce()结合对象做中间缓存，具体实现如下：

原始数组 #

const originalArr = [{name:"abc",value:5},{name:"abc",value:10},{name:"abc1",value:5},{name:"abc1",value:15}];

实现代码 #

const mergedArr = Object.values(
  originalArr.reduce((acc, curr) => {
    // 若当前name已在缓存对象中，直接累加value
    if (acc[curr.name]) {
      acc[curr.name].value += curr.value;
    } else {
      // 若为新name，复制当前元素存入缓存
      acc[curr.name] = {...curr};
    }
    return acc;
  }, {})
);

最终结果 #

执行后mergedArr的结果为：

[{name:"abc",value:15},{name:"abc1",value:20}]

代码说明 #

• reduce()遍历原始数组，以空对象作为初始累加器，将每个元素的name作为键，存储对应合并后的对象
• 遇到重复name时直接累加value；遇到新name时用扩展运算符...复制当前元素，避免修改原数组对象
• 最后通过Object.values()将累加器对象的所有值提取出来，转换成目标数组格式

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