在JavaScript的世界里，数组就像一排有序的盒子，每个盒子里装着数据。有时候，我们需要把两排甚至多排盒子合为一排，让它们“手拉手”站在一起，这就是数组拼接。看似简单的需求，却藏着几种不同的实现方式，各有各的性格。

一、最“老实”的拼接：concat()方法

concat()是数组自带的一个方法，名字来自“连接”（concatenate）的缩写。它的工作很简单：接收一个或多个数组作为参数，返回一个新数组，里面按顺序装着所有原数组的元素。

举个例子。假设你有两盒积木，一盒是红色积木[1, 2, 3]，另一盒是蓝色积木[4, 5, 6]，想把它们合起来： 

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引入的扩展运算符（用三个点...表示），像个灵活的“拆包工”。它能把数组里的元素一个个“拆”出来，直接放进另一个数组里。用它拼接数组，代码会变得很简洁。

还是刚才的积木例子： 

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()原本是在数组末尾添加元素，但如果给它一个数组作为参数，它会把这个数组当成一个整体加进去（变成嵌套数组）。这时候，扩展运算符又能派上用场了。

比如，想让红色积木盒直接“吞掉”蓝色积木盒的内容： 

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里的数组，其实像一群听话的小伙伴，等着你去安排它们的“队形”。