ES实用的深度解构赋值方法
- ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
- 使用解构赋值可以将复杂的代码整理的更加干净整洁。
1.解构对象
在没有使用解构之前，想要确定对象中的某些属性，那么就需要从对象中获取属性然后赋值给变量，这样会让代码显得非常冗余，如下代码所示：
let obj = {name:"张三",age:22};
let name = obj.name;
let age = obj.age;
console.log(name,age);// 张三 22
1）基本解构格式
如果使用解构的话，只需要如下面格式所写即可，保持将变量名和对象属性名同名才可取到值。
let {name,age} = {name:"张三",age:22};
console.log(name,age);
2）变量别名
如果要解构的对象中的属性名和外部的名称重名了，将会报错，可以使用别名的方式进行解构，如下所示：
let name="王五";
let {name:newName,age} = {name:"张三",age:22};
console.log(newName,age);
3）变量默认值
如果目标对象属性中没有要解构的属性，不指定默认值，那么将会undefined，此时可以给解构变量写默认值，如下所示：
let {name,age,gender="男"} = {name:"张三",age:22};
console.log(name,age,gender);
此种为变量设置默认值的方法，常应用于函数参数中，加入调用函数时没传递参数，有可能会对函数运行造成错误，那就可以在形参位置进行对象解构，对变量指定默认值，如下代码所示：
function fn({name='李四',age=30}={}){console.log(name,age);
}
fn()
2.解构数组
解构数组和对象有些不同，解构对象的时候属性前后位置不影响，但是结构数组，需要按照索引顺序结构。
1）数组基础解构用法
如果在没有解构之前，需要拿到数组中的前3位字符串，那么只能按照下面这种按照索引值的方式定义变量，如下所示：
let arr = ["HTML5","JavaScript","Vue","React","NodeJS"];
let str1 = arr[0];
let str2 = arr[1];
let str3 = arr[2];
console.log(str1,str2,str3);// HTML5 JavaScript Vue
如果使用解构赋值的话，就可以展现位如下格式：
let [str1,str2,str3] = ["HTML5","JavaScript","Vue","React","NodeJS"];
console.log(str1,str2,str3);
基于这种特性，如果一次性想要定义多个变量，就可以使用这种解构的方式定义，相当于一次性定义了三个变量并对变量进行了赋值。
2）选择解构
数组的特性是按照索引值顺序执行的，如果只要取得数组最后几位，或者第几位，需要预留出其他值的位置，如下所示：
let [ , , , value1 ,value2] = ["HTML5","JavaScript","Vue","React","NodeJS"];
console.log(value1,value2);// React NodeJS
3）扩展运算符
在一个数组中解构，可以取得数组第一位，剩下的通过扩展运算符（展开运算符），统一放置到一个数组中，如下所示：
let [value,...other] = ["HTML5","JavaScript","Vue","React","NodeJS"];
console.log(value,other);// HTML5 ["JavaScript","Vue","React","NodeJS"]
4）默认值
同上面对象别名方式一致。
let [v1,v2,v3="Vue"] = ["HTML5","JavaScript"];
console.log(v1,v2,v3);// HTML5 JavaScript Vue
5）交换变量值
let name1 = "张三";
let name2 = "李四";
[name2,name1] = [name1,name2];
console.log(name1,name2);
3.解构混用
在实际开发中基本没有上面那种简单的结构，大多数都是数据结构比较复杂，用好了解构赋值才会让你的代码看起来更加整洁。
通过下面的示例演示一下混用解构的方法，以如下对象为例，想要获取代表作品works字段下面音乐作品music下的“鸡你太美”，应该如何操作：
let person = {name:"坤坤",age:25,like:['唱','跳','rap','篮球'],works:{music:['Wait Wait Wait','鸡你太美'],movies:['童话二分之一','鬼畜区常青树']},friend:['丞丞','大宝贝','大黑牛']
}
1）传统型
let result = person.works.music[1]
console.log(result);// 鸡你太美
2）浅层解构
let {works} =person
console.log(works.music[1]);
3）连续解构
let {works:{music}} =person
console.log(music[1]);
4）数组与对象混用
let {works:{music:[,result]}} =person
console.log(result);
5）解构+别名
let {works:{music:[,result],movies:newMov}} =person
console.log(result,newMov);
作者：咸虾米，如果对内容有更好的建议或者优化方案，请评论留言。