【vue】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

   

【vue】es6 解构赋值--对象解构赋值

原文：https://www.cnblogs.com/websmile/p/11528527.html