JavaScript 合并数组的三种方法

大家好，欢迎来到IT知识分享网。

数组作为一种数据结构，表示索引项的有序集合。经常会使用到数组，尤其是将多个数组进行合并，比如将数组 [1,2,3] 和 数组[4,5,6] 合并，最终得到数组[1,2,3,4,5,6]。

数组的合并分不可变合并和可变合并，前者将返回新的数组，不会改变被合并的数值，后者将改变被合并的数组。

数组的不可变合并

1、使用扩展运算符(…)合并

扩展运算符是合并数组的一种好方法，一定要掌握，其语法如下：

// 合并 array1 和 array2 const mergeResult = [...array1, ...array2];

例如，让我们合并 2 个数组heroes和villains：

const heroes = ['Batman', 'Superman']; const villains = ['Joker', 'Bane']; const all = [...heroes, ...villains]; console.log(all); // ['Batman', 'Superman', 'Joker', 'Bane']

如上all 数组就是合并后返回的新数组，注意合并后的数组项将按照其原先的顺序进行排序。

当然我们可以一次合并多个数组，如下：

const mergeResult = [...array1, ...array2, ...array3, ...arrayN];

2、使用array.concat()方法合并

如果您更喜欢使用函数式方法来合并数组，那么您可以使用以下array1.concat(array2)方法：

// 合并 array1 和 array2 const mergeResult = array1.concat(array2);

或使用另一种形式：

// 合并 array1 和 array2 const mergeResult = [].concat(array1, array2);

array.concat()方法不会改变调用它的数组，而是返回一个具有合并结果的新数组。

例如，让我使用 concat 方法来合并数组heroes和villains：

const heroes = ['Batman', 'Superman']; const villains = ['Joker', 'Bane']; const all1 = heroes.concat(villains); const all2 = [].concat(heroes, villains); console.log(all1);// ['Batman', 'Superman', 'Joker', 'Bane'] console.log(all2);// ['Batman', 'Superman', 'Joker', 'Bane']

以上2种方式合并后都会返回新的数组，如all1、all2。

concat 方法接受多个数组作为参数，因此您可以一次合并 2 个或多个数组：

const mergeResult = [].concat(array1, array2, array3, arrayN);

数组的可变合并

有时我们希望将一个数组合并到现有数组中，而不是返回一个新数组。下面的方法执行一种可变的合并方式。

1 使用array.push()方法合并

您可能已经知道array.push(item)方法会在数组末尾添加新的项，从而改变调用该方法的数组：

const heroes = ['Batman'];heroes.push('Superman'); console.log(heroes); // ['Batman', 'Superman']

由于array.push(item1, item2, …, itemN)接受多个要添加的项目，您可以使用应用于参数的扩展运算符将整个数组项添加到末尾（换句话说，执行合并）：

// 将 array2 合并到 array1中 array1.push(...array2);

例如，让我们合并villains到heroes数组中：

const heroes = ['Batman', 'Superman']; const villains = ['Joker', 'Bane']; heroes.push(...villains); console.log(heroes); // ['Batman', 'Superman', 'Joker', 'Bane']

heroes.push(…villains)将villains数组的所有项添加到heroes数组的末尾（执行可变合并）。heroes数组发生变化，而不是返回一个新的数组。

三、结论

JavaScript 提供了多种合并数组的方法。

您可以使用扩展运算符[…array1, …array2]或函数式方法[].concat(array1, array2)来合并 2 个或更多数组。这些方法是不可变的，因为合并结果存储在一个新数组中。

如果您想执行可变合并，即合并到一个数组而不是创建一个新数组，那么您可以使用array1.push(…array2)方法。

您还知道哪些其他合并数组的方法？