1. 首页
  2. JavaScript
  3. 正文

JavaScript实现合并数组的六种方法

2023年11月2日 560点热度 0人点赞 0条评论

要将一个数组的内容追加或合并到另一个数组中,可以使用不同的方法,具体取决于希望如何合并这两个数组。

使用concat方法合并数组

concat 方法是数组原型方法,它会创建一个新数组,包含两个或多个数组的内容然后返回,它不会改变原数组的内容。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = arr1.concat(arr2);

console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

使用ES6标准中的扩展运算符合并数组

扩展运算符 "..." 可以用来展开数组元素,将它放置于一个数组字面量中就可以实现将一个或多个数组合并至一个数组内。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2];

console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

使用push方法合并数组

push 方法是数组原型中的方法,它接收一个或多个参数,然后把这些参数追加至数组末尾,并返回新的数组长度,所以它会改变原数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(...arr2);

console.log(arr1); // [1, 2, 3, 4, 5, 6]

请注意参数中必须要使用 "..."扩展运算符将数组展开,如果直接传入一个数组,push方法将其作为一个整体传入数组中。

使用unshift方法合并数组

unshift 方法是数组原型中的方法,它的参数和返回值与push方法,唯一的区别就是unshift方法是将内容插入至数组起始位置,它也是会改变原数组的。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.unshift(...arr2);

console.log(arr1); // [4, 5, 6, 1, 2, 3]

使用splice方法合并数组

splice 方法也是数组原型中的方法,第一个参数表示操作位置的索引,第二个参数表示要替换或者删除的元素个数(可以为0不删除而是替换),从第三个参数开始则是替换或插入的元素。返回值是被替换删除的元素构成的数组。这个方法也是会改变原数组。

splice 方法非常强大,它可以通过改变传递的参数从而实现移除、替换、添加元素的目的。实现删除仅需提供前两个参数:开始删除的那个元素下标索引,要删除的元素个数。要实现替换仅需在实现删除的基础上再传入一个或多个要替换的元素。而实现插入传入第二个参数的数值为0即可,如下段代码在数组末尾插入指定的元素:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.splice(arr1.length, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

上述示例代码中通过传入arr1数组的长度作为插入操作的索引位置,你也可以传入一个指定的数值(包括负数)来改变插入的位置,负数时是从后往前开始。使用这个方法的好处是可以在指定位置进行合并数组。

使用toSpliced方法合并数组

toSpliced方法是 ECMAScript 2022 标准中新增的数组方法,它与splice方法基本一致。,区别在于它不直接操作修改原数组,而是通过返回值返回一个新的数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const newArr = arr1.toSpliced(arr1.length, 0, ...arr2);
console.log(newArr); // [1, 2, 3, 4, 5, 6]
标签: JavaScript
最后更新:2023年11月2日

Evans Ann

It's no use crying over spilt milk.

点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

归档

  • 2023 年 11 月
  • 2023 年 10 月
  • 2021 年 1 月
  • 2020 年 8 月
  • 2020 年 1 月
  • 2019 年 8 月

分类目录

  • Docker
  • JavaScript
  • Kubernetes
  • Linux
  • PHP
  • Windows
  • 基础
  • 正则表达式
  • 英语

COPYRIGHT © 2018-2024 秋雨沥沥. ALL RIGHTS RESERVED.

赣ICP备18001671号-3