JS数组一次性添加多个元素：push多参数与展开运算符技巧

一、基础方案：向 push() 直接传递多个实参

Array.prototype.push() 在 ECMAScript 规范定义之初就支持可变参数（Variadic Arguments）。其函数签名实质为 arr.push(element1[, ...[, elementN]])。这意味着在调用时，你可以用逗号分隔传入任意多个独立的实参，引擎会按顺序把它们逐一追加到数组尾部。

代码示例：直接添加固定的一组元素

// 声明一个初始数组
const fruits = ['苹果', '香蕉'];

// 一次性传入多个独立实参，并接收返回值
const newLength = fruits.push('橙子', '西瓜', '葡萄');

// 检查执行结果
console.log(fruits);
// 输出: ['苹果', '香蕉', '橙子', '西瓜', '葡萄']

console.log(newLength);
// 输出: 5

这段代码体现了两个关键细节：

1. 原地扩展（In-place Mutation）：fruits 变量所指向的数组对象被直接修改，其内部的 length 属性自动同步更新为 5。
2. 方法返回值：push() 的返回值始终是追加完成后的数组最新长度，而不是被修改后的数组本身。

这种写法适用于在编码阶段就已经明确知道待添加的具体元素字面量，无需借助任何辅助遍历。

二、进阶技巧：配合展开运算符（...）追加动态数组

更常见的一种业务场景是：待添加的多个元素本身已经保存在另一个数组中（例如从后端接口分页获取的新一页数据列表）。如果不了解展开语法，很多开发者可能会尝试直接把新数组作为参数传给 push()，从而掉入嵌套数组的陷阱。

常见误区：直接将数组变量作为参数

在 JavaScript 中，数组是一等公民的对象类型。当你执行 arr.push(otherArr) 时，引擎并不会替你“自动拆包”，而是把 otherArr 本身作为一个独立的数组元素放进原数组的末尾，最终形成二维嵌套数组。

如图 1 所示，执行 arr.push([3, 4]) 后，数组长度仅从 2 变为 3，索引 [2] 对应的不是数字 3，而是整个数组引用 [3, 4]。这往往会导致后续使用 forEach 遍历、数据累加或排序时引发运行时异常。

正确做法：使用 ES6 展开运算符打散传参

通过在数组变量前加上展开运算符（...），JavaScript 引擎会在执行函数调用前，遍历该数组并将其中包含的每一个项解构成由逗号隔开的独立实参序列，无缝对接到 push() 的多参数能力上：

const existingTasks = ['需求评审', '架构设计'];
const incomingTasks = ['编码实现', '单元测试', '上线部署'];

// 使用展开运算符 ... 将 incomingTasks 的内容解包传入 push
existingTasks.push(...incomingTasks);

console.log(existingTasks);
// 输出: ['需求评审', '架构设计', '编码实现', '单元测试', '上线部署']
console.log(existingTasks.length);
// 输出: 5

你甚至可以在同一次 push() 调用中将独立实参与展开运算符混合书写，例如： arr.push('头项', ...middleList, '尾项')，所有元素都会按照书写顺序依次平整地追加至原数组尾部。

三、深度剖析：展开运算符与 push() 的执行全流程

为了彻底掌握这种写法，我们需要了解其在 JavaScript 引擎内部的实际运转阶段。从语法解析到堆内存写入，整个过程可以清晰划分为四个步骤：

1. 步骤 1 · 输入与环境准备：确定目标数组 target 和待解构的数据源。数据源只需是具备 Symbol.iterator 接口的可迭代对象（如 Array、Set 或 Map 的键值集合）。
2. 步骤 2 · 展开解包（Spread Evaluation）：在调用 push 函数前，解释器遍历数据源，将每个元素依次放置到当前函数调用的入参调用栈（Call Stack / Arguments List）中。此时 [3, 4, 5] 被解包为 3, 4, 5。
3. 步骤 3 · 连续原地追加（In-Place Expansion）：push 方法在执行内部的 [[Set]] 操作时，获取原数组当前的 length（假设为 2），然后依次对 target[2] = 3、target[3] = 4、target[4] = 5 进行内存连续赋值。
4. 步骤 4 · 属性更新与返回：写入完成后，原数组的内部 length 属性被更新为 5，函数最终返回新的长度数值 5。在此期间，目标数组的内存指针未发生任何转移。

四、关键差异：原地修改（In-Place） vs 不可变更新（Immutable）

在现代前端工程中，并不是所有场景都适合使用 push()。这里存在一种核心的技术范式选择：是否允许修改原数组对象。

1. 原地修改：arr.push(...items)

该方式的本质是可变操作（Mutable）。原数组的内存地址（例如 0x00A1）保持恒定，直接在原有堆内存块中追加内容。

• 核心优势：性能极高，几乎没有多余的对象分配与垃圾回收（GC）开销，尤其适合循环体内部的数据拼接、算法题解、大批量中间数据收集。
• 潜在风险：如果原数组被其他模块或组件作为引用共享，就地修改会产生“远距离副作用”，导致其它依赖该数组的代码在毫无预警的情况下感知到数据突变。

2. 不可变更新：const next = [...arr, ...items]

该方式的本质是函数式不可变操作（Immutable）。原数组完全保持只读，JavaScript 引擎会开辟一块崭新的堆内存空间（例如 0x00B2），先将 arr 的元素浅拷贝进去，再将 items 的元素拷贝进去。

• 核心优势：纯函数无副作用。这是 React 的 useState、Redux、Vue 3 浅响应式 等状态管理机制的核心基石。因为 React 依赖引用全等比较（prev !== next）来判定状态是否变更并触发重渲染。如果你在 React 组件中写 items.push(...newItems); setItems(items);，组件将因为内存引用相同而无法触发页面重新渲染。
• 性能成本：由于每次都会新建数组并复制全部已有元素，在超高频或千万级循环中会带来额外的内存消耗与 GC 开销。

五、边界条件与避坑指南：超大数据量下的调用栈溢出

虽然 arr.push(...otherArr) 写法优雅实用，但它存在一个鲜为人知却十分危险的物理边界：JavaScript 引擎的函数调用参数上限。

如果待追加的数组包含了 150,000 条甚至更多元素，执行 arr.push(...hugeArray) 会直接导致浏览器崩溃或抛出调用栈溢出错误：

// 构造包含 150,000 个元素的大数组
const hugeArray = new Array(150000).fill(1);
const target = [];

// 错误做法：直接使用展开运算符
// 运行时极大概率报错: Uncaught RangeError: Maximum call stack size exceeded
target.push(...hugeArray);

超大规模数据的安全处理方案

当面对数万至数十万级别的大数据量原地合并时，最稳健高效的做法是回归经典的 for...of 循环，或者使用分批（Chunking）机制依次追加：

// 方案 A：原生 for...of 循环（简单、稳健且执行速度极快）
for (const item of hugeArray) {
  target.push(item);
}

// 方案 B：分块批量追加（在兼顾安全的同时减少循环次数）
function safeBatchPush(target, source, chunkSize = 10000) {
  for (let i = 0; i < source.length; i += chunkSize) {
    target.push(...source.slice(i, i + chunkSize));
  }
}

六、总结与综合对比速查表

在 JavaScript 中为数组批量增添元素，关键在于根据数据来源形式、是否允许修改原数组以及数据规模三个维度选择最恰当的手段：

掌握 push() 的多参数能力与展开运算符的配合使用，不仅能让你的 JavaScript 代码更加精炼利落，更能帮助你在面对状态不可变性与超大数据吞吐等复杂工程场景时游刃有余。