【前端】（四）ES6新特性之解构赋值

什么是解构赋值

等号左右两边的格式一样，就可以将右边的值赋值给左边的变量，这种写法实质是“模式匹配”。
举个例子：
以前赋值:

var a = 1;
var b = 2;
var c = 3;

解构赋值:

var [a, b, c] = [1, 2, 3];

• 解构赋值不仅适用于var命令，也适用于let和const命令。
• 只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。
• 只要等号右边的值不是对象，就先将其转为对象。undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

用于数组时

要求：等号右边必须为数组

1. 基本用法：

var [a, b, c] = [1, 2, 3];

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

var [bar, foo] = [1];   //foo为undefined

3. 不完全结解构

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

4. 对于Set结构，也可以使用数组的解构赋值。

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

5. 设置默认值

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

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

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

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

用于对象时

1. 基本用法

var { foo, bar,fun } = { foo: "aaa", 
						bar: "bbb",
						fun:function(){console.log("aa")}
						 };
foo // "aaa"
bar // "bbb"
fun() // fun

2. 冒号设置属性别名

var { foo: a } = { foo: 'aaa', bar: 'bbb' };
a // "aaa"
foo // error: foo is not defined

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。foo是匹配的模式，a才是变量。真正被赋值的是变量a，而不是模式foo。

3. 不完全解构
   类似数组的解构赋值。
4. 默认值
   类似数组的解构赋值

字符串的解构赋值

字符串被转换成了一个类似数组的对象。

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

函数参数的解构赋值

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

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