JavaScript中向timeSeries的values数组追加plotArray的多种方法

先明确你给出的现有变量和结构：

// 目标数组结构
const timeSeries = [{ key: 'Time Series Data', values: [ { 'label': '01/01', 'value': 20 } ] }];

// TypeScript接口（仅作类型参考，JavaScript中无需直接使用）
export interface Plot { dateLabel: string; x: number; }

// 需要追加的数据源
const plotArray = [ { 'label': '01/03', 'value': 30 }, { 'label': '01/04', 'value': 40 }];

下面是几种不同的实现方法，你可以根据自己的需求选择：

方法1：push() + 扩展运算符（最常用，直接修改原数组） #

push()方法可以直接往数组末尾添加元素，配合扩展运算符...可以把plotArray的每个元素展开，一次性追加到目标数组里，不会把整个plotArray作为单个元素插入：

// 先拿到timeSeries里的values数组
const targetValues = timeSeries[0].values;
// 展开plotArray的元素并追加
targetValues.push(...plotArray);

// 执行后，timeSeries[0].values会变成：
// [{label: '01/01', value: 20}, {label: '01/03', value: 30}, {label: '01/04', value: 40}]

方法2：concat()方法（返回新数组，不修改原数组） #

concat()会合并两个数组并返回一个全新的数组，适合不想改动原数组的场景，如果需要更新原数组，直接重新赋值即可：

// 生成新的values数组并覆盖原数组
timeSeries[0].values = timeSeries[0].values.concat(plotArray);

// 或者保留原数组，创建新变量
const updatedValues = timeSeries[0].values.concat(plotArray);

方法3：forEach()循环逐个添加（适合需要额外处理元素的场景） #

如果需要在追加前对plotArray的元素做格式转换（比如匹配你给出的Plot接口，把label改成dateLabel、value改成x），用forEach()遍历逐个处理并添加会更灵活：

plotArray.forEach(item => {
  // 转换为Plot接口要求的格式
  const formattedItem = {
    dateLabel: item.label,
    x: item.value
  };
  timeSeries[0].values.push(formattedItem);
});

// 如果不需要格式转换，直接push(item)即可
// plotArray.forEach(item => timeSeries[0].values.push(item));

方法4：splice()方法（灵活控制插入位置） #

splice()可以在数组的任意位置添加/删除元素，这里我们选择在数组末尾插入，所以起始索引设为数组的长度，删除0个元素，再插入plotArray的元素：

const targetValues = timeSeries[0].values;
// splice(起始索引, 删除元素数量, 要插入的元素...)
targetValues.splice(targetValues.length, 0, ...plotArray);

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