JavaScript如何遍历对象数组并按匹配的name值累加score属性

问题描述 #

我有如下对象数组：

const data = [
 {
   name: 'item1',
   score: 5,
   colour: 'red'
 },
 {
   name: 'item2',
   score: 5,
   colour: 'blue'
 },
 {
   name: 'item1',
   score: 5,
   colour: 'blue'
 },
 {
   name: 'item3',
   score: 15,
   colour: 'blue'
 },
 {
   name: 'item2',
   score: 25,
   colour: 'green'
 }
]

我需要按name字段分组，把同组的score值累加，忽略colour字段，预期输出如下：

[
 {
  name: 'item1',
  score: 10
 },
 {
  name: 'item2',
  score: 30
 },
 {
  name: 'item3',
  score: 15
 }
]

最终结果顺序不做要求。数据是访客随机生成的，没法提前知道所有可能的name值，数组长度最少2条、最多15条。我自己写的实现感觉太冗长，有没有更简洁清晰的方案？

解决方案 #

最简洁、语义也最明确的方案是用Array.prototype.reduce做聚合，再转换格式即可：

const result = Object.entries(
  // 第一步：按name累加score，生成映射对象
  data.reduce((acc, { name, score }) => {
    acc[name] = (acc[name] || 0) + score
    return acc
  }, {})
// 第二步：把映射对象转成要求的数组格式
).map(([name, score]) => ({ name, score }))

console.log(result)

如果偏好使用Map存储中间结果，可读性也很高：

const scoreMap = new Map()
data.forEach(({ name, score }) => {
  scoreMap.set(name, (scoreMap.get(name) || 0) + score)
})
const result = Array.from(scoreMap, ([name, score]) => ({ name, score }))

console.log(result)

两种方案都只有几行代码，没有额外的外部依赖和副作用，对于你最多15条数据的场景性能完全够用，逻辑也一目了然。

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