ES6新增的展开运算符（...）可以将可迭代对象展开为多个元素，在数组合并场景中，它能替代传统的concat方法，让代码更简洁直观。展开运算符的语法形式是在数组前添加三个点，会将数组的每个元素依次取出，再放到新的数组结构中。
展开运算符合并数组的基础用法
合并两个数组是最基础的使用场景，只需要将两个数组用展开运算符展开后放入新数组即可，代码如下：
// 定义两个待合并的数组 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; // 使用展开运算符合并数组 const mergedArr = [...arr1, ...arr2]; console.log(mergedArr); // 输出 [1, 2, 3, 4, 5, 6]
这种方式不需要调用数组的原型方法，直接通过语法特性就能完成合并，代码逻辑更清晰。
合并多个数组的实现方式
展开运算符支持同时合并多个数组，只需要在新数组中依次展开所有待合并的数组即可，没有数量限制：
const arr1 = ['a', 'b']; const arr2 = ['c', 'd']; const arr3 = ['e', 'f']; const arr4 = ['g', 'h']; // 合并四个数组 const resultArr = [...arr1, ...arr2, ...arr3, ...arr4]; console.log(resultArr); // 输出 ["a", "b", "c", "d", "e", "f", "g", "h"]
合并时插入额外元素
使用展开运算符合并数组时，还可以在数组中间或者任意位置插入新的元素，灵活性比concat方法更高：
const frontArr = [1, 2]; const backArr = [5, 6]; // 在两个数组中间插入元素3和4 const newArr = [...frontArr, 3, 4, ...backArr]; console.log(newArr); // 输出 [1, 2, 3, 4, 5, 6]
和传统concat方法的对比
传统的数组合并通常使用Array.prototype.concat方法，两种方式的核心差异如下：
| 对比维度 | 展开运算符 | concat方法 |
|---|---|---|
| 语法简洁度 | 语法更简洁，不需要调用方法 | 需要调用数组实例的concat方法 |
| 插入额外元素 | 可以直接在展开位置插入任意元素 | 需要先合并再插入，或者多次调用concat |
| 浅拷贝特性 | 合并后的一级元素是值拷贝，引用类型还是浅拷贝 | 同样是一级元素值拷贝，引用类型浅拷贝 |
使用注意事项
- 展开运算符合并数组属于浅拷贝，如果数组中包含对象等引用类型元素，合并后新数组和原数组会共享这些引用类型的引用，修改其中一个会影响另一个。
- 展开运算符只能用于可迭代对象，普通的对象如果没有实现迭代器接口，不能直接用展开运算符合并到数组中，会抛出类型错误。
- 如果需要合并的类数组对象（比如arguments），可以先通过
Array.from转换为数组，再使用展开运算符合并。
下面是浅拷贝特性的示例：
const arr1 = [{ name: '张三' }, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
// 修改合并后数组中的对象元素
merged[0].name = '李四';
console.log(arr1[0].name); // 输出 "李四"，原数组的对象被修改
适用场景总结
展开运算符合并数组适合大多数常规数组合并场景，尤其是需要合并多个数组、或者在合并时插入额外元素的场景，代码可读性更高。如果是需要兼容ES6之前的环境，则需要使用concat方法或者循环拼接的方式实现数组合并。
ES6展开运算符数组合并JavaScriptspread_operator修改时间：2026-07-21 19:03:20