ES6 - 解构赋值

通过模式匹配从数组或对象中提取值，使代码更加清晰美观
只要具有 Iterator 接口，就可以使用数组形式的解构赋值
可以指定默认值
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象

数组的解构赋值：

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

// 可以指定默认值
let [x, y = 'b'] = ['a']; 

对象的解构赋值：

数组和对象的解构都是通过属性名对应取值的，只是数组的结构使得它隐去了自己的属性名

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

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

let obj = {
  p: {
     x: 'World'
  }
};
let { p, p: {x} } = obj;  
// p = { x: 'world' }  x = 'world'

对象的结构赋值实际上是下面形式的简写：

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

错误的写法：

{x} = {x: 1};  // JS引擎会把 {x} 作为代码块去解释

// 需要改为：
({x} = {x: 1});

看个例子：

let {1: a, 0: b} = [2, 3]
console.log(a, b)  // 3 2

let [b, a] = {0: 2, 1: 3}
console.log(a, b)  // {(intermediate value)(intermediate value)} is not iterable

第一种通过 array[1] 这种方式拿值，所以可以取到
第二种 Iterator 的方式拿值，所以报错了
下面的情形也是同样的道理：

const [a, b, c] = 'cat';
a // "c"
b // "a"
c // "t"

let {length : len} = 'hello';
len // 5

作用

交换变量的值：

let x = 1, y = 2;
[x, y] = [y, x];

函数参数默认值：

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

参考

变量的解构赋值 - ECMAScript 6入门