JS数组合并的7种常见方法

前言

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

1、ES6解构

[…arr, …arr2] 会生成新的数组

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

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

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

2、concat

arr.concat(arr2) 会生成新的数组

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

arr = arr.concat(arr2)

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

3、push

push 结合 …[] 来实现。

会变更原数组

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

arr.push(...arr2)

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

4、arr.push.apply(arr, arr2)

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

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

会变更原数组。

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

arr.push.apply(arr, arr2)

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

5、遍历添加

array.forEach(item => {
    arr.push(item)
})

遍历方法：forEach、map、filter、every、for、for in、for of等。

添加方法：push（后追加）、unshift（前追加）等。

arr值改变成追加后的样子，array值不改变

6、join & split

(arr.join(',') + ',' + array.join(',')).split(',')

原数组值不改变。

默认会把数组中的数字类型转成字符串类型。

数组的项是引用类型时会自动生成’[object Object]'，造成数据丢失或错误。

7、call

arr.push.apply(arr, array)
arr.unshift.apply(arr, array)

原数组值不改变，返回拼接后数组的长度。