JS push返回的是新数组吗？澄清返回值误区与正确用法

一、深入规范：push() 的返回值与底层副作用

很多刚接触 JavaScript 或从其他函数式编程语言转向前端的开发者，容易形成一种思维定势：既然对数组执行了添加操作，返回值自然应当是“包含了新元素的结果数组”。然而在 ECMAScript 规范定义中，push() 扮演的角色是一个变异方法（Mutator Method）。

当调用 arr.push(element1, ..., elementN) 时，JavaScript 引擎会在内部完成两件事：

1. 原址修改原数组：在原数组当前 length 位置开始依次写入传入的参数，原数组在内存中的首地址不发生任何变化，原数组长度随之递增。
2. 返回递增后的 length：方法执行完成后，将原数组更新后的最新 length 属性作为数值（Number）返回。

我们可以通过一段简单的控制台示例直观验证这一行为：

const fruits = ['苹果', '香蕉'];

// 故意用一个新变量接收 push 的返回值
const pushResult = fruits.push('橙子');

console.log(pushResult); 
// 示例输出：3 （注意：这是数字，代表最新长度，绝对不是数组！）

console.log(fruits); 
// 示例输出：['苹果', '香蕉', '橙子'] （原数组已被就地扩充）

console.log(typeof pushResult); 
// 示例输出：'number'

从输出中可以清晰看到，pushResult 是数字 3，原有的 fruits 数组则变成了包含 3 个元素的数组。如果不理解这个区别，就会在内存引用和类型传递上埋下隐患。

二、典型踩坑场景：误用返回值导致的运行时灾难

把 push() 的返回值当成数组处理，是前端日常业务中极易发生、排查时又容易被忽略的典型 Bug 来源。以下三个场景尤为高发：

1. 误将返回值赋给变量并调用数组方法

开发者希望快速在已有数据上追加项并继续渲染或遍历，写出了如下代码：

const userIds = [101, 102];
const updatedList = userIds.push(103); // 误区：以为 updatedList 是 [101, 102, 103]

// 随后尝试使用 map 遍历渲染
updatedList.map(id => `用户ID: ${id}`);
// 控制台直接崩溃抛出报错：
// Uncaught TypeError: updatedList.map is not a function

报错的原因在于 updatedList 的实际值是数字 3，而数字的原型链（Number.prototype）上根本没有 map、forEach 或 filter 等数组方法。

2. 链式调用断裂

在数组处理中，我们常常喜欢链式调用：list.filter(...).map(...)。但若在链条中插入 push()，链式调用会立即断裂：

// 错误示范：
const processed = [1, 2, 3].filter(x => x > 1).push(4).slice(0, 2);
// 执行到 .push(4) 时返回了数字 3，接着执行 (3).slice(...) 立即报 TypeError

3. React 状态更新中的“页面不刷新”或“状态变数字”

在 React 函数式组件中，状态更新依赖引用的改变（Object.is 浅对比）。若误用 push，通常会引发两类严重问题：

// 错误写法 1：直接把 push 的返回值传给 setState
const [tags, setTags] = useState(['JS', 'CSS']);
setTags(tags.push('HTML')); 
// 灾难：tags 状态直接变成了数字 3！下一次渲染读取 tags.map() 导致整页白屏报错

// 错误写法 2：原地 push 后直接 setState 原变量
tags.push('HTML');
setTags(tags); 
// 隐蔽问题：虽然 tags 确实添加了元素，但引用地址没变，React 判定前后状态一致，页面不会触发重新渲染！

三、需要“新数组”时的正确做法

如果你需要在保留原数组不变的前提下，得到一个添加了新元素的新数组，切忌使用 push()，而应采用以下符合不可变数据（Immutable）特性的方式：

方案一：ES6 展开运算符（Spread Operator）—— 现代前端首选

使用 [...原数组, 新元素] 是当前 JavaScript 开发中最简洁、语义最清晰的方式。它会先浅拷贝原数组中的所有项，再在末尾追加新元素，并返回一个全新的数组实例：

const original = ['A', 'B'];

// 声明全新数组，原数组毫发无损
const nextList = [...original, 'C'];

console.log(nextList); // 示例输出：['A', 'B', 'C']
console.log(original); // 示例输出：['A', 'B'] (保持纯净不变)
console.log(nextList === original); // 示例输出：false (不同的内存引用)

在 React 中更新状态时，这正是标准规范推荐的写法：

// React 状态更新推荐标准
setTags(prevTags => [...prevTags, 'HTML']);

方案二：Array.prototype.concat() —— 经典无副作用方案

concat() 方法不会修改调用它的原数组，而是返回一个包含了原数组元素与新增元素的浅拷贝新数组。支持同时追加单个元素或另一个数组：

const list1 = [1, 2];
const list2 = list1.concat(3);

console.log(list2); // 示例输出：[1, 2, 3]
console.log(list1); // 示例输出：[1, 2]

而且 concat() 保证返回值始终是数组，因此非常适合在函数式编程或管道式链式调用中使用。

方案三：若确实需要就地修改，请将 push 作为独立语句

并不是说 push() 不能用。当处于性能敏感的局部算法内部，或者明确不需要保留原数组旧状态时，就地修改能省去创建新对象的开销。此时的规范写法是独立成行调用，不使用变量接收返回值：

const logBuffer = [];

// 正确姿势：作为单条语句执行
logBuffer.push('Init');
logBuffer.push('Ready');

// 随后直接使用被修改的原数组 logBuffer
console.log(logBuffer.length); // 示例输出：2

四、对比与权衡：就地修改（push）vs 不可变生成（展开运算符）

为了在实际项目中做出合理的编码选择，下表梳理了两种思路在各维度的关键差异：

五、技术选型决策与排查清单

当你需要对数组执行添加操作时，可以根据以下决策树快速确定编码模式：