ES6之解构赋值
文章目录
简介
解构赋值是对赋值运算符的扩展，是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
以前想提取对象里的属性需要这么做：
const obj = {
name: '张三',
age: 22,
gender: '男',
doing: {
morning: '摸鱼'
}
}
const name = obj.name
const age = obj.age
const gender = obj.gender
const morning = obj.doing.morning
console.log(name, age, gender, morning) // 张三 22 男 摸鱼
现在可以使用ES6新增的解构赋值语法：
const obj = {
name: '张三',
age: 22,
gender: '男',
doing: {
morning: '摸鱼'
}
};
const { name, age, gender } = obj;
console.log(name, age, gender); // 张三 22 男
// 解构重名
const { name: myname } = obj;
console.log(myname); // 张三
// 嵌套解构
const { doing: { morning } } = obj;
console.log(morning); // 摸鱼
数组的解构赋值
1. 结构赋值可以嵌套的
var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1,3.2 ] ];
console.log(c1);//结果：c1的值为3.1
console.log(c2);//结果：c2的值为3.2
如我们的预料，数组中即使再嵌套另一个数组，结构赋值也能为我们的变量准确的赋值，c1和c2的值分别为3.1 , 3.2，也就是赋值成功。
2. 不完全解构
var [a,b,c] = [1,2];
console.log(a);// 1
console.log(b);// 2
console.log(c);// undefined
当左边的模式（你可以理解为格式）与右边不完全一样的时候，那么赋值过程中，只会给模式匹配成功的部分的变量赋值，例如：变量c没有在右边找到匹配的模式，所以无法进行赋值，但这并不影响变量a和变量b的赋值，因为它们在右边找到与之匹配的模式，这种叫做不完全解构。解构不成功，变量的值就等于undefined。相当于只声明了变量c，但是没赋值。
3. 允许设定默认值
var [a,b,c=3] = [1,2];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3
例子中变量c已经指定默认值为3，即使右侧没有与之对应的值赋给它也没关系，它都可以成功赋值为3，如果你想覆盖默认值3，只需赋一个有效的值即可。如下：
var [a,b,c=3] =[1,2,4];
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为4
这个时候默认值3会被新的值4覆盖，c的值为4；注意：当新的值为undefined的时候，是不会覆盖默认值的。
对象的解构赋值
对象的解构赋值跟数组的解构赋值很类似，我们来看一段小代码：
var { a,b,c} = {"a":1,"b":2,"c":3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
这段例子的代码是不是跟数组的解构赋值很相似，只不过是数组换成了对象。但是两者有一个不同的地方，我们对上面的代码稍做修改：
var { a,b,c } = {"a":1,"c":3,"b":2};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
我把右侧的对象属性b和属性c的位置进行了调换，但这并不会影响赋值的结果，变量b和变量c的值不会改变，依然是b为2，c为3。这就告诉我们对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。
如果变量找不到与其名字相同的属性，就会赋值不成功，如下面的例子：
var { a } = {"b":2};
console.log(a);//结果：a的值为undefined
变量a在右侧找不到与之名字匹配的属性a，所以变量a赋值不成功，a的值为undefined。
但也不是完全没有办法补救的，如果你想给一个变量名与属性名不一样的变量解构赋值，可以这样写：
var { b:a } = {"b":2};
console.log(a);//结果：a的值为2
这样变量a同样可以赋值成功，a的值最终为2。
对象的解构赋值的用法与数组的解构赋值也很类似：
1、对象解构赋值也可以嵌套
var {a:{b}} = {"a":{"b":1}};
console.log(b);//结果：b的值为1
2、可以指定默认值
var {a,b=2} = {"a":1};
console.log(b);//结果：b的值为默认值2
字符串的解构赋值
除了对象和数组可以解构赋值外，字符串也可以这么玩，看看下面的例子：
var [a,b,c,d] = "一二三四";
console.log(a);//一
console.log(b);//二
console.log(c);//三
console.log(d);//四
这是因为在解构赋值的过程中，字符串被转换成了一个类似数组的对象。变量a，b，c，d都分别赋上了对应的值。
解构赋值的用途
1.交换变量的值
传统做法最常用的是引入第三个变量来临时存放，如下：
var x = 1;
var y = 2;
var z = x;//第三个变量临时存放x的值
x = y; //把y的值赋给x；
y = z; //把z的值赋值给y；
console.log(x); // 2
console.log(y); // 1
但是有了解构赋值，想交换两个变量的值就简单多了， 简单的一句代码即可成功交换x，y的值。看下面的代码：
var x = 1;
var y = 2;
[x,y] = [y,x];
console.log(x); // 2
console.log(y); // 1
2. 提取函数返回的多个值
函数只能返回一个值，我们可以将多个值装在一个数组或者对象中，再用解构赋值快速提取其中的值。
将demo函数的运行结果直接通过结构赋值赋给变量name和age，实现快速的提取对应的值。
function demo(){
return {"name":"张三","age":22}
}
var {name,age} = demo();
console.log(name);// 张三
console.log(age);// 22
3. 定义函数参数
通过这种写法， 很方便就能提取JSON对象中想要的参数，例如案例中，我们只需要获取实参中的：a，b，c，而不需要关其他的参数，比如：d或者其他更多的参数。
function demo({a,b,c}){
console.log("姓名："+ a);
console.log("身高："+ b);
console.log("体重："+ c);
}
demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});
4. 函数参数的默认值
传统的参数默认值的实现方式是，先判断该参数是否为undefined，如果是代表没传，需要手动给它赋一个值，如：
function demo(a) {
var name;
if (a === undefined) { //判断参数书否是否传值
name = "张三"; //没传，赋默认值
} else {
name = a;
}
console.log(name);
}
demo(); // 张三
但是有了解构赋值，一切都变得简单很多！看下面的代码：
function demo({ name = "张三" }) {
console.log(name);
}
demo({}); // 张三
上面的代码给我们展示了通过解构赋值设定函数参数的默认值，简洁地代码即可实现。函数调用的时候没有传入对应的name参数，此时name就会使用默认值：“张三”，是不是很简洁很方便…
当然ES6也新增了默认参数：
function demo(name = "张三") {
console.log(name);
}
demo(); // 张三
以上介绍了解构赋值的4个用途，你是不是也感觉到了它给我们带来的方便，它使我们的代码量大大的减少，并且语法十分清晰，增加了代码的可读性和表现力。
总结
解构赋值给我们一种新的变量赋值方式，主要可以利用数组解构赋值和对象解构赋值。它的用途包括：交换变量值，提取函数返回值，函数参数定义，默认值设定等等，都给我们编程带来便利，在未来的代码中会见到越来越多人使用这个新特性。
