javascript - 如何用空值预填充数组？

Question

我正在尝试填充从 API 接收到的一些数据到图表中，为了让它“正常工作”，我需要确保数组中的每个对象都有 12 sum 下的值属性(一年中的每个月都有一个值)。

我从 API 接收到的数据看起来像这样:

[
  {
    "sum": {
      "201901": 8,
      "201902": 16,
      "201903": 8,
      "201904": 8,
      /* This project is missing data for month 5 and 6 */
      "201907": 5,
      "201908": 2,
      "201909": 0,
      "201910": 2,
      "201911": 5,
      "201912": 8
    },
    "project": "Project Name 1"
  },
  {
    "sum": {
      "201901": 9,
      "201902": 18,
      "201903": 9,
      "201904": 9,
      "201905": 17,
      "201906": 5,
      "201907": 2,
      "201908": 4,
      /* This project is missing data for month 9, 10, 11, 12 */
    },
    "project": "Project Name 2"
  },
  {
    "sum": {
      "201901": 2,
      "201902": 2,
      "201903": 5,
      "201904": 2,
      "201905": 0,
      "201906": 10,
      "201907": 45,
      "201908": 21,
      "201909": 3,
      "201910": 2,
      "201911": 17,
      "201912": 16
    },
    "project": "Project Name 3"
  }
]

因此，如您所见，project 1和 project 2几个月来缺少积分，但我仍然需要用空值填充它们(例如: "201905": 0 、 "201906": 0 等)，因为 X-axis在我的图表中永远是12如果 Y-axis 值，它会把事情搞砸没有12给出的值。所以我的问题是:我将如何填充每个对象以始终为一年中的每个月提供一个值？

到目前为止，我正在循环访问数据:

for (let key in this.chartData) {
    emptyArr.push({
        name: this.chartData[key].project,
        data: Object.values(this.chartData[key].sum),
    });
}

这有效地为我提供了一些可以使用的东西:

[
  {
    "name": "Project 1",
    "data": [8, 16, 8, 8, 21, 4, 5, 2, 0, 2, 5, /*Need a "0" here*/]
  },
  {
    "name": "Project 2",
    "data": [9, 18, 9, 9, 17, 5, 2, 4, /*Need 4 more 0's here*/]
  },
  {
    "name": "Project 3",
    "data": [2, 2, 5, 2, 0, 10, 45, 21, 3, 2, 17, 16]
  }
]

Answer 1

如果你定义一个包含所有12个键的对象，比如:

const normalizedSum = {
  "201901": 0,
  "201902": 0,
  "201903": 0,
  "201904": 0,
  "201905": 0,
  "201906": 0,
  "201907": 0,
  "201908": 0,
  "201909": 0,
  "201910": 0,
  "201911": 0,
  "201912": 0
};

然后，您可以使用 Array.map()在你的 input 数组上像这样:

input.map(({sum, project}) => ({sum: {...normalizedSum, ...sum}, project}));

完整示例:

const input = [{"sum":{"201901":8,"201902":16,"201903":8,"201904":8,"201907":5,"201908":2,"201909":0,"201910":2,"201911":5,"201912":8},"project":"Project Name 1"},{"sum":{"201901":9,"201902":18,"201903":9,"201904":9,"201905":17,"201906":5,"201907":2,"201908":4,},"project":"Project Name 2"},{"sum":{"201901":2,"201902":2,"201903":5,"201904":2,"201905":0,"201906":10,"201907":45,"201908":21,"201909":3,"201910":2,"201911":17,"201912":16},"project":"Project Name 3"}];

const normalizedSum = {
  "201901": 0,
  "201902": 0,
  "201903": 0,
  "201904": 0,
  "201905": 0,
  "201906": 0,
  "201907": 0,
  "201908": 0,
  "201909": 0,
  "201910": 0,
  "201911": 0,
  "201912": 0
};

let res = input.map(
  ({sum, project}) => ({sum: {...normalizedSum, ...sum}, project})
);

console.log(res);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}