JavaScript 数组合并性能优化：扩展运算符 vs concat vs 循环 push

在日常开发中，我们经常需要合并数组，比如批量导入数据、分页加载列表、处理大量日志等场景。当数组规模较小时，用什么方法都差不多；但当数组达到成千上万条时，选择不当的方法可能会导致栈溢出或内存飙升。

今天我们就来聊聊 JavaScript 中三种常见的数组合并方式，看看它们各自的优缺点，以及在不同场景下应该如何选择。

三种数组合并方式

1. 扩展运算符 + push：`arr.push(...otherArr)`

这是最"爽"的写法，一行代码搞定：

constarr1=[1,2,3]constarr2=[4,5,6]arr1.push(...arr2)console.log(arr1)// [1, 2, 3, 4, 5, 6]

优点：

代码简洁，可读性强
语法现代，符合 ES6+ 风格
适合小数组快速合并

缺点：

当数组元素超过约 65536 个时，会触发 JavaScript 引擎的最大参数数量限制，导致栈溢出错误
扩展运算符需要先展开数组，会消耗额外内存
大数组性能较差

适用场景：

小数组（< 1000 个元素）
快速脚本开发
数量可控的场景

2. concat 方法：`arr.concat(otherArr)`

这是最"安全"的写法：

constarr1=[1,2,3]constarr2=[4,5,6]constmerged=arr1.concat(arr2)console.log(merged)// [1, 2, 3, 4, 5, 6]

优点：

不会导致栈溢出，适合大数组
语义清晰，代码可读性好
返回新数组，不修改原数组（函数式编程友好）
性能稳定，适合生产环境

缺点：

会创建新数组，占用额外内存
对于超大数组，内存占用会翻倍

适用场景：

中大数组（> 1000 个元素）
需要保持原数组不变
函数式编程风格
生产环境安全要求高

3. 循环 push：`for (const item of arr) { target.push(item) }`

这是最"稳"的写法：

constarr1=[1,2,3]constarr2=[4,5,6]for(constitemofarr2){arr1.push(item)}console.log(arr1)// [1, 2, 3, 4, 5, 6]

优点：

最安全，绝对不会栈溢出
内存占用最低（原地修改，不创建新数组）
性能稳定，适合超大数组
兼容性最好

缺点：

代码相对冗长
需要手动写循环
会修改原数组

适用场景：

超大数组（> 10000 个元素）
内存敏感场景
长时间运行的服务端任务
需要最高性能的场景

性能对比表

方法	栈溢出风险	内存占用	性能	代码简洁度	适用数组大小
`push(...arr)`	⚠️ 高（>65536）	中	差（大数组）	⭐⭐⭐⭐⭐	< 1000
`concat()`	✅ 无	中高	好	⭐⭐⭐⭐	> 1000
循环`push()`	✅ 无	低	最好	⭐⭐⭐	> 10000

实际案例对比

让我们看看在不同规模下的表现：

小数组（100 个元素）

// 三种方法都可以，性能差异可忽略constsmall=Array.from({length:100},(_,i)=>i)// 方法1：扩展运算符arr1.push(...small)// ✅ 推荐// 方法2：concatconstmerged=arr1.concat(small)// ✅ 也可以// 方法3：循环for(constitemofsmall)arr1.push(item)// ✅ 也可以，但没必要

中数组（10000 个元素）

constmedium=Array.from({length:10000},(_,i)=>i)// 方法1：扩展运算符arr1.push(...medium)// ⚠️ 可能栈溢出！// 方法2：concatconstmerged=arr1.concat(medium)// ✅ 推荐// 方法3：循环for(constitemofmedium)arr1.push(item)// ✅ 也可以

大数组（100000 个元素）

constlarge=Array.from({length:100000},(_,i)=>i)// 方法1：扩展运算符arr1.push(...large)// ❌ 几乎肯定会栈溢出！// 方法2：concatconstmerged=arr1.concat(large)// ⚠️ 可以，但内存占用高// 方法3：循环for(constitemoflarge)arr1.push(item)// ✅ 强烈推荐

进阶优化技巧

1. 分批处理超大数组

当数组特别大时，可以分批处理，避免一次性操作：

functionbatchConcat(target,source,batchSize=5000){for(leti=0;i<source.length;i+=batchSize){constbatch=source.slice(i,i+batchSize)target.push(...batch)// 小批次可以用扩展运算符}returntarget}// 使用consthuge=Array.from({length:100000},(_,i)=>i)constresult=[]batchConcat(result,huge)// 安全处理超大数组

2. 使用 Array.from 和展开运算符组合

对于需要转换的场景：

// 不推荐：可能栈溢出constmapped=arr.map(x=>x*2)result.push(...mapped)// 推荐：使用 concatconstmapped=arr.map(x=>x*2)result=result.concat(mapped)// 或者：直接循环for(constitemofarr){result.push(item*2)}

3. 流式处理（迭代器）

如果数据来自流或生成器，可以边读边处理：

asyncfunction*fetchData(){// 模拟分页数据流for(leti=0;i<10;i++){yieldawaitfetchPage(i)}}constresult=[]forawait(constpageoffetchData()){// 流式处理，内存占用低result.push(...page)// 每页数据量小，可以用扩展运算符}

常见错误示例

❌ 错误示例 1：批量导入时使用扩展运算符

// 批量导入 Excel，可能有上万行数据constexcelData=[]sheets.forEach((sheet)=>{constcurrent=xlsx.utils.sheet_to_json(workbook.Sheets[sheet])excelData.push(...current)// ❌ 如果数据量大，会栈溢出！})

正确做法：

constexcelData=[]sheets.forEach((sheet)=>{constcurrent=xlsx.utils.sheet_to_json(workbook.Sheets[sheet])// ✅ 使用 concat 或循环excelData=excelData.concat(current)// 或者// for (const row of current) excelData.push(row)})

❌ 错误示例 2：分页加载时使用扩展运算符

// 分页加载，累计可能有大量数据constloadMore=async()=>{constnewData=awaitfetchData(offset)allData.push(...newData)// ❌ 随着数据累积，可能栈溢出}

正确做法：

constloadMore=async()=>{constnewData=awaitfetchData(offset)// ✅ 使用 concatallData=allData.concat(newData)// 或者// for (const item of newData) allData.push(item)}