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