数组合并的三种方法

共 2044字,需浏览 5分钟

 ·

2021-04-20 11:36

导读

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

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

01

扩展运算符合并

扩展运算符(...)是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];

02

使用数组的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);

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

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

03

数组的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']

04

总结

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

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

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

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

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

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

--《1Q84》


浏览 73
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报