React中如何按ID对数组求和并生成新数组

给定如下数组：

const data = [
  {"id": "One", "number": 100}, 
  {"id": "One", "number": 150}, 
  {"id": "One", "number": 200}, 
  {"id": "Two", "number": 50}, 
  {"id": "Two", "number": 100}, 
  {"id": "Three", "number": 10}, 
  {"id": "Three", "number": 90}
];

需求：按id字段分组，将每组对应的number值求和，生成如下结构的新数组：

[
  {"id": "One", "number": 450},
  {"id": "Two", "number": 150}, 
  {"id": "Three", "number": 100}, 
]

解决方案1：使用reduce和Object.values #

这是最简洁的实现方式，利用reduce遍历数组并累加数据，最后转换为目标数组：

const data = [
  {"id": "One", "number": 100}, 
  {"id": "One", "number": 150}, 
  {"id": "One", "number": 200}, 
  {"id": "Two", "number": 50}, 
  {"id": "Two", "number": 100}, 
  {"id": "Three", "number": 10}, 
  {"id": "Three", "number": 90}
];

const result = Object.values(data.reduce((acc, item) => {
  // 若当前id未在累加对象中，初始化条目
  if (!acc[item.id]) {
    acc[item.id] = { id: item.id, number: 0 };
  }
  // 累加number值
  acc[item.id].number += item.number;
  return acc;
}, {}));

console.log(result);

解决方案2：使用Map结构 #

如果需要保留原数组中id的出现顺序，可以用Map来实现（Map会保持键的插入顺序）：

const data = [
  {"id": "One", "number": 100}, 
  {"id": "One", "number": 150}, 
  {"id": "One", "number": 200}, 
  {"id": "Two", "number": 50}, 
  {"id": "Two", "number": 100}, 
  {"id": "Three", "number": 10}, 
  {"id": "Three", "number": 90}
];

const sumMap = new Map();

data.forEach(item => {
  if (sumMap.has(item.id)) {
    // 已存在则累加number
    sumMap.get(item.id).number += item.number;
  } else {
    // 不存在则添加新条目（用扩展运算符避免修改原对象）
    sumMap.set(item.id, { ...item });
  }
});

// 将Map的value转换为数组
const result = Array.from(sumMap.values());

console.log(result);

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