如何在Angular中归约对象数组并对同名属性值求和

你可以直接使用TypeScript/JavaScript原生的Array.reduce方法完成分组归约，该方法在所有Angular版本中都可以直接使用，无需引入额外依赖：

// 原始数组
const tab = [{name:'i', value:13}, {name:'j', value:10},{name:'i', value:8}];

// 按name属性分组累加value
const sumResult = tab.reduce((acc, current) => {
  const existedItem = acc.find(item => item.name === current.name);
  if (existedItem) {
    existedItem.value += current.value;
  } else {
    acc.push({...current});
  }
  return acc;
}, [] as {name: string, value: number}[]);

// 赋值给原变量即可得到预期结果
tab = sumResult;

如果你希望获得更高的执行效率，也可以先通过映射对象做中间存储再转换格式：

const tab = [{name:'i', value:13}, {name:'j', value:10},{name:'i', value:8}];

// 用对象做中间映射，查找效率更高
const tempMap = tab.reduce((map, item) => {
  map[item.name] = (map[item.name] || 0) + item.value;
  return map;
}, {} as Record<string, number>);

// 转换为目标数组格式
tab = Object.entries(tempMap).map(([name, value]) => ({ name, value }));

如果需要复用该逻辑，可以封装为通用工具方法：

function groupSumByName(arr: {name: string, value: number}[]) {
  const tempMap = arr.reduce((map, item) => {
    map[item.name] = (map[item.name] || 0) + item.value;
    return map;
  }, {} as Record<string, number>);
  return Object.entries(tempMap).map(([name, value]) => ({ name, value }));
}

// 调用示例
const tab = groupSumByName([{name:'i', value:13}, {name:'j', value:10},{name:'i', value:8}]);

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