在 JavaScript 的日常开发中，处理数组是我们最常面对的任务之一。作为一个拥有多年经验的前端工程师，我想你肯定遇到过这样的情况：你手里有一个“主数组”，这可能是正在渲染的列表，或者是内存中的核心缓存；这时，你拿到了第二个数组，你需要把第二个数组里的所有元素无缝地塞进第一个数组里去。
这时候，一个最直觉的方法是使用 concat() 方法，或者利用展开运算符创建一个新数组。但在 2026 年的今天，随着前端应用承担着越来越重的逻辑负担，特别是在高性能要求的场景（如 WebGL 渲染循环、高频交易数据处理或大型状态管理）下，或者为了保持内存引用的一致性，我们不希望创建一个新的数组。相反，我们希望直接修改（扩展现有的数组），以避免潜在的引用断裂和垃圾回收（GC）压力。
在这篇文章中，我们将超越基础教程，深入探讨几种在 JavaScript 中直接扩展数组的实用技巧。我们将从最现代的 ES6+ 语法入手，结合 AI 辅助开发的视角，回顾旧版本环境下的兼容方案，最后还会聊聊一些性能优化的细节和常见的坑。让我们开始吧！
为什么选择“就地”修改？
在正式介绍方法之前，让我们先达成一个共识：为什么我们要费劲去修改原数组，而不是直接创建一个新的？
想象一下，如果你的原数组被多个对象或变量引用。在 React 或 Vue 的复杂组件树中，或者在 Three.js 的几何体数据结构中，直接创建新数组可能会导致引用断裂。你需要手动更新所有的引用，这往往会带来难以追踪的 Bug。而在这种情况下，直接在原数组上进行“就地”扩展往往是最高效且副作用最小的选择。更重要的是，这能减少内存碎片的产生，这在处理海量数据时至关重要。
方法一：结合使用 push() 与展开运算符（现代标准）
这是目前最现代、最简洁且被广泛推荐的方案。从 ES6 (ECMAScript 2015) 开始，JavaScript 引入了展开运算符（...）。在我们最近的项目中，我们发现这不仅能提高代码可读性，还能让 AI 编程助手（如 GitHub Copilot 或 Cursor）更好地理解我们的意图。
INLINECODE8fa8d8f0 方法原本一次只能接收一个或几个参数（例如 INLINECODE3f60074f）。但如果我们要塞进几百个元素，手写参数显然不现实。这时，展开运算符就是最好的帮手。
让我们来看一个实际的例子：
// 定义两个数组，一个是我们的“主仓库”，一个是“新进货”
const warehouse = [‘笔记本电脑‘, ‘鼠标‘, ‘键盘‘];
const newStock = [‘显示器‘, ‘耳机‘, ‘机械轴‘];
// 我们使用 push() 配合展开运算符 ...newStock
// 这里的 ...newStock 会被解包为 ‘显示器‘, ‘耳机‘, ‘机械轴‘
warehouse.push(...newStock);
console.log(warehouse);
// 输出: [‘笔记本电脑‘, ‘鼠标‘, ‘键盘‘, ‘显示器‘, ‘耳机‘, ‘机械轴‘]
#### 这种方法的工作原理与 AI 辅助视角
当你写下 warehouse.push(...newStock) 时，JavaScript 引擎在幕后做了以下事情：
- 它读取
newStock数组。 - 它将
newStock中的每个元素作为单独的参数提取出来。 - 它将这些提取出来的参数依次传递给
push()方法。 - INLINECODEf7259f14 将它们追加到 INLINECODEf3ed1848 的末尾。
在我们使用 Cursor 或 Windsurf 等 AI IDE 时，这种声明式的写法能让 AI 准确预测我们需要修改的是 warehouse 而不是创建新变量，从而减少上下文误解。
#### 性能注意事项
这个方法非常优雅，代码可读性极高。但有一个小细节需要注意：展开运算符实际上是将数组的元素压入了调用栈。如果你尝试合并两个超大型的数组（比如几十万个元素），这可能会突破栈的大小限制。不过，在绝大多数常规的业务开发中（处理几千或几万个数据），这种方法不仅完全没问题，而且是最推荐的。
方法二：使用 Function.prototype.apply() (兼容 ES5)
如果时光倒流，回到 ES6 还没普及的年代，或者你需要维护一个非常古老的项目（不支持展开运算符的浏览器），我们该怎么办呢？
聪明的开发者们发现了一个利用 INLINECODEca3edd06 方法的技巧。INLINECODEd8f5aff2 的作用是改变函数中 this 的指向，并且它允许你以数组的形式接收参数。
让我们看看它是如何工作的：
// 定义两个数组
const primaryData = [10, 20, 30];
const secondaryData = [40, 50];
// 使用 apply 方法
// 第一个参数 primaryData 指定了 this 上下文
// 第二个参数 secondaryData 作为参数数组传递给 push
Array.prototype.push.apply(primaryData, secondaryData);
console.log(primaryData);
// 输出: [10, 20, 30, 40, 50]
也可以简写为：
primaryData.push.apply(primaryData, secondaryData);
#### 代码解析
虽然代码看起来有点长，但逻辑很清晰。INLINECODE478ea367 方法原本期望接收一系列独立的参数，但 INLINECODE3f838254 帮我们把 secondaryData 数组“拆散”成了这些参数。这实际上实现了和展开运算符一样的效果，只是语法上稍显繁琐。
适用场景： 这种方法现在主要用于需要支持老旧浏览器的项目中（如 IE9-）。在现代化的开发栈中，我们更倾向于使用前面提到的展开运算符。
方法三：巧用 splice() 方法
你可能会问：INLINECODE5cf27c22 不是用来删除数组元素的吗？没错，但它其实是一个多面手。INLINECODE5d6959f3 方法的签名是 INLINECODE112e7761。它不仅可以从 INLINECODE722b7e84 位置开始删除 deleteCount 个元素，还可以在删除的位置插入任意数量的新元素。
如果我们把 INLINECODEc2cbb947 设为 0，并且把 INLINECODE9a6d9949 设为数组的末尾，它就变成了一个“插入器”！
让我们看看具体实现：
let list = [‘HTML‘, ‘CSS‘, ‘JavaScript‘];
let extras = [‘React‘, ‘Node.js‘, ‘Vue‘];
// list.length 计算了当前数组的末尾索引
// 0 表示我们不删除任何现有元素
// ...extras 利用展开运算符将要插入的元素传递进去
list.splice(list.length, 0, ...extras);
console.log(list);
// 输出: [‘HTML‘, ‘CSS‘, ‘JavaScript‘, ‘React‘, ‘Node.js‘, ‘Vue‘]
#### 为什么要这样用？
这种方法显得有点“极客”，但它的优势在于 INLINECODE46822185 是一个原生的数组方法，执行效率很高。如果你在做复杂的数组操作（比如在循环中移动数据块），INLINECODE5d258a02 提供了非常灵活的控制力。不过，仅仅为了合并数组，push 加展开运算符在语义上可能更直观一些。
2026 前沿视角：高性能与大规模数据场景
随着 Web 应用变得更加复杂，我们经常需要处理数万甚至数百万条数据。在处理超大规模数组时，传统的 push(...spread) 方法可能会遇到瓶颈。
让我们思考一下这个场景：你在做一个数据可视化大屏，需要实时合并来自 WebSocket 的 50,000 个数据点。如果直接使用 INLINECODE98e7d07c，你可能会看到浏览器控制台报错：INLINECODEb35768b8。这是因为展开运算符试图将 50,000 个参数同时压入调用栈，超过了引擎的限制。
#### 解决方案：手动循环与批量处理
这时候，最朴素的 for 循环反而是最稳健的。虽然它看起来不如函数式编程那么“性感”，但在处理海量数据时，它是安全且可控的。
生产级代码示例：
// 模拟超大规模数据集
const massiveIncomingData = new Array(500000).fill(0).map((_, i) => i);
let mainBuffer = [1, 2, 3]; // 我们的现有缓冲区
console.time(‘Manual Loop‘);
// 不使用展开运算符，而是手动遍历
// 这种方式不会增加调用栈的压力，而是逐个元素处理
for (let i = 0; i < massiveIncomingData.length; i++) {
mainBuffer.push(massiveIncomingData[i]);
}
console.timeEnd('Manual Loop');
// 输出类似: Manual Loop: 12.456ms
// 虽然代码看起来不如 ES6 优雅，但它能处理海量数据而不会爆栈
在现代开发中，我们甚至可以使用 requestIdleCallback 或 Web Workers 将这个巨大的循环拆分到不同的时间片或线程中执行，以避免阻塞主线程（UI 卡顿）。这正是 2026 年前端“体验优先”理念的体现。
进阶技巧：处理不可变数据结构与引用陷阱
在 React 或 Vue 3 的项目中，我们经常听到“不可变性”的重要性。但是，有时候我们需要“就地”修改数组，却又不希望触发组件的重渲染，或者我们需要修改一个被 Proxy 包装的响应式对象。
#### 常见陷阱：误用 const 与引用赋值
我们来看一个新手常犯的错误。假设你有一个用 const 定义的数组，你想合并另一个数组。
const source = [‘Apple‘, ‘Banana‘];
const target = [‘Cherry‘, ‘Date‘];
// 错误尝试：直接重新赋值
// source = [...source, ...target]; // ❌ TypeError: Assignment to constant variable.
// 正确做法：修改原数组内容，但不修改引用
source.push(...target); // ✅
console.log(source); // [‘Apple‘, ‘Banana‘, ‘Cherry‘, ‘Date‘]
记住，const 阻止的是变量引用的改变，而不是阻止数组内部内容的变化。这正是我们“就地扩展”的理论基础。
实战应用场景与最佳实践
讲了这么多技术细节，让我们来聊聊在真实项目中如何选择。
#### 场景一：分页数据加载（电商实战）
你在做一个电商网站，用户点击“下一页”。你已经有了一个 INLINECODEdd1fe110 数组（当前页数据），后台返回了 INLINECODE5bb25f89（下一页数据）。你想把它们拼起来展示给用户。
let currentPageItems = [{id: 1, name: ‘商品A‘}, {id: 2, name: ‘商品B‘}];
const nextPageItems = [{id: 3, name: ‘商品C‘}, {id: 4, name: ‘商品D‘}];
// 最佳实践：使用 push + 展开运算符
// 这会直接更新 UI 绑定引用的数组，触发视图更新
// 注意：在 React 中，直接修改 state 通常是反模式，
// 但如果你使用的是 Immer 或者在 reducer 之外操作本地缓存，这就很有用。
function loadMore() {
// 模拟 API 调用后合并数据
currentPageItems.push(...nextPageItems);
updateUI(currentPageItems);
}
function updateUI(items) {
// 更新 DOM 的逻辑...
console.log(‘UI updated with items:‘, items);
}
#### 场景二：AI 辅助代码审查与 LLM 驱动调试
当你在代码审查工具（如 GitHub Copilot Workspace）中展示代码时，使用 INLINECODE92527430 这种语义明确的写法，能够让 LLM 更准确地分析你的代码逻辑，减少“幻觉”产生的错误建议。如果你使用 INLINECODEd8ec1105 或 apply，有时 AI 可能会误判你的意图，建议不必要的重构。保持代码的标准化，就是让 AI 成为你的最佳搭档。
总结与决策树
我们来总结一下今天讨论的内容，并给出一个简单的决策指南。
- 首选方案：
arr1.push(...arr2)。这是最符合现代 JavaScript 风格的写法，简洁易读。适用于 99% 的日常开发场景，且与 AI 辅助开发工具配合良好。 - 兼容性方案：
Array.prototype.push.apply(arr1, arr2)。当你需要支持 IE 等古老浏览器时，它是救星。 - 特殊场景：INLINECODE907ea182。如果你喜欢 INLINECODE7cad1bce 或者已经在进行复杂的索引操作，可以用它。
- 高性能/大数据场景：手动 INLINECODE11a0de9c 循环配合 INLINECODEee6733b5。切记不要在超大型数组（几十万级别）上盲目使用展开运算符合并，以免爆栈。
常见错误提示：
- 错误：INLINECODE0925e61a。如果你这样写，你会在 INLINECODE786776f0 的末尾得到一个嵌套数组 INLINECODEfc1cb6d4，而不是扁平化的合并结果。一定要记得使用 INLINECODE3c02ef98 展开它！
- 错误：在 INLINECODEa55777c3 定义的数组上尝试使用方法四中的重新赋值（INLINECODEd9fddae0）。请使用 INLINECODE9b893b1f 或 INLINECODEe6030071 来修改内容。
希望这篇文章能帮助你更深入地理解 JavaScript 数组操作的细节。无论是在处理简单的数据列表，还是优化高频性能代码，选择正确的方法都会让你事半功倍。快去你的项目中试试这些技巧吧！