ES6语法 解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

1.数组的解构赋值

// 传统的赋值
let a = 1, 
    b = 2,
    c = 3;

//  解构赋值
let [a,b,c] = [1,2,3];

这种方式叫模式匹配的解构方式，只要等号两边的模式相同，左边的变量就会被赋右边对应的值，下面是数组嵌套的解构。

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

let [,,c] = [1,2,3];
c //3  忽略前面不感兴趣的值

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

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

let [a=1，b=2,c=a] = ['one',null];
a // one
b // null
c // one

上述代码左边的变量设置了默认值，但此时的a在右边是可以取到值 ’ one’的，所以a的默认值并不生效，b在右边的值是null，在javascript中null和undefined是不严格等的，所以b设置的默认值也不生效，而c在右边对应的值没有，也就是undefined，所以此时c取到了默认值 a，也就是’one’。

当右边不是数组时，将会报错

let [a] = 1; 
let [a] = undefined; 
let [a] = 'abc'; 
let [a] = {}; 
...

2. 对象的解构赋值

与数组的赋值方式不一样，对象没有顺序之分，变量名和属性名相同时才能取到值。

let {a,b} = {b:1,a:2};
a //2
b //1

在对象赋值中，真正被赋值的是属性名后面的变量，而不是前者，如以下。

let {a:x, b:y} = {a:1,b:2};
x //1
y //2
a // error:a is not defined

对象解构也可以嵌套。

let person={
	name:{
		firstName:'xiao',
		lastName:'ming'
	},
	age:10,
	sex:'male',
	friends:{
		xiaofang:{
			age:12
		},
		xiaogang:{
			sex:'male'
		}
	}
};
let {name,friends:{xiaofang:{age}},friends:{xiaogang}} = person;
name // {firstName: "xiao", lastName: "ming"}
age // 12
xiaogang //{sex: "male"}

注意，若提前声明了变量，赋值时需要用小括号括起来，否则会报错。

let a;
{a} = {a:２};  
a  // 报错

({a} = {a:２});
a  //２

3. 字符串的解构赋值

字符串被看做是一个类似数组的对象进行解构，同时，这个对象有length属性，所以可以获取到此对象的length。

let [a,b,c,d] = 'word';
a // w
b // o
c // r
d // d

let {length:len} = 'word';
len // 4

4.函数参数的解构赋值

函数参数的解构赋值看起来像传入了一个数组，而在函数内部解析的时候，就把数组解析成了对应的参数。如下代码：

function add([a,b]){
	return a+b;
}
add([1,2]);  // 3

同时参数也可以设置默认值

function add({a=1,b=1}){
	return a+b;
}
add({a:2,b:3}); //5