ES6系列 (02)：解构赋值

数组解构

基础用法

从数组中提取值，按照对应位置，对变量赋值

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

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

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

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

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

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

默认值

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

let [foo = true] = [];
foo // true

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

如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

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

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

对象解构

基础用法

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

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

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined  如果解构不成功，变量的值就等于`undefined`

foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

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"}]

默认值

同数组相同，只有当一个对象成员严格等于undefined，默认值才会生效。

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

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

属性x等于null，因为null与undefined不严格相等，默认值就不会生效

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

交换值

交换变量的值是一种常见的操作，通常涉及创建临时变量。 下面是一个典型的例子：

let x = 'x';
let y = 'y';
let item = x;
x = y;
y = item;

// 然而，解构赋值能更简洁直观的进行此操作：
let x = 'x';
let y = 'y';
[x,y] = [y,x];

注意点

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

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

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

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

参考文档

阮一峰 变量的解构赋值