ECMAScript 6 变量的解构赋值

由 youj 创建， 最后一次修改 2016-09-20 数组的解构赋值基本用法ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。var a = 1;var b = 2;var c = 3;ES6允许写成下面这样。var [a, b, c] = [1, 2, 3];上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3let [head, ...tail] = [1, 2, 3, 4];head // 1tail // [2, 3, 4]let [x, y, ...z] = ['a'];x // "a"y // undefinedz // []如果解构不成功，变量的值就等于undefined。var [foo] = [];var [bar, foo] = [1];以上两种情况都属于解构不成功，foo的值都会等于undefined。另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。let [x, y] = [1, 2, 3];x // 1y // 2let [a, [b], d] = [1, [2, 3], 4];a // 1b // 2d // 4上面两个例子，都属于不完全解构，但是可以成功。如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。// 报错let [foo] = 1;let [foo] = false;let [foo] = NaN;let [foo] = undefined;let [foo] = null;let [foo] = {};上面的表达式都会报错，因为等号右边的值，要么转为对象以后不具备Iterator接口（前五个表达式），要么本身就不具备Iterator接口（最后一个表达式）。解构赋值不仅适用于var命令，也适用于let和const命令。var [v1, v2, ..., vN ] = array;let [v1, v2, ..., vN ] = array;const [v1, v2, ..., vN ] = array;对于Set结构，也可以使用数组的解构赋值。let [x, y, z] = new Set(["a", "b", "c"]);x // "a"事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。function* fibs() { var a = 0; var b = 1; while (true) { yield a; [a, b] = [b, a + b]; }}var [first, second, third, fourth, fifth, sixth] = fibs();sixth // 5上面代码中，fibs是一个Generator函数，原生具有Iterator接口。解构赋值会依次从这个接口获取值。默认值解构赋值允许指定默认值。var [foo = true] = [];foo // true[x, y = 'b'] = ['a']; // x='a', y='b'[x, y = 'b'] = ['a', undefined]; // x='a', y='b'注意，ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。var [x = 1] = [undefined];x // 1var [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=1let [x = 1, y = x] = [2]; // x=2; y=2let [x = 1, y = x] = [1, 2]; // x=1; y=2let [x = y, y = 1] = []; // ReferenceError上面最后一个表达式之所以会报错，是因为x用到默认值y时，y还没有声明。对象的解构赋值解构不仅可以用于数组，还可以用于对象。var { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。var { bar, foo } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"var { 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'这实际上说明，对象的解构赋值是下面形式的简写（参见《对象的扩展》一章）。var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。var { foo: baz } = { foo: "aaa", bar: "bbb" };baz // "aaa"foo // error: foo is not defined上面代码中，真正被赋值的是变量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命令下面一行的圆括号是必须的，否则会报错。因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句。和数组一样，解构也可以用于嵌套结构的对象。var obj = { p: [ 'Hello', { y: 'World' } ]};var { p: [x, { y }] } = obj;x // "Hello"y // "World"注意，这时p是模式，不是变量，因此不会被赋值。var node = { loc: { start: { line: 1, column: 5 } }};var { loc: { start: { line }} } = n