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);

作者：咸虾米，如果对内容有更好的建议或者优化方案，请评论留言。