有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

JavaScript 合并数组的三种方法(性能差异)对比

javascript 炮渣日记 1个月前 (11-08) 26次浏览 已收录 0个评论 扫描二维码

数组作为一种数据结构,表示索引项的有序集合。经常会使用到数组,尤其是将多个数组进行合并,比如将数组 [1,2,3] 和 数组[4,5,6] 合并,最终得到数组[1,2,3,4,5,6]。

数组的合并分不可变合并和可变合并,前者将返回新的数组,不会改变被合并的数值,后者将改变被合并的数组。

数组的不可变合并

1、使用扩展运算符(…)合并

扩展运算符是合并数组的一种好方法,一定要掌握,其语法如下:

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

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

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
const all = [...heroes, ...villains];
console.log(all);  // ['Batman', 'Superman', 'Joker', 'Bane']

如上all 数组就是合并后返回的新数组,注意合并后的数组项将按照其原先的顺序进行排序。

当然我们可以一次合并多个数组,如下:

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

2、使用array.concat()方法合并

如果您更喜欢使用函数式方法来合并数组,那么您可以使用以下array1.concat(array2)方法:

// 合并 array1 和 array2
const mergeResult = array1.concat(array2);

或使用另一种形式:

// 合并 array1 和 array2
const mergeResult = [].concat(array1, array2);

array.concat()方法不会改变调用它的数组,而是返回一个具有合并结果的新数组。

例如,让我使用 concat 方法来合并数组heroes和villains:

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
const all1 = heroes.concat(villains);
const all2 = [].concat(heroes, villains);
console.log(all1);// ['Batman', 'Superman', 'Joker', 'Bane']
console.log(all2);// ['Batman', 'Superman', 'Joker', 'Bane']

以上2种方式合并后都会返回新的数组,如all1、all2。

concat 方法接受多个数组作为参数,因此您可以一次合并 2 个或多个数组:

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

数组的可变合并

有时我们希望将一个数组合并到现有数组中,而不是返回一个新数组。下面的方法执行一种可变的合并方式。

1 使用array.push()方法合并

您可能已经知道array.push(item)方法会在数组末尾添加新的项,从而改变调用该方法的数组:

const heroes = ['Batman'];heroes.push('Superman');
console.log(heroes); // ['Batman', 'Superman']

由于array.push(item1, item2, …, itemN)接受多个要添加的项目,您可以使用应用于参数的扩展运算符将整个数组项添加到末尾(换句话说,执行合并):

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

例如,让我们合并villains到heroes数组中:

const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
heroes.push(...villains);
console.log(heroes); // ['Batman', 'Superman', 'Joker', 'Bane']

heroes.push(…villains)将villains数组的所有项添加到heroes数组的末尾(执行可变合并)。heroes数组发生变化,而不是返回一个新的数组。

三、结论

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

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

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

您还知道哪些其他合并数组的方法?

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址