【ES6 】ES6 解構賦值--對象解構賦值

對象的解構與數組有一個重要的不同。

數組的元素是按次序排列的，變量的取值由它的位置決定

而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

基本用法

• 　如果解構失敗，變量的值等於undefined。　

  let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
  foo // "aaa"
  bar // "bbb"
  
  let { baz } = { foo: 'aaa', bar: 'bbb' };
  baz // undefined

   

• 如果變量名與屬性名不一致，必須寫成下面這樣。

  let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
  baz // "aaa"
  foo // error: foo is not defined

  上面代碼中，foo是匹配的模式，baz才是變量。真正被賦值的是變量baz，而不是模式foo

對象解構默認值

• 默認值生效的條件是，對象的屬性值嚴格等於undefined。

  var {x = 3} = {};
  x // 3
  
  var {x, y = 5} = {x: 1};
  x // 1
  y // 5
  
  var {x: y = 3} = {};
  y // 3
  
  var {x: y = 3} = {x: 5};
  y // 5
  
  var { message: msg = 'Something went wrong' } = {};
  msg // "Something went wrong"
  
  var {x = 3} = {x: undefined};
  x // 3
  
  var {x = 3} = {x: null};
  x // null

• 如果要將一個已經聲明的變量用於解構賦值，必須非常小心。

  // 錯誤的寫法
  let x;
  {x} = {x: 1};
  // SyntaxError: syntax error上面代碼的寫法會報錯，
  //因為 JavaScript 引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。
  //只有不將大括號寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個問題。
  
  
  // 正確的寫法
  let x;
  ({x} = {x: 1});

• 解構賦值允許等號左邊的模式之中，不放置任何變量名。因此，可以寫出非常古怪的賦值表達式。

  ({} = [true, false]);
  ({} = 'abc');
  ({} = []);

  上面的表達式雖然毫無意義，但是語法是合法的，可以執行。

• 由於數組本質是特殊的對象，因此可以對數組進行對象屬性的解構

  let arr = [1, 2, 3];
  let {0 : first, [arr.length - 1] : last} = arr;
  first // 1
  last // 3