(Day28) ES6 展開運算子與其餘參數

發表於 分類於 Disqus：
展開運算子與其餘參數是 ES6 新增的兩個特性，使用上都一樣是 ... 也就是三個點，不過實際上這兩個方法代表的意義會不太一樣，接下來一一介紹。

前言

展開運算子與其餘參數是 ES6 新增的兩個特性，使用上都一樣是 ... 也就是三個點，不過實際上這兩個方法代表的意義會不太一樣，接下來一一介紹。
​

展開運算子 (Spread syntax)

​
展開運算子是主要用在陣列上的運算子，在實做中這個方法其實滿常用的，而他的概念正如名稱一樣，將資料展開，並且一一取得該陣列的值，在過去若想將陣列資料傳至另一個陣列資料時，我們會使用 .contant() 方法比如：
​

1
2
3
4
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
array1 = array1.concat(array2)
console.log(array1)

​
要達成這個需求，現在則可以使用展開運算子達成：
​

1
2
3
4
var array1 = ['a', 'b', 'c' ];
var array2 = ['d', 'e', 'f'];
array1 =  [...array1, ...array2]
console.log(array1) //(6) ['a', 'b', 'c', 'd', 'e', 'f']

​
這樣看或許還對這個功能感到有些模糊，這時直接使用 console.log( ...array1 ) ，變可以明白他其實就是將陣列中的值一一的使用並 return 出來。
​

淺層複製

​
從上面說明也可以明白，展開運算子，也可用於複製陣列上，若使用 展開運算子 複製陣列時他是屬於淺層複製的一種，如果是淺層複製的陣列，他們第一層的參考會是不同的，也就是不會影響原始物件，例如：
​

1
2
3
4
var array1 = ['a', 'b', 'c' ]
var array2 = [ ... array1 ]
array2.push('d')
console.log(array1)  // ['a', 'b', 'c']

​
而非淺層複製就會使用共同參考:
​

1
2
3
4
var array1 = ['a', 'b', 'c' ]
var array2 = array1
array2.push('d')
console.log(array1)  // ['a', 'b', 'c', 'd']

​
上面範例雖然都用在陣列上，但其實如果只是要使用複製功能，物件也能使用這個方法，例如：
​

1
2
3
var obj1 = { name1:'Ryder', name2:'Jack', name3:'Annie'}
var obj2 = { ...obj1 }
console.log( obj2 ) // { name1:'Ryder', name2:'Jack', name3:'Annie'}

​

類陣列轉成純陣列

​
展開運算子還有一個功能，就是將類陣列轉換成純陣列，JS 某些語法會創造出的類陣列（非完全陣列沒有完整的陣列原型），例如
​

  • 函式中的 arguments 參數：
    ​
    1
    2
    3
    4
    5
    function Fn1(){
        console.log(arguments)
        console.log( [...arguments] )
    }
    Fn1(1,2,3)
    ​
  • document.querySelectorAll() 等等的取得 DOM 元素的方法：
    ​
    1
    2
    3
    4
    const buttons = document.querySelectorAll('button')
    console.log( buttons )
    console.log( [...buttons] )
    ​
    ​

    其餘參數 (rest parameter)

    ​
    若要使用其餘參數，我們可以在函式參數打上 ...arg (名稱可自訂），這樣便是使用其餘參數的功能。
    上面剛好有提到，函式的 arguments 參數，而其餘參數其實就跟 arguments 參數非常相像，就是將所有參數，使用陣列包起來呈現，而這兩個寫法主要差別有兩點：
    ​
  • arguments 是類陣列、其餘參數 是真正的陣列。
  • 有寫上自定義參數時 arguments 並不會自動配合參數給予剩餘值，而其餘參數寫法會自動調配。
    ​
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 其餘參數，顯示剩餘參數的所有值。
    function Fn1( num, ...arg  ){
        console.log(num, arg) // 1 , [2, 3]
    }
    Fn1(1,2,3)
    ​
    // arguments 只會顯示該函式所有參數，不會自動調配。
    function Fn2( num, ...arg  ){
        console.log(num, arg) // 1  [1, 2, 3]
    }
    Fn2(1,2,3)
    ​
    ​

    參考文獻

  • 鐵人賽：JavaScript 展開與其餘