【ES6】变量的解构赋值

1. 数组的结构赋值

  ES6允许从数组中题取值，按照对应位置，为变量赋值。数组的解构赋值存在一些特殊的情况：

• 解构不成功，变量的值等于undefined；
• 不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组（右边比左边多）。这时解构依然可以成功；
• 等号右边是不可遍历的结构（转化为对象之后不具有Iterator接口），解构报错。

  事实上，只要具有Iterator接口，都可以采用数组形式的解构赋值。比如下面这个例子：

//Generator函数
function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

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

  对于默认值（用=指定），有以下两个注意点：

• 如果默认值是一个表达式，表达式是惰性求值的，即要用到时才会求值；
• 默认值可以引用解构赋值的其他变量，前提是该变量必须已经被声明。

2. 对象的解构赋值

  对象与数组的区别在于，对象的属性没有顺序，所以必须变量与对象的属性同名，才能取到正确的值（顺序无影响）。如果解构失败，变量的值同样为undefined。

  对象的解构赋值，可以很方便的将现有对象的方法，赋值到某个变量：

//将Math对象的对数，正弦，余弦三个属性赋值给对应的变量
let { log, sin, cos } = Math;

//将console.log赋值到log变量
let { log } = console;
log("Hello");    //Hello

✨变量名如果与属性名不一致，则要增加模式匹配字段。

//变量与属性名不匹配，报错
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz //undefined

//使用模式匹配字段，正确
let { foo: baz } = {foo: 'aaa', bar: 'bbb' };
baz //'aaa'

  实际上，变量与属性名一致的情况实际上是省略了模式匹配字段。这也表明对象解构的内部机制是，先找到同名属性，再匹配给对应变量。被赋值的实际上是后者。

✨与数组一样，对象的解构也可以用于嵌套的对象。这种情况有三个需要注意的地方：

• 注意解构对象中究竟是变量还是模式。

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

//这里的p是模式
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

//这里的p也被作为变量赋值了
let { p, p: [x, { y }] } = obj;
p // ["Hello", {y: "World"}]

• 嵌套赋值可以赋值给对象的某一个属性/数组的某一个项。

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

obj // {prop:123}
arr // [true]

• 解构的嵌套的对象，如果取得到子属性，但父属性不存在，也会报错。

// 报错，因为此时父属性foo为undefined，再取子属性就会报错
let {foo: {bar}} = {baz: 'baz'};

• 对象的解构赋值可以取到继承的属性。

const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);   //obj2是obj1的原型对象（父对象）

const { foo } = obj1;
foo // "bar"（依旧可以取到父对象的属性）

  和数组一样，对象的解构赋值也可以设定默认值（用=指定），同样需要对象的属性值严格等于undefined。

✨对象的解构赋值有三个注意点：

• 将已经声明的变量进行解构赋值要小心，不能出现大括号开头的情况，因为这样ES6会把它理解为一个代码块而不是对象。需要把整个语句放在一对圆括号里面才能正常执行。
• 解构赋值允许等号左边的模式中不放任何的变量名。这样虽然毫无意义，但却是合法可执行的。
• 由于数组的本质是特殊的对象，因此可以对数组进行对象属性的解构。这种写法属于“属性名表达式”。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

3. 字符串，数值和布尔值的解构赋值

  解构赋值的规则是，只要等号右边不是数组或对象，就先转换为对象。由于undefined和null无法转换为对象，所以对他们解构赋值都会报错。

• 字符串被转化为一个类似数组的对象。他还有一个length属性，这个属性也可以用于解构赋值。

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

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

• 数值和布尔值可以取到包装对象的属性值。

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

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

4. 函数参数的解构赋值

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

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

  在上面的代码中，虽然传入的参数是数组形式的，但实际上数组参数在传入的瞬间被解构为变量x和y。对函数内部代码来说，他们能感受到的就是参数x和y。

  函数参数的解构也可以使用默认值，但是要注意区分是变量的默认值还是参数对象的默认值。

//使用 "=" 设置的是变量的默认值
function move({x = 0, y = 0} = {}) {
  return [x, y];
}

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

//使用 ":" 设置的是对象的默认值
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

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

5. 圆括号问题

  解构赋值虽然使用起来很方便，但解析起来很麻烦。对编译器来说，无法从一开始就知道究竟是模式和表达式。这使得圆括号的处理变得麻烦起来。ES6的规则是，只要有可能引起解构的歧义，就不使用圆括号。由于这条规则的复杂性，建议只要有可能，就不要在模式中放置圆括号。

• 不能使用圆括号的情况：变量声明语句、函数参数、赋值语句的模式。
• 可以使用的情况：赋值语句的非模式部分。

6. 解构赋值的用途

1. 交换变量的值，可以使用 [x, y] = [y, x]; 这种简明的语句了；

2. 函数如果要返回多个值，只能把他们放在一个数组或对象中返回，有了解构赋值，取出这些值就变得非常简单；

3. 解构赋值可以很方便的将函数的参数与变量对应起来；

4. 提取JSON数据方便了很多；

5. 指定函数参数的默认值方便了很多；

6. Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便；

7. 加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。