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


Posted by l841108lily on 2020-06-22

陣列展開

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

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 參數所看待, bc 參數就找不到了,所以這時候就需要使用展開:

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 會顯示 truearr3 則是 false
這個跟之前提到的記憶體位置的概念是一樣的,因為 arr3 使用展開,跟原先的陣列所指向的記憶體位置已經不同了,有點像是打開一個新的記憶體空間,把原先陣列的值貼在上面,所以在選擇直接使用等號複製以及使用展開的效果是不一樣的。


反向展開

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

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

console.log(arr2)

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


#javascript #展開







Related Posts

Go 起手式之二

Go 起手式之二

Day02 為資料命名

Day02 為資料命名

Day02 重裝待發

Day02 重裝待發



Comments