变量解构赋值

注：内容来自阮一峰老师的书 ECMAScript 6 入门

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
let [a, b, c] = [1, 2, 3];
更高级的用法:

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

如果解构不成功，变量的值就等于undefined。let [foo] = [];foo的值会等于undefined
如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。let [foo] = 1;报错

对于 Set 结构，也可以使用数组的解构赋值。let [x, y, z] = new Set(['a', 'b', 'c']);

解构赋值允许指定默认值。let [foo = true] = [];注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值.所以，只有当一个数组成员严格等于undefined，默认值才会生效。

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

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

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('aaa');
}

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

上面代码中，因为x能取到值，所以函数f根本不会执行。
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

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

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

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

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

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

这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样

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

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

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

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

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

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

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

上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题

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

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象.
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错

最后编辑于：2018.01.05 12:26:33