JS数组合并(5种)

IMJCW

已于 2022-08-17 21:41:34 修改

阅读量10w+

点赞数 44

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript js

于 2020-12-03 13:31:53 首次发布

8 篇文章

订阅专栏

博客主要围绕JavaScript数组合并展开，介绍了多种实现方式，如使用for循环、arr.concat(arr2)、arr.push.apply(arr, arr2)、[…arr, …arr2]、push(…arr)等，还提到部分方法会变更原数组，部分会生成新数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目过程中，经常会遇到 JS 数组合并的情况，时常为这个纠结。这里整理一下。

最容易想到的莫过于 for 了。

会变更原数组，当然也可以写成生成新数组的形式。

经读者提点，数组不建议使用for…in，具体可参考MDN for…in

let arr = [1, 2]
let arr2 = [3, 4]

for (let i = 0; i < len(arr2); i++) {
	arr.push(arr2[i])
}

console.log(arr)
// [1, 2, 3, 4]

会生成新的数组。

let arr = [1, 2]
let arr2 = [3, 4]

arr = arr.concat(arr2)

console.log(arr)
// [1, 2, 3, 4]

第一种 for 循环就是使用的 push 来实现的。

因为 push 是可以接收多个参数的，所以我们可以使用 apply 来实现。

会变更原数组。

let arr = [1, 2]
let arr2 = [3, 4]

arr.push.apply(arr, arr2)

console.log(arr)
// [1, 2, 3, 4]

ES6 的语法，简单而实用。

会生成新的数组。

let arr = [1, 2]
let arr2 = [3, 4]

arr = [...arr, ...arr2]

console.log(arr)
// [1, 2, 3, 4]

push 结合 ...[] 来实现。

会变更原数组。

let arr = [1, 2]
let arr2 = [3, 4]

arr.push(...arr2)

console.log(arr)
// [1, 2, 3, 4]

实现方式大同小异，可以理解那最容易理解的一部分。