JavaScript数组push方法详解：语法、返回值与原数组修改

图 0：Array.prototype.push() 核心架构与三大特征速览

在日常 JavaScript 开发中，向数组末尾追加数据是一项高频操作。很多初学者在调用 Array.prototype.push() 时，由于忽略了其具体的返回值类型以及原地修改特性，常常会写出导致程序静默失效或抛出类型异常的代码。本文将从官方规范出发，清晰拆解该方法的语法格式、返回值机制、对原数组的修改本质，以及在类数组对象上的通用借用原理。

一、基础语法与参数传递机制

push() 方法是挂载在 Array.prototype 上的内置实例方法，用于将一个或多个指定元素添加到数组的末尾。

1. 语法形式

该方法接受任意数量的实参。如果不传递任何参数，push() 依然能正常执行，此时数组不会发生任何改动，但方法依然会返回当前数组的现有长度。

2. 追加单个与多个元素示例

当传递单个元素时，该元素被直接放入当前数组的末尾槽位；传递多个实参时，元素将严格按照调用时的实参顺序，依次写入末尾。

3. 追加另一个数组时的常见困惑

很多开发者希望将数组 B 的所有元素合入数组 A。如果直接将整个数组 B 作为参数传入 push()，JavaScript 并不会自动打平数组，而是将整个数组作为一个单独的嵌套元素插入末尾：

若希望将元素逐个合并进去，应配合 ES6 展开语法（Spread Syntax）使用：numbers.push(...extra)。需要特别提醒的是：当被展开的数组极其庞大（例如超过 10 万项）时，扩展运算符会导致参数过长而触发调用栈溢出异常（RangeError: Maximum call stack size exceeded）。超大数组合并时，应使用常规循环追加或分块合并。

图 1：arr.push('C', 'D') 的执行流水线与底层状态变更

二、关键特性之一：返回值是“新数组的长度”

在所有与 push() 相关的 bug 中，误用其返回值所占的比例最高。push() 方法在完成元素追加后，**返回的是一个无符号 32 位整数（Number 类型），表示数组在追加元素后的最新 length**。它绝不会返回被修改后的数组对象，也不会返回刚才添加的元素。

1. 典型错误：误将返回值赋值给原变量

初学者常常习惯性地认为数组方法会返回新数组，因而写出类似 arr = arr.push(item) 的代码。这会导致原有数组变量被数字直接覆盖：

2. 链式调用断裂问题

由于返回值为数字而非数组引用，开发者无法对 push() 直接进行流式链式调用。例如试图写成 arr.push('item').filter(...) 会在运行时报错，因为数字类型不存在 filter 方法。

三、关键特性之二：就地修改原数组（In-Place Mutation）

JavaScript 的数组方法通常可以分为两大阵营：

• 原地修改方法（Mutating Methods）：直接在原有内存地址上修改数组本身，如 push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
• 非破坏性纯函数方法（Non-mutating Methods）：不改变原数组，而在堆内存中创建并返回一个全新的数组实例，如 concat()、slice()、map()、filter()。

push() 属于典型的破坏性原地修改方法。它在执行时不会在堆内存中重新申请数组容器，而是直接往原数组的物理末尾槽位写入数据，并使数组的引用地址保持绝对不变。

图 2：内存视角：原地修改 (push) 与 不可变追加 (concat / 解构) 对比

1. 引用未变带来的隐式副作用

当多个变量指向同一个数组时，其中一个变量执行 push() 会同时影响所有其他引用该数组的位置：

2. 现代前端响应式与状态管理陷阱

在 React、Redux 或 Zustand 等强调不可变数据（Immutable Data）的框架中，视图重新渲染的判断机制通常依赖于引用的浅比较（如 Object.is(prev, next)）。如果在 React 的组件内部直接对 state 数组执行 state.push(item)，由于数组在内存中的指针没有改变，React 会判定数据没有发生任何变化，从而跳过页面渲染，导致界面没有任何响应。

在不可变架构中追加元素，推荐使用解构语法创建新引用：

四、进阶底层原理：类数组对象借用 push

在 ECMAScript 规范定义中，Array.prototype.push 被明确设计为一种**通用方法（Generic Method）**。这意味着它的执行并不强制校验目标对象是否是真正的 Array 实例，任何只要具备合法 length 属性的普通对象（即类数组对象 Array-like Object），都可以通过 call() 或 apply() 借用该方法。

1. 通用借用算法核心步骤

1. 将当前的调用上下文 this 转换为对象 O。
2. 读取 O.length，并将其转换为无符号整型数值 len。若不存在 length 属性，则默认为 0。
3. 遍历传入的参数，将第 i 个参数依次赋值给 O[len]，每写入一个元素，len 累加 1。
4. 将最终计算出的 len 重新赋值给 O.length。
5. 向外部返回最终的 len。

图 3：类数组对象（Array-like）借用 push 的执行模型

2. 代码示例：在普通对象上借用 push

五、常见问题排查与工程实践指南

在了解了语法与特性之后，我们将其与其他追加方式进行系统横向对比，帮助读者在不同技术场景下做出正确的选型决策。

1. 误区复盘：大批量追加时的堆栈溢出排查

很多工程中需要合并两个庞大的数组（例如后台拉取了上万条数据）。如果写成：

由于 JavaScript 引擎对单个函数的入参数量存在调用栈上限，上述展开语法会试图在函数调用栈上推入数万个形参，从而导致崩溃。在保证高性能原地追加的同时，应采用以下循环批处理或分块追加方案：

图 4：JavaScript 数组追加方式全景矩阵与决策指南

六、总结

综上所述，掌握 Array.prototype.push() 的关键在于精准记住三条核心原则：

1. 语法上：支持同时传入任意数量的独立参数，元素按实参顺序紧跟在原数组尾部追加。
2. 返回值上：永远返回追加操作完成后数组的最新数值长度，切勿将其当作新数组进行变量重赋值或直接执行数组方法链。
3. 内存与副作用上：属于原地修改（In-Place Mutation）操作，原数组引用地址保持不变。在不可变数据流与现代 UI 框架中，应根据响应式需要审慎使用，或选用扩展运算符创建全新引用。