Destructuring (解構賦值)是es6中很常用的語法 用處是不用點(.)來點(.)去，直接把Object中的值化為實際變量來使用

---

簡單的例子

var somdata = {
  id: "1",
  user_name: "Nandi"
};

// 舊式寫法

var user\_name = data.user\_name;
var id = data.id;

updateUsername(id, user_name);
...

// 利用 destructuring
const {
  id,
  user_name  
} = data;

updateUsername(id, user_name);

有時侯function中的參數也會用到destructuring

// without destructuring
function someFunc(data) {
  const param1 = data.param1;
  const param2 = data.param2;
  const param3 = data.param3;
  ......
}

// with destructuring
function someFunc({
  param1,
  param2,
  param3
}) {
  ......
}

這個寫法有一個好處 因為原本的寫法在method的參數當中你只知道傳進了data但卻沒有說明data的格式為何

利用Destructuring則可以把data的格式更清楚地列明，有效減少代碼的錯誤，亦提高了代碼的可讀性 但當destructring 配合default parameters來使用時就需要小心了

function printParam({
  param1 = "default_value1",
  param2 = "default_value2"
}) {
  console.log(param1);
  console.log(param2);
}

// 傳空的object進去沒問題
printParam({})
> default_value1
> default_value2

// 傳其中一個參數也沒問題
printParam({ param1: 'somedata' })
> somedata
> default_value2

// 這樣就出問題了
printParam();
> TypeError: Cannot destructure property `varA` of 'undefined' or 'null'.

原因是printParam中的default param是建基於你傳進去的object，而並不是之外的param 所以這樣寫的時侯需要加倍小心

正確的寫法應該是這樣  

//　正確寫法
function printParam({
  param1 = "default_value1",
  param2 = "default_value2"
} = {} ) {
  console.log(param1);
  console.log(param2);
}

> default_value1
> default_value2

這樣寫就會把本身要傳進去的object參數也建立一個預設值，當你什麼都沒傳進去時就會生成一個空的object 然後再把本身object中的參數按預設值再生成