Angular中TypeScript将JSON多值推入数组的问题求助

我尝试用TypeScript把JSON对象中的多个值推入数组，单个值推入正常，但用+=合并两个数组时无法正常工作。

JSON数据结构 #

const data = [
    {
      "value1": 8,
      "value2": 9,
      "weekday": "2023-02-27"
    },
    {
      "value1": 8,
      "value2": 9,
      "weekday": "2023-02-28"
    },
    {
      "value1": 8,
      "value2": 9,
      "weekday": "2023-03-01"
    },
    {
      "value1": 8,
      "value2": 5,
      "weekday": "2023-03-02"
    },
    {
      "value1": 8,
      "value2": 9,
      "weekday": "2023-03-03"
    }
  ];

我的代码 #

setData() {
    let data_value1: any[] = [];
    let data_value2: any[] = [];
    let labels: any[] = [];
    this.data.forEach((entry) => {
      data_value1.push(entry['value1']);
      data_value2.push(entry['value2']);
      labels.push(getDayofWeek(entry['weekday']));
    });

    this.barChartData.labels = labels;
    
    let dataSet: any = {};
    dataSet['data'] += data_value1;
    dataSet['data'] += data_value2;
    dataSet['label'] = 'Test';
    this.barChartData.datasets.push(dataSet);

    function getDayofWeek(date: any) {
      const dayOfWeek = new Date(date).getDay();
      return isNaN(dayOfWeek) ? null : 
      ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][dayOfWeek];
    }
  }

问题原因 #

你用+=操作数组是错误的——+=会把数组自动转换为字符串进行拼接，最终dataSet['data']会变成类似"8,8,8,8,89,9,9,5,9"的字符串，而非合并后的数组，这和图表所需的数组格式不匹配，导致失效。

修正方案 #

以下三种常用方式都能正确合并数组，任选一种替换原代码中dataSet['data'] += ...的两行即可：

1. 使用数组concat方法

dataSet['data'] = data_value1.concat(data_value2);

2. 使用扩展运算符...

dataSet['data'] = [...data_value1, ...data_value2];

3. 初始化数组后批量push

dataSet['data'] = [];
dataSet['data'].push(...data_value1);
dataSet['data'].push(...data_value2);

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