### 当数组想“手拉手”：JavaScript数组拼接的那些事 在JavaScript的世界里，数组就像一排有序的盒子，每个盒子里装着数据。有时候，我们需要把两排甚至多排盒子合为一排，让它们“手拉手”站在一起，这就是数组拼接。看似简单的需求，却藏着几种不同的实现方式，各有各的性格。 #### 一、最“老实”的拼接：concat()方法 `concat()`是数组自带的一个方法，名字来自“连接”（concatenate）的缩写。它的工作很简单：接收一个或多个数组作为参数，返回一个**新数组**，里面按顺序装着所有原数组的元素。 举个例子。假设你有两盒积木，一盒是红色积木`[1, 2, 3]`，另一盒是蓝色积木`[4, 5, 6]`，想把它们合起来： ```javascript const redBlocks = [1, 2, 3]; const blueBlocks = [4, 5, 6]; const allBlocks = redBlocks.concat(blueBlocks); console.log(allBlocks); // 输出：[1, 2, 3, 4, 5, 6] ``` 注意，`concat()`不会改变原来的数组（`redBlocks`和`blueBlocks`还是原来的样子），而是悄悄生成一个新数组。如果想拼接多个数组，直接在括号里加就行：`redBlocks.concat(blueBlocks, yellowBlocks)`。 #### 二、最“时髦”的拼接：扩展运算符（...） ES6引入的扩展运算符（用三个点`...`表示），像个灵活的“拆包工”。它能把数组里的元素一个个“拆”出来，直接放进另一个数组里。用它拼接数组，代码会变得很简洁。 还是刚才的积木例子： ```javascript const redBlocks = [1, 2, 3]; const blueBlocks = [4, 5, 6]; const allBlocks = [...redBlocks, ...blueBlocks]; console.log(allBlocks); // 输出：[1, 2, 3, 4, 5, 6] ``` 这里的`...redBlocks`就是把`redBlocks`数组拆成`1, 2, 3`，`...blueBlocks`拆成`4, 5, 6`，然后用逗号隔开，组成新数组。扩展运算符的好处是灵活——你可以在中间插入其他元素，比如`[...redBlocks, '分隔线', ...blueBlocks]`，结果会是`[1, 2, 3, "分隔线", 4, 5, 6]`。 #### 三、最“直接”的拼接：push()配合展开 如果你不想生成新数组，而是想把第二个数组的元素“塞进”第一个数组里，可以用`push()`方法。`push()`原本是在数组末尾添加元素，但如果给它一个数组作为参数，它会把这个数组当成一个整体加进去（变成嵌套数组）。这时候，扩展运算符又能派上用场了。 比如，想让红色积木盒直接“吞掉”蓝色积木盒的内容： ```javascript const redBlocks = [1, 2, 3]; const blueBlocks = [4, 5, 6]; redBlocks.push(...blueBlocks); // 用扩展运算符拆开blueBlocks console.log(redBlocks); // 输出：[1, 2, 3, 4, 5, 6] ``` 这里`redBlocks`被改变了（原数组长度从3变成6），而`blueBlocks`不变。如果不用扩展运算符，直接`redBlocks.push(blueBlocks)`，结果会是`[1, 2, 3, [4, 5, 6]]`，这不是我们想要的“手拉手”，而是“套娃”。 #### 四、别混淆：join()不是拼接数组 新手有时会误用`join()`方法拼接数组。`join()`的作用是把数组元素用指定符号连成**字符串**，比如`[1,2,3].join('-')`会得到`"1-2-3"`。它返回的是字符串，不是数组，所以别把它当成拼接数组的工具。 #### 选哪种？看你的需求 - 想保留原数组，生成新数组：用`concat()`或扩展运算符（`[...a, ...b]`）。扩展运算符更简洁，推荐优先用。 - 想直接修改原数组：用`push(...另一个数组)`。 - 拼接多个数组或混合元素：扩展运算符最灵活（`[...a, 0, ...b, ...c]`）。 数组拼接的本质，是让分散的数据有序相聚。就像整理书架时，把几摞书按顺序码成一排——方法不同，目的都是让它们更整齐地待在一起。理解了这些基础操作，你会发现JavaScript里的数组，其实像一群听话的小伙伴，等着你去安排它们的“队形”。