数组合并的三种方法-技术圈

导读

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

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

扩展运算符合并

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

写法：

// 合并 array1 and array2const 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方法

如果你喜欢用函数的方法，则可以使用该方法，而且它是ES5以前的。

// merge array1 and array2const mergeResult = array1.concat(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']

那么怎么push一个数组呢？可以使用扩展运算符(...)，这个运算符的一个功能是可以作为被函数调用的。

// 合并array2 到 array1array1.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)。

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

这个世界上根本就没有正确的选择，我们只不过是要通过努力奋斗，使当初的选择变得正确。

--《1Q84》