JavaScript 中对象数组每月的总和值

Question

我有一个像这样的对象数组：

var json = [ { day: '01-01-2018', hour: '00:00', value: '121' }, { day: '01-02-2018', hour: '05:24', value: '131' }, { day: '26-01-2018', hour: '00:07', value: '101' }, { day: '16-02-2018', hour: '08:02', value: '56' }, { day: '20-02-2018', hour: '12:02', value: '123' }, { day: '24-03-2018', hour: '10:11', value: '45' }];

我想将日期格式从 DD-MM-YYYY 更改为 YYYY-MM-DD，然后对每月的值进行求和以创建图表。

我的尝试：

var mapDateVolume = [];

 for (var i = 0; i < json.length; i++)
        {
            var allDate = json[i].day;
            var oneVolume = json[i].value;
            var splitedDate = allDate.split("-");
            var newOrderY = splitedDate[2] + "-" 
            var newOrderM = splitedDate[1] + "-";
            var newOrderD = splitedDate[0];
            var newOrderAllDate = newOrderY + newOrderM + newOrderD;  

            var newOrder = {};
            newOrder[newOrderAllDate] = oneVolume;
            mapDateVolume.push(newOrder);

        }

var result = [];

        for (var i = 0; i < mapDateVolume.length; i++){

            var key = Object.keys(mapDateVolume)[i].split("-")[0] + "/";
            key += Object.keys(mapDateVolume)[i].split("-")[1];
            var value = Object.values(mapDateVolume)[i];
            var oldValue = Object.keys(result)[i] != null ? Object.keys(result)[i] : 0;

            var newResult = {};
            newResult[key] = value;
            result.push(newResult);
        }

        for (var i = 0; i < result.length; i++) {

            xAxis.push(Object.keys(result)[i]);
            yAxis.push(Object.values(result)[i]);

        }

我使用 Chart.js，它在几天内工作正常：

 for ( var i = 0; i < jsonAll.length; i++ )
 {

   xAxis.push(json[i].day+'-'+json[i].hour);
   yAxis.push(json[i].value);

 }

我知道这个总和有问题，因为我只看到一张空图表。不幸的是，我对 JavaScript 的经验很少。

Answer 1

首先让我们格式化整个集合（数据数组）。

我们需要：

1. 日期格式：DD-MM-YYYY到YYYY-MM-DD。
2. Value 属性是一个字符串类型，我们需要它作为number。

简单Array#Map：

const collection = data.map(x => ({ ...x, day: x.day.split("-").reverse().join("-"), value: Number(x.value)}));

接下来的事情是再次使用将day 属性Array#Map替换为Month。

const mapDayToMonth = collection.map(x => ({...x, day: new Date(x.day).getMonth()}));

该getMonth()方法根据当地时间返回指定日期的月份（从 0 到 11）。所以，0 是一月，1 是二月......等等

最后一步Array#Reduce计算每月的价值：

const sumPerMonth = mapDayToMonth.reduce((acc, cur) => {
  acc[cur.day] = acc[cur.day] + cur.value || cur.value;
  return acc;
}, {})

完整示例JSFiddle：

const collection = data.map(x => ({ ...x, day: x.day.split("-").reverse().join("-"), value: Number(x.value)}));

有用的链接：

数组映射

数组缩减

数字对象

传播语法