JS數組合並(5種)

前言

項目過程中，經常會遇到 JS 數組合並的情況，時常為這個糾結。這里整理一下。

簡單而實用的for

最容易想到的莫過於 for 了。

會變更原數組，當然也可以寫成生成新數組的形式。

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

for (let i in arr2) {
    arr.push(arr2[i])
}

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

arr.concat(arr2)

會生成新的數組。

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

arr = arr.concat(arr2)

console.log(arr)
// [1, 2, 3, 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]

[…arr, …arr2]

ES6 的語法，簡單而實用。

會生成新的數組。

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

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

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

push(…arr)

push 結合 ...[] 來實現。

會變更原數組。

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

arr.push(...arr2)

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