数组和对象的解构赋值

定义：从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

一、数组的解构赋值

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

/****************不完全解构，等号左边不完全等于右边，可成功******************/
let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

 1、解构不成功，变量的值就等于undefined

2、等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。

3、解构赋值允许指定默认值（<1>严格相等运算符（===），判断一个位置是否有值，所以，只有当一个数组成员严格等于undefined，默认值才会生效；<2>默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值；<3>默认值可以引用解构赋值的其他变量，但该变量必须已经声明）

// 以下情况报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

//默认值生效情况
let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null


//表达式惰性求值
function f() {
  console.log('aaa');
}

let [x = f()] = [1];   // x=1

二、对象的解构赋值

1、和数组解构赋值的区别

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

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

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

2、对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量

// 例一
let { log, sin, cos } = Math;

// 例二
const { log } = console;
log('hello') // hello

3、对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

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

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

4、如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

// 报错
let {foo: {bar}} = {baz: 'baz'};

//等号左边对象的foo属性，对应一个子对象。该子对象的bar属性，解构时会报错。原因很简单，因为foo这时等于undefined，再取子属性就会报错

默认值：

1.和数组一样，默认值生效的条件是，对象的属性值严格等于undefined

 1>要将一个已经声明的变量用于解构赋值，必须非常小心

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error




// 正确的写法
let x;
({x} = {x: 1});

2、oh may Gad!!字符串也可以解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

3、数值和布尔值的解构赋值（先转为对象），由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

4、函数参数的解构赋值

6.圆括号问题。建议查看官方文档。