ES6-展開與其餘運算符

X13QQ
X13QQ
Published in
Dec 24, 2020

展開運算符,其餘運算符

展開運算符(Spread Operator)與其餘運算符(Rest Operator)是ES6中的其中兩種新特性,雖然這兩種特性的符號是⼀模⼀樣的,都是三個點(…),但使⽤的情況與意義不同。

  • 符號都是三個點(…)
  • 都是在陣列值運算 ⼀個是展開陣列中的值
  • ⼀個是集合其餘的值成為陣列

展開運算符(Spread Operator)

展開運算符是把⼀個陣列展開成個別的值的速寫語法,它只會在”陣列字⾯定義”與”函式呼叫”時使⽤

組合陣列

函式作為傳⼊參數值

可迭代(iterable)或與陣列相似(Array-like)的物件轉變為陣列

其餘運算符(Rest Operator)

其餘運算符是收集其餘的(剩餘的)這些值,轉變成⼀個陣列。

它會⽤在函式定義的傳⼊參數識別名定義 (其餘參數, Rest parameters),以及解構賦值時

其餘參數

其餘參數的設計有⼀個很明確的⽤途,就是要取代函式中那個隱藏”偽陣列”物件arguments

解構賦值(destructuring)時例子:

特別注意:

在使⽤解構賦值時⼀樣只能⽤⼀個其餘運算符,位置也只能放在最後⼀個。

ES7+的其餘屬性(Rest Properties)與展開屬性(Spread Properties)

物件上也會使⽤類似語法與符號(…),尤其是在React與Redux中。

這些都是還在制定中的ES7之後的草案標準,稱為其餘屬性(Rest Properties)與展開屬性(Spread Properties)。

撰寫建議

  • 不要使⽤函式中的arguments物件,總是使⽤其餘參數語法來取代它。
  • 不要在展開運算符與其餘運算符後⾯有空格,也就是與後⾯的識別名稱(傳⼊參數名稱、陣列名稱)之間 要緊接著。
  • ⽤展開運算符的語法來作拷⾙陣列。
  • ⽤展開運算符的語法來取代函式中的apply的語法,作不定個數傳⼊參數的函式呼叫。
  • ⽤展開運算符的語法來取代slice與concat⽅法的語法。
  • 優先使⽤物件展開運算符(object spread operator)的語法取代Object.assign,來作物件的淺拷⾙。

結論

  • 展開運算符: ⽤在陣列的字⾯⽂字定義裡⾯(例如[1, …b]),或是函式呼叫時(例如 func(…args))
  • 其餘運算符:⽤在函式的定義,裡⾯的傳⼊參數名稱定義時(例如function func(x, …y))。或是 在解構賦值時(例如const [x, …y] = [1,2,3])

--

--