「Vue.js 學習筆記 Day10」- ES6（展開與其餘）
程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！
上一篇我們認識 let 、const 宣告方式的差異，那這一篇內容將著重在介紹什麼是 ES6 的展開與其餘。
何謂展開與其餘
展開運算子 (spread operator) 及 其餘運算子 (rest operator，或稱之其餘參數)，這兩個運算符皆有個兩個特點，包含（1）與陣列有關、（2）都是以 ... 符號作為資料表示。
接下來，我們將優先介紹展開運算子 (spread operator) 的內容。
展開運算子 (spread operator)
陣列合併
過往想要合併兩筆陣列資料，通常會採用 concat 語法來合併陣列，如下圖程式碼：
不過在 ES6 當中，我們會使用展開語法來完成資料合併，如下圖程式碼：
結果如下：
以上，這就是最基礎的展開語法的概念。
淺層複製 (shallow copy)
還記得我們之前有提到物件和陣列都會有傳參考的特性嗎？
因此，當我們將 teamA 值賦予至 teamB 值時，若是修改其中一個值，自然也會連帶影響另一個值，資料跟著一起改變。
因此，此時的 teamA 與 teamB 都會是四筆資料。
不過若是使用展開語法來複製資料，則不會互相影響，原因是因為展開運算子，它是一個一個將值寫入新的陣列當中，兩者是獨立事件，互不影響。
結果如下：
以上，這就是淺層複製在展開語法應用的概念。
類陣列案例介紹
接下來，就讓我們透過兩個小案例來分享吧～
如何使用展開語法轉換 DOM 元素為類陣列
當我們在操作 DOM 元素時，若document.querySelectorAll取出一個值，此時，這個 doms 屬於於非陣列的內容。
不過，我們也可以透過展開語法，將 DOM 元素轉換為陣列使用。
首先，將原本的 doms 已展開語法賦予至一個 newDoms 新變數，將其轉變類陣列，接著我們就可以在 newDoms 新變數上使用任何的陣列方法囉。
結果如下：
類陣列數字加總
另外，讓我們來看一個相對複雜的案例，如何透過類陣列實踐數字的加總。
重點可聚焦在下列幾個步驟：
Step1：首先將目光放在 function countTotalMoney 的函式。
・Step1–1：宣告 arg 變數，並賦予一個 [...arguments] 的類陣列，以便由外部傳入資料使用。
・Step1–2：宣告 sum 變數，負責處理arg 變數當中的數字加總。
・Step1–3：cosole.log（sum）變數的結果。
Step2：引用 function countTotalMoney ，並隨機放入不同的變數與數字，此時，則會透過 [...arguments] 類陣列將變數與數字傳入使用，經運算後，可分別得到 360 元 和 667 元的結果。
以上，這就是兩個展開語法的應用概念。
其餘運算子 (rest operator）
其餘運算子，又稱其餘參數，而它是一個真正的陣列，它會負責儲存剩下的資料內容，讓我們來看一個案例吧～～～
透過 function morePlayers 函式，可以看到 jay 會對應到 周董 ， chia 會對應到 恰恰 ，但是剩餘資料並沒有地方儲存，因此，他們會統一儲存到 ...others 陣列，以利後續的使用。
結果如下：
結語
當初學習到展開運算子(spread operator) 及其餘運算子 (rest operator ）的內容時，總是黑人問號滿天飛，不過經過實例操作和撰寫筆記之後，每每總能再次加深了自己的印象。
而下一篇將接著介紹 ES6 當中的解構賦值，敬請期待。
謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D
