JS 合并数组的三大方式

1. 数组的不可变合并

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

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

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

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

onst 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()方法不会改变调用它的数组，而是返回一个具有合并结果的新数组。例如：

nst 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数组发生了变化。