2021-07-24-[筆記]解構賦值

前言：
解構賦值 ( Destructuring Assignment)是一個在 ES6 的新特性，目的用於提取陣列或物件中的資料變成獨立變數。

說明：

The Destructuring Assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals

這句後面的 mirrors the construction of array and object literals，代表這個語法的使用方式 - 如同鏡子一般，對映出陣列或物件字面的結構。也就是一種樣式(pattern)對映的語法。

白話文：會將右方的資料往左邊送，然後會一個位置對一個值 (但沒有像鏡子左右顛倒)。

圖片來源：六角學院卡斯伯老師-鐵人賽：ES6 解構賦值

常見使用情境

陣列解構賦值
物件解構賦
搭配函式的傳入參數使用

陣列解構賦值方法（Array Destructuring）

提示：陣列的解構賦值，必須注意到順序性
過去陣列內的元素在賦值的時候，只能透過直接給值的方式，像是下面這樣：

let list=[a,b];
let a=list[0];
let b=list[1];
console.log(a,b) //a,b

而在 ES6 世界中，我們可以這樣用，而這就是最基本陣列解構賦值方法
備註：解構賦值會將右方的資料往左邊送，然後會一個位置對一個值

第一種
let [a,b,c]=[1,2,3]
console.log(a,b,c) //1,2,3
變數 a = 1, b = 2, c = 3

第二種寫法
let number=[1,2,3];
let[andy,chunwen,jay]=number;
console.log(andy,chunwen,jay) //[1,2,3]

接著，我們開始來看不同案例摟～

情況一：當輸入變數多於所給的值
let [a,b,c,d]=[1,2,3]
console.log(a,b,c,d) //1,2,3,undefined

情況二：當輸入變數少於所給的值
let [a, ,c,d]=[1,2,3,4]
console.log(a,c,d) //1,3,4

情況三：陣列解構中賦予預設值
let [a, b, c = 4, d = 'Hi'] = [1, 2, 3];
console.log(a, b, c, d); // 1, 2, 3, "Hi"
說明：因為c後面已經有給值，所以輸出結果一樣為３。而 d 在後面沒有給值，就直接帶入了預設值，得到 “Hi"。

情況四：字串拆解
let str = '我好帥氣喔';
let [a,b,c,d]=str;
console.log(a,b,c,d);//我 好 帥 氣 

情況五：交換以下兩個變數
let Kaohsiung = '高雄';
let Taipei = '台北';
[Kaohsiung, Taipei]=[Taipei, Kaohsiung];
console.log(Kaohsiung, Taipei) 
//台北 高雄，解構賦值是從右到左

物件解構賦值

首先，必須強調一個觀念。物件的解構賦值強調的是屬性名稱，屬性名稱必須相互對應才能取到值，反之則會無法取值
基本方法如下：

物件解構  // 請取出物件內的兩個值到單一變數上
let family = {
  ming: '小明',
  jay: '杰倫',
};
let familyAll = { ...family }
console.log(familyAll);    //{ming: "小明", jay: "杰倫"}

let obj = {
  website: "pjchender",
  country: "Taiwan"
}

let {website, country} = obj;
console.log(website);  // pjchender
console.log(country);  // Taiwan

而上面寫法其實是縮寫，下面寫法才是完整寫法
let {website:website, country:country} = obj;

物件解構賦值原理如下：
它會根據前面的屬性名稱來對應要給的值，

1	但值其實是給冒號（：）後面的變數

，用圖來看像是這樣子：

ㄨ圖片來源：PJChender部落格

接著，我們了解觀念後再來看一個例子：

let GinyuTeam = {
  Ginyu: '基紐',
  Jeice: '吉斯',
  burter: '巴特',
}
let{Ginyu:andy, Jeice:candy } = GinyuTeam;
console.log(Ginyu,Jeice); //Ginyu is not defined
console.log(andy,candy);// 基紐 吉斯

說明：我們從這個例子，可以發現只有andy,candy這兩個變數會回傳正確值。也就是說，在物件解構賦值中，冒號前是用來對應物件的屬性名稱，冒號後才是真正建立的變數名稱和被賦值的對象。

相對的，當冒號前的屬性名稱對應不到物件中的屬性名稱時，則會出現 undefined。

test 和 Ginyu 屬性名並沒有相對應
let{test} = {Ginyu: "基紐"};
console.log(test);    // undefined

解構賦值其他例子

情境一：預設值
// 第一個會被賦值，第二個會用預設(由右至左賦值)
let [ming = '小明', jay = '杰倫'] = ['阿明'] 
console.log(ming,jay); //阿明 杰倫

let { family: ming = '小明' } = {}
console.log(ming) //小明

情境二：ES7+的物件屬性其餘運算符
// 請取出物件內的兩個值到單一變數上
let family = {
  ming: '小明',
  jay: '杰倫',
};
let familyAll = { ...family }
console.log(familyAll); //{ming: "小明", jay: "杰倫"}

結論：

陣列的解構賦值強調的是順序，而物件的解構賦值強調的則是屬性名稱，屬性名稱必須相互對應才能夠取得到值