JS实用功能-12、数组合并的三种方法

数组是代表有序收集索引项的数据结构。

合并数组是在处理数据时常常用到的操作，在这里，你将找到在 JavaScript 中合并数组的 3 种方法：2 个不可变（合并后创建一个新数组）和 1 个可变（合并为一个数组）。

一、扩展运算符合并

扩展运算符(...)是ES6中的新特性，使用的时候需要注意项目中是否支持。

...写在两个或两个以上的阵列内，JS将创建一个新的数组，所有这些数组都合并在一起。


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

例如，让我们合并 2 个阵列和：heroes，villains

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

const all = [...heroes, ...villains];

all; // ['Batman', 'Superman', 'Joker', 'Bane']

如果要做先后顺序的话，可以这样操作：

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

const all = [...villains,  ...heroes];

all; // ['Joker', 'Bane', 'Batman', 'Superman']

扩展运算符甚至可以将更多数组一起合并。

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

二、使用数组的concat方法

如果你喜欢用function的方法，则可以使用该方法：

// merge array1 and array2
const mergeResult = array1.concat(array2);

其他写法：

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

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

使用array.concat()合并heroes，villains

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']

concat 方法可以接受多个数组作为参数，因此您可以同时合并 2 个或多个阵列：

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

上面的两种方法都是返回一个新数组，不会改变原有的数组。

但是，有时您不想创建新数组，而是将其合并到某些现有数组中，下面的方法执行一种可变的合并方式。

三、数组的push方法

您可能已经知道该方法在数组末尾插入一项，从而改变该方法所调用的数组：

const heroes = ['Batman'];

heroes.push('Superman');

heroes; // ['Batman', 'Superman']

如果要接受多个元素插入，您可以使用应用于参数的扩展运算符（...）。

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

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

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

heroes.push(...villains);

heroes; // ['Batman', 'Superman', 'Joker', 'Bane']

四、总结

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

您可以使用扩展运算符或函数合并 2 个或更多数组。这些方法是不会改变原有数组的，因为合并结果存储在新的数组中。

[...array1, ...array2]，[].concat(array1, array2)

如果您要执行可变合并，即合并到原有数组而不创建新的，则可以使用方法：array1.push(...array2)。

你知道还有什么其他方法可以合并阵列？欢迎在评论区留言。