解構賦值是 ES6 的語法糖，它可以縮短程式碼並且增加可閱讀性。
陣列解構
在以前要將陣列中的值取出來並賦予到其他變數上時，會這樣寫：
const ary = [1, 2, 3];
const a = ary[0];
const b = ary[1];
const c = ary[2];
數量一多時寫起來很麻煩，看起來也不是很好閱讀，而解構賦值可以幫我們解決這個問題。
在撰寫的時候如同上面所介紹解構賦值像是鏡子般將左邊對應右邊，所以在陣列使用時左邊的順序會對應右邊的順序。
const [a, b, c] = [1, 2, 3]; // a=1 b=2 c=3
// 也可以直接代變數
const ary = [1, 2, 3];
const [a, b, c] = ary; // a=1 b=2 c=3
而當對應到的值是空值時，則會回傳 undefined。
const [a, b, c] = [1, 2]; // a=1 b=2 c=undefined
如果想要選取特定位置的值，只需要將前面的變數空著。
const [, , a] = [1, 2, 3, 4]; // a=3
也可以用於交換變數裡面的值，在一次交換多個變數時很方便。
let banana = '香蕉';
let papaya = '木瓜';
let apple = '蘋果';
[banana, papaya, apple] = [apple, banana, papaya];
// banana '蘋果'
// papaya '香蕉'
// apple '木瓜'
如果代入字串則會拆解成一個個字元。
const [a, b, c] = '好棒棒'; // a='好' b='棒' c='棒'
你也可以將複雜的多維陣列拆解到想要賦予的變數上：
const [a, [b, , [c, d]], e] =
['最外層1', ['最二層1', '最二層2', [['最深層1', '最深層2'], '最三層']], '最外層2'];
// a='最外層1' b='最二層1' c=['最深層1', '最深層2']
// d=最三層 e=最外層2
結合其餘參數
如果想將陣列中的其中幾個資料個別賦予到變數上，而剩下的資料組成一個陣列，可以結合運用其餘參數。
const [a, ...others] = [1, 2, 3]; // a=1 others=[2, 3]
物件解構
在物件解構中因為物件沒有索引值，在此是用屬性名稱來做對應，並且沒有順序性。所對應的屬性名稱會是變數名稱。
const obj = {
dog: 'kick',
person: 'calon',
child: 'john'
};
const {person} = obj; // person='calon'
const {dog, child} = obj; // dog='kick' child='john'dog
如果想要改變數名稱，只要在屬性名稱後面加上 :，然後在後面加上想要的變數名稱就行了。
const obj = {
dog: 'kick',
person: 'calon',
child: 'john'
};
const {person:classmate} = obj; // classmate='calon'
const {dog:pet, child} = obj; // pet='kick' child='john'
陣列與物件混合使用
遇到陣列與物件混合的情況，只要照著上述的觀念也能輕鬆的將想要的值解構出來：
const obj = {
dogs: ['kick', 'kuro', 'muji'],
parents: ['miya', 'bob'],
child: 'john'
};
const {dogs: [ , ...dogs], parents: [mom, dad], child} = obj;
// dogs=['kuro', 'muji'] mom='miya' dad='bob' child='john'
預設值
為了避免碰到沒有值而回傳 undefined 的狀況，我們可以使用 ES6 新增的預設值來避免：
const [a = 1, b = 2] = [3]; // a=3 b=2
const {breakfast = 'onigiri', lunch = 'noodle', dinner = 'salad'} =
{
breakfast: 'hamburger',
dinner: 'rice'
}; // breakfast='hamburger' lunch='noodle' dinner='rice'
應用在 function 參數
我們也可以在 function 的參數上解構賦值使用，方式和前面所介紹的一樣，陣列對應順序，物件則對應變數名稱。
function addUp([a = 0, b]){
return a + b;
};
addUp([]); // NaN
addUp([3, 4]); // 7
addUp(); // Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
function showName({teacher = 'bob', student}){
return `teacher is ${teacher}, and student is ${student}.`;
};
showName(); // Uncaught TypeError: Cannot destructure property 'teacher' of 'undefined' as it is undefined.
showName({}); // 'teacher is undefined, and student is bob.'
showName({teacher:'miya'}); // 'teacher is miya, and student is bob.'
showName({mom:'miya'}); // 'teacher is undefined, and student is bob.'
