全栈之路——前端（一）：ES6之解构赋值

​
本文为电子书《ECMAScript 6 入门》：ES6入门教程学习笔记

1. 数组的解构赋值

ES6允许从数组(任意具有Iterator接口的数据结构)中提取值，按对应位置给变量赋值。

let [a, b, c] = [1, 2, 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

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

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

如果匹配失败，左边的变量就会被赋予undefined，如以下这种情况，foo会被赋予undefined：

let [foo] = [];
let [bar, foo] = [1];

但是允许不完全解构，也就是说等号左边的模式只匹配一部分等号右边的数组，在这种情况下依然可以成功解构：

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

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

也就是说，右边相对左边有冗余是可以被接受的，但是右边相对左边不能有缺失。

解构赋值允许指定默认值，当数组成员===undefined时，默认值会生效。

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

如果默认值是一个表达式，则只用要用到该表达式子的时候才会求值。

2. 对象的解构赋值

对于上面的数组来说，给变量的赋值取决于元素的顺序，而对对象来说，属性没有顺序，变量必须与属性的名字相同，才能正确赋值，如果解构失败会被赋值undefined：

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

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

也可以直接将某个对象赋值到另一对象对应的变量上：

let{ foo, bar, baz } = Qux;

就把Qux对象里的foo、bar、baz三个属性赋值到对应的变量上了。
甚至可以赋值方法：

const { log } = console;
log('hello')

会在控制台打印出hello。
如果变量名和属性名不同，则必须要这样写：

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

实际上说明，对象的解构赋值时下面形式的简写：

let { foo: foo, bar: bar } = { 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是模式，是一种用来描述如何从数据结构中提取属性的模板，不是变量，可以理解为取出obj对象中在p路径下的属性键值对赋给x和y变量，因此模式本身不会被赋值。如果p也要作为变量赋值，可以写成下面这样。

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

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

与数组相同，对象的解构赋值也可以指定默认值，具体规则也和数组解构赋值一样：

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

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

3. 字符串解构赋值

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

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

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

4. 数值和布尔值解构赋值

当进行解构赋值时，如果等号右边的值不是对象或数组，就将其转化为对象（包装类），这是JS的自动装箱机制：

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

Object.getPrototypeOf(123) === Number.prototype // true

Object.getPrototypeOf(true) === Boolean.prototype // true

undefined和null无法转化为对象，因此会报错。

5. 函数参数的解构赋值

function add([x, y]){
  return x + y;
}

add([1, 1]); // 2

有点抽象，其实解构赋值就发生在传入参数的那一刻，这个数组的成员被解构成了x和y这两个变量。
同样允许使用默认值：

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 1, y: 1}); // [1, 1]
move({x: 1}); // [1, 0]
move({}); // [0, 0]
move(); // [0, 0]

而这种情况下，则会得到不一样的结果，这是因为上面的代码是在为x和y这两个变量指定默认值，而下面的代码是在为move的参数执行默认值，因此需要参数为undefined才会生效。参数内的变量均为undefined不代表参数是undefined。

unction move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 1, y: 1}); // [1, 1]
move({x: 1}); // [1, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

最后，不建议在解构赋值中使用圆括号，除了赋值语句的非模式部分，其余在解构赋值中使用圆括号的情况都会导致报错。