4.变量的解构赋值 4.变量的解构赋值

1.数组的解构基本用法 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]]; foo // 1 bar // 2 baz // 3let [ , , third] = ["foo", "bar", "baz"]; third // "baz"let [x, , y] = [1, 2, 3]; x // 1 y // 3let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4]let [x, y, ...z] = ['a']; x // "a" y // undefined z // []

如果解构不成功，变量的值就等于undefined。

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

以上两种情况都属于解构不成功，那么foo就会等于undefined。
另一种情况就是不完全解构，就是等号左边的模式，只匹配一部分等号右边数组，这种情况解构仍然可以完成。

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

上面两个例子，都属于不完全解构，但是可以成功。
这是重点如果等号右边的不是数组，（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。

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

上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。
对于 Set 结构，也可以使用数组的解构赋值.

let [x, y, z] = new Set(['a', 'b', 'c']); x // "a"

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

function* fibs() { let a = 0; let b = 1; while (true) { yield a; [a, b] = [b, a + b]; } }let [first, second, third, fourth, fifth, sixth] = fibs(); sixth // 5

上面代码中，fibs是一个 Generator 函数（参见《Generator 函数》一章），原生具有 Iterator 接口。解构赋值会依次从这个接口获取值。
默认值解构赋值允许指定默认值。

let [foo = true] = []; foo // truelet [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

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

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

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() { console.log('aaa'); }let [x = f()] = [1];

上面代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码。

let x; if ([1][0] === undefined) { x = f(); } else { x = [1][0]; }

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

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 let [x = y, y = 1] = []; // ReferenceError

上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明。
2.对象的解构解构不仅可以用于数组，还可以用于对象。

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

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

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

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。
如果变量名与属性名不一致，必须写成下面这样。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa"let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world'

这实际上说明，对象的解构赋值是下面形式的简写（参见《对象的扩展》一章）。

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

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

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

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
注意，采用这种写法时，变量的声明和赋值是一体的。对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。

let foo; let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"let baz; let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

上面代码中，解构赋值的变量都会重新声明，所以报错了。不过，因为var命令允许重新声明，所以这个错误只会在使用let和const命令时出现。如果没有第二个let命令，上面的代码就不会报错。

let foo; ({foo} = {foo: 1}); // 成功let baz; ({bar: baz} = {bar: 1}); // 成功

上面代码中，let命令下面一行的圆括号是必须的，否则会报错。因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句。
和数组一样，解构也可以用于嵌套结构的对象。

let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World"

注意，这时p是模式，不是变量，因此不会被赋值。

var node = { loc: { start: { line: 1, column: 5 } } }; var { loc: { start: { line }} } = node; line // 1 loc// error: loc is undefined start // error: start is undefined

上面代码中，只有line是变量，loc和start都是模式，不会被赋值。
下面是嵌套赋值的例子。

let obj = {}; let arr = []; ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }); obj // {prop:123} arr // [true]

对象的解构也可以指定默认值。

var {x = 3} = {}; x // 3var {x, y = 5} = {x: 1}; x // 1 y // 5var {x:y = 3} = {}; y // 3var {x:y = 3} = {x: 5}; y // 5var { message: msg = 'Something went wrong' } = {}; msg // "Something went wrong"

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