什么是解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

数组的解构赋值

let [a, b, c] = [1, 2, 3];
console.log(a, b, c);
// 相当于
let a = 1;
let b = 2;
let c = 3;

其他复杂示例

let [a, [[b], c]] = [1, [[2], 3]];
console.log(a, b, c); // 1 2 3

let [, [[], d]] = [11, [[22], 33]];
console.log(d); // 33

let [e, ...f] = [1, 2, 3, 4];
console.log(e, f); // 1 [2, 3, 4]

let [g, h, ...i] = ['33'];
console.log(g, h, i); // 3 undefined []

let [j, k] = [1, 2, 3];
console.log(j, k); // 1 2

let [l, m] = new Set(['a', 'b', 'c']);
console.log(l, m); // a b

如果等号的右边不是数组,将会报错,下面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口，要么本身就不具备 Iterator 接口

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

只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

指定默认值

let [foo = true] = [];
console.log(foo); // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

// 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2

// x 用 y 做默认值时，y还没有声明。
let [x = y, y = 1] = []; // ReferenceError: y is not defined

ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于 undefined，默认值才会生效。

let [x = 1] = [undefined];
console.log(x); // 1

let [x = 1] = [null];
console.log(x); // null

对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值，如果解构时变量取不到值，则它的值就是 undefined

let { foo, bar, baz } = { foo: 'aaa', bar: 'bbb' };
// aaa bbb undefined
console.log(foo, bar, baz);

解构方法：相当于将对象的方法解构出来，赋给变量

let { log, sin, cos } = Math;

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

// 等同于
const { log: log } = console;
log('hello'); // hello

变量名与属性名不一致

let { foo: baz, bar: b } = { foo: 'aaa', bar: 'bbb' };
console.log(baz, b); // aaa bbb
console.log(foo, bar); // foo is not defined

如上述代码所示，console.log(foo, bar) 会发现 foo is not defined，这是因为对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

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

嵌套结构的赋值

下面代码有三次解构赋值，分别是对 loc、start、line 三个属性的解构赋值。注意，最后一次对 line 属性的解构赋值之中，只有 line 是变量，loc 和 start 都是模式，不是变量。

const node = {
  loc: {
    start: {
      line: 1,
      column: 5,
    },
  },
};

let {
  loc,
  loc: { start },
  loc: {
    start: { line },
  },
} = node;
line; // 1
loc; // Object {start: Object}
start; // Object {line: 1, column: 5}

解构赋值可以取到继承的属性

对象 obj1 的原型对象是 obj2。foo 属性不是 obj1 自身的属性，而是继承自 obj2 的属性，解构赋值可以取到这个属性。

const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);

const { foo } = obj1;
foo; // "bar"

默认值

默认值生效的条件是，对象的属性值严格等于 undefined。

var { x, y = 5 } = { x: 1 };
console.log(x, y); // 1 5

var { x: y = 3 } = {};
console.log(y, x); // 3  x is not defined

var { x: y = 3 } = { x: 5 };
console.log(y, x); // 5  x is not defined

var { x = 3 } = { x: undefined };
console.log(x); // 3

var { x = 3 } = { x: null };
console.log(x); // null

解构赋值要求等号右边是一个对象，所以如果等号右边是 undefined 或 null，就会报错，因为它们无法转为对象。

let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误

解构赋值必须是最后一个参数，否则会报错

let {
  ...x,
  y,
  z
} = someObject; // 句法错误
let {
  x,
  ...y,
  ...z
} = someObject; // 句法错误

扩展运算符的解构赋值，不能复制继承自原型对象的属性

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3; // { b: 2 }
o3.a; // undefined

解构赋值的拷贝是浅拷贝

如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b; // 2

字符串的解构赋值

const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); // h e l l o
let { length: len } = 'hello';
console.log(len); // 5

数值和布尔值的解构赋值

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错。

数值和布尔值的包装对象都有 toString 属性，因此变量 s 都能取到值。

let { toString: s } = 123;
s === Number.prototype.toString; // true

let { toString: s } = true;
s === Boolean.prototype.toString; // true

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