JS 展開 (Spread Operator) 以及反向展開 (Rest Parameters)

陣列展開

如果有巢狀的陣列，需要進行資料處理，將巢狀陣列變成一個陣列的時候，就可以使用展開功能，直接看一個例子：

var arr = [1,2,3]
//未使用展開
var arr2 = [arr, 4,5,6]
//使用展開
var arr3 = [...arr, 4,5,6]

console.log(arr2)
console.log(arr3)

未展開的 arr2 會印出 [ [ 1, 2, 3 ], 4, 5, 6 ]
已展開的 arr3 則是會印出 [ 1, 2, 3, 4, 5, 6 ]

使用情境

有如果今天需要呼叫一個 function，我將多個引數利用陣列存取，然後再引述那邊直接輸入陣列，將會產生錯誤：

function add(a,b,c) {
    return a + b + c
}
var arr = [1, 2, 3]
console.log(add(arr))

雖然 arr 陣列中存的跟引數要使用的內容是一樣的，但是他的資料型態是陣列，所以會輸出 1,2,3undifinedundefined。
也就是說 arr 被當作是 function 輸入的 a 參數所看待， b 和 c 參數就找不到了，所以這時候就需要使用展開：

function add(a,b,c) {
    return a + b + c
}
var arr = [1, 2, 3]
console.log(add(...arr))

輸出結果就會是 6

物件展開

一樣的問題，當我想要在物件中直接使用物件的時候，就會變成巢狀的，這個時候使用展開，才可以讓兩個物件完美融合成一個物件。

var obj = {
    a: 1,
    b: 2
}
//未使用展開
var obj2 = {
    obj,
    c: 3
}
//使用展開
var obj3 = {
    ...obj,
    c: 3
}

console.log(obj2)
console.log(obj3)

記憶體位置也有差？

以陣列為例，如果我今天要將 arr複製一份，並且叫做arr2，可以使用等號或者是展開，先來看看輸出的結果：

var arr = [1, 2, 3]
//使用等號複製
var arr2 = arr
//使用展開複製
var arr3 = [...arr]

//確認印出結果
console.log(arr2)
console.log(arr3)

//確認是否和 arr 相同
console.log(arr === arr2)
console.log(arr === arr3)

首先先來看一下印出結果，arr2會印出[1, 2, 3]，arr3也會印出[1, 2, 3]，兩者印出的結果是相同的，但是當我們在查看兩者跟原先的 arr 是否相等的時候，arr2 會顯示 true，arr3 則是 false。
這個跟之前提到的記憶體位置的概念是一樣的，因為 arr3 使用展開，跟原先的陣列所指向的記憶體位置已經不同了，有點像是打開一個新的記憶體空間，把原先陣列的值貼在上面，所以在選擇直接使用等號複製以及使用展開的效果是不一樣的。

反向展開

說完複製的部分，接下來就是反向展開，它其實跟複製的概念很像，如果要用一句話說反向展開的話，我覺得可以說「除了前面某個，我要複製剩下的，並且命名為...」，直接舉個例子：

var arr = [1, 2, 3]
//除了前面的 first，我要複製剩下的，並且命名為 arr2
var [first, ...arr2] = arr

console.log(arr2)

最後印出的結果，就會是 [2, 3]，也就是說除了 1，我全都要。