解构

数组的解构赋值

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

let [foo, [[bar], baz]] = [1, [[2], 3]]; // foo=1 bar=2 baz=3

// 这个很有用的方式
let [ , , third] = ["foo", "bar", "baz"]; // third='baz'
let [x, , y] = [1, 2, 3]; // x=1 y=3

// 如果解构不成功，变量的值就等于undefined
let [x, y, ...z] = ['a']; // x='a' y=undefined z=[]

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

对象的解构赋值

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

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

// 如果变量名与属性名不一致，必须写成下面这样
// 对象的解构赋值的内部机制，是先找到同名属性
// 然后再赋给对应的变量。真正被赋值的是后者，而不是前者
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; // baz='aaa'
let { foo: baz } = { foo: "aaa", bar: "bbb" }; // baz='aaa' foo会报错error: foo is not defined

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

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

// 指定默认值
let {x = 3} = {}; // x=3
let {x: y = 3} = {}; //y=3
let {x: y = 3} = {x: 5}; // y=5
let { message: msg = 'Something went wrong' } = {}; // msg="Something went wrong"
let {x = 3} = {x: undefined}; // x=3
let {x = 3} = {x: null}; // x=null

字符串的解构赋值

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

let [a, b, c, d, e] = 'hello'; // a='h' b='e' c='l' d='l' e='o'
let {length : len} = 'hello'; // len=5

参考

1. 数组的解构赋值 (opens new window)