为什么JS数组push后得到的是数字而不是数组？

很多 JavaScript 初学者在向数组追加元素时，常会写出类似 const updatedList = list.push(newItem) 的代码，随后打印 updatedList 却发现它不是预想中的新数组，而是一个整数。不仅如此，如果紧接着尝试调用 updatedList.map(...)，程序还会直接抛出 TypeError: updatedList.map is not a function 错误。

这个现象的根本原因非常明确：在 JavaScript 标准规范中，Array.prototype.push() 被设计为一个“就地修改（In-place Mutation）”的方法。它的主要作用是直接修改调用它的原数组，而该方法的执行返回值被规范定义为“追加元素后数组的新长度（length）”，并不是数组本身。

一、直观呈现：赋值陷阱与典型错误表现

在日常开发中，这种误解通常发生在以下三个高频场景中：

1. 误将返回值当作更新后的数组接收

最经典的错误写法是将 push 调用的结果直接赋值给一个变量：

const fruits = ['苹果', '香蕉'];
const result = fruits.push('橙子');

console.log(result); // 输出: 3 (类型为 number)
console.log(fruits); // 输出: ['苹果', '香蕉', '橙子'] (原数组已经被修改)

这里 result 接收到的数值 3，代表 fruits 追加元素后的最新长度，而真正包含三个水果项的数组依旧是原本的 fruits 变量。

2. 链式调用时触发 TypeError 异常

部分开发者习惯了函数式编程或类似 filter().map() 的链式调用，误以为 push() 也会返回数组，从而连续调用数组方法：

const numbers = [10, 20];
// 报错：TypeError: numbers.push(...).push is not a function
numbers.push(30).push(40);

当执行到 numbers.push(30) 时，该表达式返回了数字 3。紧接着试图在数字 3 上执行 .push(40)，由于 Number.prototype 上并不存在 push 方法，引擎随即抛出类型错误。

3. 在现代框架（如 React / Vue）中引发状态异常

在 React 中更新状态数组时，如果误用了 push 的返回值，会导致整个组件状态变成一个数字，并直接破坏 React 的不可变状态原则：

// 严重错误写法：
// 1. 直接突变了 items 原始状态
// 2. setItems 接收到的参数是新长度数字，导致 items 状态变成 4
setItems(items.push(newItem));

图 1：push 方法执行时的数据流向与双重结果分布

二、底层机制：ECMAScript 规范是如何定义 push 的？

为了从根本上明白为什么会返回数字，我们需要回顾 ECMAScript 官方规范中对 Array.prototype.push 的执行算法定义。在规范（ECMA-262）中，push(...items) 的核心流程可以抽象为以下几个连续步骤：

1. 获取目标对象： 将调用此方法的对象转换为对象类型 O = ToObject(this)。
2. 读取当前长度： 读取对象上的 length 属性，转化为非负整数并记为 len = LengthOfArrayLike(O)。
3. 按序写入元素： 遍历传入的参数列表，将每一个参数依次写入到索引 len、len + 1、len + 2……的位置上（即 Set(O, ToString(len), item, true)）。
4. 更新数组长度： 将对象的 length 属性重设为最终写入后的最新索引数值。
5. 返回最终长度： 将更新后的最新 length 作为整个方法的返回值返回（Return len）。

图 2：Array.prototype.push 内部执行流程与内存属性更新机制

三、不同业务场景下的正确写法

明确了 push 的工作原理后，我们应该根据实际编码目标采用对应的规范写法：

场景 1：确实需要修改原数组（命令式、性能敏感场景）

如果业务本身就需要直接修改现有数组（例如在大数据处理循环中避免创建新数组带来的垃圾回收开销），请务必分步执行，不要将 push 调用的表达式赋值给新变量：

const list = ['任务一', '任务二'];

// 正确：独立调用，不接收返回值
list.push('任务三');

// 后续直接使用原变量 list
console.log(list); // ['任务一', '任务二', '任务三']

场景 2：需要保留原数组并获得包含新项的新数组（不可变操作）

在 React、Redux、Vue 3 或者强调纯函数的业务逻辑中，不应当修改原数组。此时推荐使用以下两种替代方案：

方案 A：使用 ES6 扩展运算符（Spread Operator，最推荐）

const original = [1, 2];

// 创建新数组，原数组保持不变
const updated = [...original, 3];

console.log(updated);  // [1, 2, 3]
console.log(original); // [1, 2] (未被污染)

方案 B：使用 Array.prototype.concat()

concat 方法的设计初衷与 push 完全不同：它不会修改原数组，其返回值本身就是合并后的全新数组，天然支持链式调用：

const original = [1, 2];

// concat 返回新数组
const updated = original.concat(3);

console.log(updated); // [1, 2, 3]
// 支持链式调用：
const multiple = original.concat(3).concat(4); // [1, 2, 3, 4]

四、横向对比：变异方法与非变异方法速查

JavaScript 数组原型上的方法可以划分为两大家族：“变异方法（Mutator Methods）”与“纯函数/非变异方法（Accessor / Iteration Methods）”。混淆这两者的返回值是前端开发中最常见的 Bug 来源之一：

图 3：变异追加与不可变复制两种开发范式属性对照

五、工程决策：遇到数组追加需求时如何选型？

当你在编写代码需要往数组里加东西时，可以依据下述决策路径来选择最合适的写法：

图 4：数组追加操作的场景决策流向图

六、排查与自检清单

为了在今后的编码中彻底避免此类问题，可以对照以下三个原则进行自检：

• 看等号左边： 代码中是否出现了 const x = arr.push(...) 或 return arr.push(...)？如果有，请立刻意识到此时拿到的不是数组，而是数字。需要将修改与取值拆分成两行。
• 看调用链： 是否在 push(...) 后面直接加了点号（如 .push().map()）？如果有，需改用 concat 或解构展开语法。
• 看框架规范： 在 React / Vue 等框架中管理组件 State 时，始终优先使用 [...prevList, newItem] 来产生新引用，触发视图更新，避免突变原有状态。