ES6教程（三）对象的结构赋值

注意：
对象的解构与数组有一个重要的不同。
数组的元素是按次序排列的，变量的取值由它的位置决定；
而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

1. 简单例子

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
2. 属性不对应的例子

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
由于左边变量没有和右边对应的同名属性，因此取不到值，最后等于undefined。

如果变量名与属性名不一致，必须写成下面这样:
相当于foo是模式用来匹配，而baz才是真正要赋值的变量

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
实际上说明，对象的解构赋值是下面形式的简写:

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。

下面这句话是对象赋值的精髓：

中间的代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

3. 嵌套赋值

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
 
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
注意，这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
 
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
4. 多层嵌套赋值
始终注意冒号：左边的是模式，一定是和对象的属性相同的来进行匹配，冒号右边才是真正要赋值的变量，变量名可以不和对象属性名一样。

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
 
let { loc, loc: { start }, loc: { start: { line }} } = node;
loc  // Object {start: Object}
start // Object {line: 1, column: 5}
line // 1
第一个loc相当于loc:loc的缩写，因此匹配的是loc属性对应的值。

另一个复杂的例子：

let obj = {};
let arr = [];
 
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
 
obj // {prop:123}
arr // [true]
5. 默认值
默认值生效的条件是，对象的属性值严格等于undefined

var {x: y = 3} = {};
y // 3
 
var {x: y = 3} = {x: 5};
y // 5
--------------------- 
作者：weixin_33733810 
来源：CSDN 
原文：https://blog.csdn.net/weixin_33733810/article/details/87631829 
版权声明：本文为博主原创文章，转载请附上博文链接！