简介

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

一、数组的结构赋值

基本用法

以前，我们为变量赋值，只能是直接指定值

let a = 1;
let b = 2;
let c = 3;

然而现在，ES6 中则允许写成下面这样

let [a, b, c] = [1, 2, 3];

以上代码中表示了，可以从数组中提取值，按对应的位置，对变量赋值

let [foo, [[bar], baz]] = [1, [[2], 3]]
console.log(foo); // 1 
console.log(bar); // 2
console.log(baz); // 3

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

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

以上的解构例子表示了其本质：只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let [foo] = [];
let [bar, foo] = [1];

以上代码中，解构没有是没有成功的，则变量 foo 的值都会等于 undefined

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

以上代码中，解构是不完整的，就是等号左边只匹配了一部分右边的数组。这种情况解构依然是可以成功的。

需要注意的是，等号右边是不可以遍历的结构，那么就会报错了，如下：

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

默认值

解构赋值是允许指定默认值的

let [foo = true] = [];
console.log(foo); // true

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

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

如果其默认值是一个表达式，则只有在使用到的时候才会求值。

二、对象的解构赋值

基本用法

解构不仅可以用于数组，还可以用于对象。 但是，他们有一点是不同的，就是数组的元素是需要我们按照顺序去排列的，变量的取值是由他的位置来决定的。而对象的则没有这个要求，只要是变量名字和属性匹配就可以取到正确的值。如果解构失败，变量的值也是等于 undefined。如下：

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

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

对象的解构赋值其实也是下面形式的简写

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

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

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

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

默认值

对象解构的默认值同数组一样，生效的条件也是，对象的属性值严格等于 undefined。如下：

let { foo = 1 } = {}
console.log(foo) // 1

注意点

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

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

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

以上代码中写法之所以会报错，是因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。所以，将整个解构赋值语句，放在一个圆括号里面，就可以正确的执行。

2. 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

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

以上代码中对数组进行了对象解构，数组 arr 的下标 0 对应的值是 1 ，[arr.length - 1] 则就是对应了下标 2 ，值是 3 。

3. 解构赋值允许等号左边的模式之中，不放置任何变量名。因此，我们可以写出非常古怪的赋值表达式，虽然毫无意义，但是语法是合法的，可以执行。如下：

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

三、字符串的解构赋值

字符串也可以解构赋值，是因为字符串被转换成了一个类似数组的对象。如下：

const [a, b, c, d, e] = 'hello';
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
console.log(let); // 5

四、数值和布尔值的解构赋值

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。

let { toString: x } = 123;
x === Number.prototype.toString // true
let { toString: y } = true;
y === Boolean.prototype.toString // true

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

以上代码中，因为数值和布尔值的包装对象都有 toString 属性，因此变量 x 和 y 都能取到值。由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错。

五、函数参数的解构赋值

函数的参数也可以使用解构赋值。

function fun([x, y]) {
    console.log(x + y);
}
fun([1, 2]); // 3

以上代码中，函数 fun 的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量 x 和 y。对于函数内部的代码来说，它们能感受到的参数就是 x 和 y。

下面则是另一个例子。

const arr = [[1, 2], [3, 4]].map(([a, b]) => a + b);
console.log(arr); // [ 3, 7 ]