数组是表示索引项的有序集合的数据结构。
对多个数组执行的一个常见操作是合并——将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)方法。
