javascript - 按公共属性（日期）汇总对象数组

Question

嗨，我有一个角度项目。

目前我有一个名为 historyArr 的数组。它有2天的一些统计数据如下。

 [
  {
    "dateRange": "2020-07-01T16:00:00.000+0000",
    "total": 20,
    "delivered": 5,
    "undeliverable": 5,
    "expired": 5,
    "enroute": 5
  },
  {
    "dateRange": "2020-07-01T17:00:00.000+0000",
    "total": 50,
    "delivered": 10,
    "undeliverable": 15,
    "expired": 10,
    "enroute": 15
  },
  {
    "dateRange": "2020-07-01T18:00:00.000+0000",
    "total": 8,
    "delivered": 2,
    "undeliverable": 2,
    "expired": 2,
    "enroute": 2
  },
  {
    "dateRange": "2020-07-02T00:00:00.000+0000",
    "total": 160,
    "delivered": 40,
    "undeliverable": 40,
    "expired": 40,
    "enroute": 40
  },
  {
    "dateRange": "2020-07-02T01:00:00.000+0000",
    "total": 200,
    "delivered": 50,
    "undeliverable": 50,
    "expired": 50,
    "enroute": 50
  }
]

我想减少上面的数组，这样我就想每天对统计数据进行求和。所以我想将上面的数组转换为下面的数组。我可以免费使用 moment.js 库来解析日期。

[
  {
    "dateRange": "2020-07-01",
    "total": 78,
    "delivered": 17,
    "undeliverable": 22,
    "expired": 17,
    "enroute": 22
  },
  {
    "dateRange": "2020-07-02",
    "total": 360,
    "delivered": 90,
    "undeliverable": 90,
    "expired": 90,
    "enroute": 900
  }
] 

我知道这是一个难题。该项目已上传到 stackblitz

https://stackblitz.com/edit/angular-zqmdpy

https://angular-zqmdpy.stackblitz.io

https://stackblitz.com/edit/angular-zqmdpy?embed=1&file=src/app/app.component.html

非常感谢任何帮助谢谢

标签： javascriptangulartypescript

Answer 1

您可以

• 做String.prototype.slice()以获得有意义的部分dateRange并将其用作关键
• 遍历您的源数组（例如使用Array.prototype.reduce()）
• 并建立Map具有分组/汇总的对象作为各自的值，
• 然后将这些值提取到数组中Map.prototype.values()
• 假设所有属性，除了dateRange应该总结之外，您可以使用轻微的快捷方式而不是明确地对所有属性进行硬编码：

const src = [{"dateRange":"2020-07-01T16:00:00.000+0000","total":20,"delivered":5,"undeliverable":5,"expired":5,"enroute":5},{"dateRange":"2020-07-01T17:00:00.000+0000","total":50,"delivered":10,"undeliverable":15,"expired":10,"enroute":15},{"dateRange":"2020-07-01T18:00:00.000+0000","total":8,"delivered":2,"undeliverable":2,"expired":2,"enroute":2},{"dateRange":"2020-07-02T00:00:00.000+0000","total":160,"delivered":40,"undeliverable":40,"expired":40,"enroute":40},{"dateRange":"2020-07-02T01:00:00.000+0000","total":200,"delivered":50,"undeliverable":50,"expired":50,"enroute":50}],

      result = [...src
        .reduce((acc, o) => {
          const key = o.dateRange.slice(0,10),
                group = acc.get(key)
          if(group){
            const { dateRange, ...rest } = o
            Object
              .keys(rest)
              .forEach(key => 
                group[key] = (group[key] || 0) + (o[key] || 0))
          } else {
            acc.set(key, {...o, dateRange: key})
          }          
          return acc
        }, new Map)
        .values()
     ]
     
console.log(result)

.as-console-wrapper{min-height:100%;}