JS 合并数组的三大方式

数组是表示索引项的有序集合的数据结构。

对多个数组执行的一个常见操作是合并——将2个或多个数组合并成包含合并数组的所有项的更大数组。

例如，有两个数组[1,2]和[5,6]，然后合并这些数组得到[1,2,5,6]。

在这篇文章中，你会发现在JavaScript中合并数组的3种方法:2种不可变的(合并后创建一个新数组)和1种可变的(合并到一个数组中)。

1. 数组的不可变合并

1.1使用扩展操作符进行合并

如果您想知道一种在JavaScript中合并数组的好方法，那么请记住使用扩展操作符进行合并。

在数组字面量中写入两个或更多带有扩展操作符…前缀的数组，JavaScript将创建一个合并所有这些数组的新数组:

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

例如，让我们合并两个数组heroes和villains:

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

const all = [...heros, ...villains] 创建一个合并了heroes和villains数组的新数组。

数组字面量中合并数组的顺序很重要:合并数组中的项按照数组在字面量中出现的顺序插入。

例如，让我们在合并的数组中把villains列表放在heroes列表之前:

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

扩展操作符方法允许同时合并2个甚至更多数组:

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

1.2使用array.concat()方法进行合并

如果你喜欢用函数方式合并数组，那么你可以使用array1.concat(array2)方法:

const mergeResult = array1.concat(array2);

或者使用另一种形式:

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

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

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

heroes.concat(villains)和[].Concat (heroes, villains)返回一个新数组，其中heroes和villains数组被合并。

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

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

2. 数组的可变合并

使用扩展操作符或array.concat()执行的合并将创建一个新数组。但是，有时不想创建一个新数组，而是想将它合并到一些现有的数组中。

下面的方法执行一种可变的合并方法。

2.1使用array.push()方法进行合并

你可能已经知道array.push(item)方法将一个项压入到数组的末尾，改变了调用该方法的数组:

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

多亏了这个array.push (item1,item2,…， itemN)接受多个项来推入，你可以使用应用于参数的扩展操作符(换句话说，执行合并)来推入整个数组:

array1.push(...array2);

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

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

heroes.push(…villains)将villains数组中的所有元素推到heroes数组的末尾——执行一个可变的合并操作。heroes数组发生了变化。

总结

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

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

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