JS数组末尾追加元素：push方法与展开运算符用法

在 JavaScript 中向数组末尾追加元素，最常用且最核心的两种手段是原生的 Array.prototype.push() 方法与 ES6 引入的展开运算符（Spread Operator，[...arr, item]）。push() 会对原数组进行原地修改（In-Place Mutation）并返回数组最新长度，拥有极致的执行速度；展开运算符则通过浅拷贝构造一个全新的数组实例（Immutability），原数组始终保持不可变。选择哪种方案，取决于当前代码是需要追求单机高频吞吐，还是处于现代响应式框架（如 React、Vue 3 或 Redux）的状态流转规范之中。

一、使用 push() 方法原地追加元素

Array.prototype.push() 是 JavaScript 从 ECMAScript 初代起就内置在数组原型链上的标准方法。它的核心特征是直接在原数组所占用的内存空间末尾扩展连续槽位，因此原数组的引用地址和内部结构直接发生变异。

1. 基础语法与返回值规则

push() 可以接收一个或多个任意类型的参数，并将它们按照参数顺序依次插入到数组尾部。该方法最容易被初学者忽略的关键细节是它的返回值是数值（增加元素后的新数组长度），而不是被修改后的数组本身。

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

// 追加单个元素，注意接收返回值
const newLength = fruits.push('橙子');

console.log('fruits 实际内容:', fruits);
console.log('push 返回值:', newLength);

2. 追加多个元素与数组展平追加

push() 原生支持同时传入多个参数，它们会一次性按序追加至末尾。如果手头已有另一个数组想要并入当前数组末尾，必须借助展开运算符进行解包，否则会错误地插入一个嵌套的子数组。

const numbers = [1, 2];

// 正确做法 1：一次追加多个离散元素
numbers.push(3, 4);
console.log('追加多项后:', numbers);

// 正确做法 2：利用展开运算符将已有数组元素合并至末尾
const extra = [5, 6];
numbers.push(...extra);
console.log('解包合并后:', numbers);

// 常见错误示范：直接传入整个数组
const badList = [1, 2];
badList.push([3, 4]);
console.log('错误嵌套示范:', badList);

二、使用展开运算符 [...] 实现不可变追加

ES6（ECMAScript 2015）引入的展开语法（...）为数组操作带来了声明式、函数式的全新体验。用 [...sourceArray, newItem] 向末尾追加元素不会碰触原数组分毫，而是开辟一块全新的独立内存空间，将旧有元素与新元素组装成新数组。

1. 语法形态与不可变数据流

展开运算符的工作过程是：先在内存中分配一个空的新数组，随后依次读取原数组的各项元素并复制过去，最后把追加的项放在最末尾。原数组与新数组在内存中的物理地址完全不同。

const baseColors = ['red', 'green'];

// 通过展开运算符生成新数组并追加新项
const updatedColors = [...baseColors, 'blue'];

console.log('原数组 baseColors:', baseColors);
console.log('新数组 updatedColors:', updatedColors);
console.log('是否为同一个引用:', baseColors === updatedColors);

2. 为什么现代前端框架偏爱展开运算符？

在 React、Preact 或 Zustand 等状态驱动视图的体系中，组件的渲染触发高度依赖于浅层引用对比（Shallow Comparison，即 prev !== next）。如果直接对 state 调用 push()，虽然数组内部数据变了，但数组对象的内存引用地址没有变，React 就会判定“状态未变更”，从而跳过渲染。

// 在 React 组件中的典型应用场景示例
function TodoList() {
  const [todos, setTodos] = useState(['学习 JS', '编写代码']);

  const handleAdd = (newTodoText) => {
    // 错误做法：todos.push(newTodoText); setTodos(todos); // 引用相同，页面不会更新

    // 正确做法：生成新引用触发 UI 重新渲染
    setTodos([...todos, newTodoText]);
  };
}

三、push() 与展开运算符的核心维度对比

为了在实际开发中做出清晰且合理的架构选择，我们需要从变量修饰符、变异性、内存分配、计算复杂度与工程落地场景进行全方位对照：

四、工程实战避坑与极端场景边界

1. 警惕 push(...largeArray) 导致的调用栈溢出

许多开发者习惯使用 arr.push(...otherArray) 一口气把另一个大数组合并进来。但是，JavaScript 引擎对函数传参数量（调用栈）是有硬性上限的（在 V8 等多数引擎中约为 65,536 个参数）。

当 otherArray 的长度超过数万条时，展开运算符会把数组元素解包成数万个独立实参，直接导致抛出 RangeError: Maximum call stack size exceeded 异常崩溃。

const mainList = [1, 2, 3];
const hugeList = new Array(100000).fill(9);

// 危险！超出 V8 函数调用实参上限将直接抛出 RangeError 异常
// mainList.push(...hugeList); // 崩溃！

// 安全方案 1：针对就地合并需求，使用传统 for 循环逐个 push
for (let i = 0; i < hugeList.length; i++) {
  mainList.push(hugeList[i]);
}

// 安全方案 2：生成新数组，使用 Array.prototype.concat
const mergedList = mainList.concat(hugeList);

2. 循环内部滥用展开运算符导致的性能雪崩

在需要循环追加生成数组的场景下，切忌在每次循环中都使用展开运算符。展开运算的时间复杂度为 O(N)，放在一个迭代 N 次的循环中，整体时间复杂度会直接恶化为二次方 O(N²)，还会生成大量瞬时垃圾对象触发频繁 GC 导致界面卡死。

// 反模式：在循环中不断创建新数组
let slowResult = [];
for (let i = 0; i < 50000; i++) {
  slowResult = [...slowResult, i]; // 性能极差！每次都要拷贝之前的所有元素
}

// 正确做法：循环内部使用 push 维持 O(N) 线性总复杂度
const fastResult = [];
for (let i = 0; i < 50000; i++) {
  fastResult.push(i); // 均摊 O(1)，总耗时仅需数毫秒
}

五、总结与速查建议

要判断在项目中使用 push() 还是展开运算符，可以依据以下两条核心准则：

• 需要保护历史数据或通知响应式系统时：选用展开运算符 [...arr, item]。尤其在 React 的 useState、Vue 状态更新以及所有需要避免副作用的纯函数设计中，生成新引用是保障数据流单向与状态可预测的基石。
• 在局部作用域进行高性能计算、大数据量收集时：毫不犹豫地选用原生 push()。原地写入能规避庞大的内存重复分配与垃圾回收损耗，提供引擎级别的均摊 O(1) 极致性能。