關於 Destructuring assignment

前言

  最近查詢語法時發現 Destructuring assignment 不只可以用在陣列，在此把學習的過程做個紀錄。

內容

  範例如下

//
[a,b,...c] = [10,20,30,40];
console.log(c);//[30, 40]
//
const obj = { constA: 1, constB: 2 };
const { constA, constC } = obj;
console.log(constA);//1
console.log(constC);//undefined
//
const objA = { const1: 1, const2: { const3: 99 } };
const {
  const1,
  const2: { const3: const4 },
} = objA;

console.log(const4);//99
//Default value
const [ aA = 1] = []; 
const { bB = 2 } = { bB: undefined }; 
const { cC = 2 } = { cC: null }; 
console.log(aA);//1
console.log(bB);//2
console.log(cC);//null

第一個是常見的使用"..."的變數來承接變數，也是我原本就知道的用法，接著範例會用物件來 Destructuring assignment ，要注意的是物件的行為是對同名的變數進行賦值，所以"constC"是 undefiend ，接著會來對物件進行深層的 Destructuring assignment ，要注意"const4"這個變數是跟原本複製"objA"裡不太一樣，"objA"裡不需要"const4"這個變數的命名，最後範例是犯了預設值的狀況，第一個大概可以猜的到，由於右邊根本沒內容可以複製，所以"aA"是 1 ，接著在物件有預設值進行 Destructuring assignment ，發現賦值並未發生，"bB"是2，但在"cC"的賦值就發生了，所以可以得知在物件進行 Destructuring assignment 時，如果該變數是 undefined ，賦值是不會發生的。

參考資料

[ developer.mozilla.org ] Destructuring assignment