「Vue.js 學習筆記 Day11」- ES6（解構賦值-陣列篇）
程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！
上一篇我們認識 ES6 的展開與其餘，這一篇內容將著重在介紹什麼是 ES6 的解構賦值（destructuring）的陣列篇。
概念簡介
我們可以把解構賦值想像成是鏡子的概念，將左方資料往左邊送，然後依照「順序」或「屬性」對上特定值，如同鏡射的概念，但不會左右顛倒。
而實務上的幫助在於透過更簡短的程式碼來達成相同效果，除了使用便利外，更能有效提升程式碼的閱讀性（聽起來好像很棒棒欸！）
解構賦值的應用與差異
解構賦值常用於陣列和物件當中，而陣列解構賦值（array destructuring）和物件解構賦值（object destructuring）兩者最大的差異為：
陣列的解構賦值強調的是「順序」，而物件的解構賦值強調的則是「屬性名稱」，屬性名稱必須相互對應才能夠取得到值。
究竟這是什麼意思，首先我們聚焦在「陣列解構賦值」，而「物件解構賦值」會在下一篇文章來介紹哦。
陣列解構賦值（array destructuring）
過往寫法
過去想要將陣列內的元素取出，賦與其他變數值的時候，只能透過一個一個給值的作法，程式碼如下圖：
ES6寫法
若是以 ES6 解構賦值時，程式碼則如下圖：
透過陣列解構賦值強調的「順序」概念，將變數依序傳入，如此，變數則會直接完成賦值 jay='周董' 、chia='恰恰' 、wang='大王' 。
當左方輸入的變數多於右方所給的值
顧名思義，多出來的那個變數會被賦予 undefined 的值，程式碼如下圖：
當左方輸入的變數小於右方所給的值
此時，只有被指定到的變數會有相對應的值，而少掉的變數則會直接空過來，程式碼如下圖：
Oh~no（恰恰不要退休阿）～～～～～～ＸＤ
接下來，多看幾個其他案例加深印象吧。
陣列解構（展開語法）
我們會將 team 的值一一賦予到變數上，因此，jay='周董' 、chia='恰恰' ，而此時剩餘的 team 值則會被賦予到 others 變數。
結果如下：
陣列解構（變數交換）
由於前面提到的解構賦值（鏡射）的概念，下面範例中直接將右邊的變數交換到左邊，可以看到是同時交換變數，所以在互換變數值上是非常方便的。
陣列解構（字串拆解）
如同前面提到陣列解構的「順序」特性，若是遇到字串則會將字串拆解成一個一個字元，並依序賦予到左方的變數。
結語
本篇內容，主要介紹「陣列解構賦值」與「物件解構賦值」的差異，同時，透過不同的小案例實際操作，相信有助於大家更理解「陣列解構賦值」。
而下一篇將接著介紹另一塊的「物件解構賦值」，敬請期待。
謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D
