js 合并数组的三大方式是_js合并数组的方法

js 合并数组的三大方式是_js合并数组的方法数组是表示索引项的有序集合的数据结构。对多个数组执行的一个常见操作是合并——将2个或多个数组合并成包含合并数组的所有项的更大数组。例如,有两个数组[1,2]和[5,6],然后合并这些数组得到[1,2,5,6]。在这篇文章中,你会发现在JavaScript中合并数组的3种方法:2种不可变的(合并后创建一个新数组)和1种可变的(合并到一个数组中)。1.数组的不可变合并1.1使用扩展操作符进行合并如果您想知道一种在JavaScript中合并数组的好方法,那么请记住使用扩展操作符进行合并。在数组字.

在这里插入图片描述

数组是表示索引项的有序集合的数据结构。

对多个数组执行的一个常见操作是合并——将2个或多个数组合并成包含合并数组的所有项的更大数组。

例如,有两个数组[1,2]和[5,6],然后合并这些数组得到[1,2,5,6]。

在这篇文章中,你会发现在JavaScript中合并数组的3种方法:2种不可变的(合并后创建一个新数组)和1种可变的(合并到一个数组中)。

1. 数组的不可变合并

1.1使用扩展操作符进行合并

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

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

const mergeResult = [...array1, ...array2];
只听到从架构师办公室传来架构君的声音:
绣面芙蓉一笑开,斜飞宝鸭衬香腮。有谁来对上联或下联?

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

此代码由Java架构师必看网-架构君整理
const 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个甚至更多数组:

此代码由Java架构师必看网-架构君整理
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()方法不会改变调用它的数组,而是返回一个具有合并结果的新数组。例如:

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

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

总结

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

可以使用扩展操作符[…]array1,……Array2],或函数方式[].Concat (array1, array2)合并2个或多个数组。这些方法是不可变的,因为合并结果存储在一个新数组中。

如果你想执行可变合并,即合并到一个数组而不创建一个新数组,那么你可以使用array1.push(…array2)方法。

本文来源前端修罗场,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/209365
0

发表评论