如何向已有的JavaScript数组添加新数据项？

问题背景 #

已有数组defaultAmountTypeData，需要添加新元素得到目标数组updatedAmountTypeData，不想通过硬编码重复创建数组，尝试了两种方法均报错，需要正确的实现方案。

原始数组与目标结果示例：

// 原数组
var defaultAmountTypeData = [
  { text: "Dollar", value: "D" },
  { text: "Percent", value: "P" },
  { text: "Sale", value: "S" },
];

// 期望得到的更新后数组
var updatedAmountTypeData = [
  { text: "Dollar", value: "D" },
  { text: "Percent", value: "P" },
  { text: "Sale", value: "S" },
  { text: "New Amount", value: "NA" },
  { text: "New Percent", value: "NP" },
];

错误方案分析 #

方案1错误原因 #

var updatedAmountTypeData = [
  defaultAmountTypeData,
  { text: "New Amount", value: "NA" },
  { text: "New Percent", value: "NP" },
];

这种写法会把原数组作为子数组嵌套进新数组，最终得到的是[数组, 对象, 对象]的结构，不是预期的扁平化数组，不符合需求。

方案2错误原因 #

var updatedAmountTypeData = getUpdatedAmountTypeData(){
  var newobj = Object.assign(defaultAmountTypeData, {
    text: "New Amount",
    value: "NA",
  });
  newobj = Object.assign(newobj, { text: "New Percent", value: "NP" });
  return newobj;
}

1. 函数定义语法错误，正确写法应为function getUpdatedAmountTypeData() {}；
2. Object.assign是用于合并对象的API，不能用来操作数组。用它处理数组时，会把数组当作普通对象，将text、value作为键值对添加到数组对象上，而非作为数组元素插入，结果完全偏离预期。

正确实现方式 #

方法1：扩展运算符（推荐） #

使用ES6扩展运算符...展开原数组元素，再追加新元素，返回全新数组，不会修改原数组：

var updatedAmountTypeData = [
  ...defaultAmountTypeData,
  { text: "New Amount", value: "NA" },
  { text: "New Percent", value: "NP" },
];

方法2：concat方法 #

数组的concat方法可合并多个数组或元素，返回新数组，同样不修改原数组：

var updatedAmountTypeData = defaultAmountTypeData.concat(
  { text: "New Amount", value: "NA" },
  { text: "New Percent", value: "NP" }
);

方法3：push方法（允许修改原数组时使用） #

如果不需要保留原数组的原始状态，可直接用push向原数组末尾添加元素：

defaultAmountTypeData.push(
  { text: "New Amount", value: "NA" },
  { text: "New Percent", value: "NP" }
);
// 此时defaultAmountTypeData即为更新后的目标数组

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