Spread Operator 展開運算子

… 在javascript是代表什麼呢？

Photo by Alexandru Acea on Unsplash

一開始認識到 Spread Operator 就是因為它可以複製一個陣列或是物件，結果一查發現它的使用範圍其實很多，以下先列出會介紹的方法：

1. 複製或合併陣列
2. 使用 JS 內建的 Math function
3. 當成函式的 Arguments
4. 任何可迭代的項目使用

複製或合併陣列（ Copying an array or Concatenating arrays)：

今天本來要做的事情只有睡覺和打程式，但突然想建立一個今日的todoList，但不想改變today的陣列，這時候可以就可以用 Spread Operator 去複製 today 的陣列（如下第四行），並且新增代辦項目。
而此時如果突然想增加一個行為到 today 陣列中，是不會影響到 todoList 的陣列喔！因為 todoList 是已經被複製的陣列，和原先的 today 陣列已沒有任何關係，所以是不會修改到todoList的！（如下8~9行）

使用 JS 內建的 Math function

當想要找陣列中的最大值或最小值時，第一個想法就是使用 Math.max() 或Math.min() ，但是這兩個的方法的 Parameter 並不接受陣列形式，這時候也是個使用 Spread Operator 很好的時機，透過這個方法將陣列中的元素取出，展開成數值！

“When ...arr is used in the function call, it “expands” an iterable object arr into the list of arguments. “ — JavaScript.info

當成函式的 Arguments

如下的範例所示意，當你要依序給定function 的 argument 時，可以透過 Spread Operator 依序當成 argument 傳入 function 。

在第12行後，則是呈現出若原先 function 的 parameter 直接設定是 Spread Operator 的話，可以透過傳入 Spread Operator 並依照其數量而有不同的output結果。

任何可迭代的項目使用

這一個是看到文件上比較沒想過的使用方法，可以針對 iterable 做處理，一樣是透過把字串中的文字一個個展開放入陣列中，效果其實和 Array.from() 效果一樣，但是會比較建議使用Array.from() ，因為在用途上，Spread Operator 僅能處理 iterables ，但 Array.from() 的應用範圍卻包含了 array-likes（類陣列） and iterables ！

“The spread syntax internally uses iterators to gather elements, the same way as for..of does.” — JavaScript.info

其實 “…”不只是展開運算子(spread operator），有時候是被當作其餘運算子（rest operator）使用，下篇再來介紹其餘運算子該怎麼做吧！

推薦閱讀：
How to Use the Spread Operator (…) in JavaScript：https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab