ES6新特性（1）解构赋值：对象的解构赋值，拓展运算符

一 前言：

在前后端交互的过程中，我们要处理大量的数组。在没有解构赋值之前处理后端返回的数据，比较的麻烦。解构赋值：打破数据的结构，将数据拆分取值的过程。

 

二 案例

1.对象的结构赋值

const player={
				nickName:'shaonianla',
				master:'年少有为',
				skill:[
					{
						skillName:'排山倒海',
						mp:1000,
						time:3000
					},
					{
						skillName:'葵花宝典',
						mp:1000,
						time:3000
					},{
						skillName:'隔山打牛',
						mp:1000,
						time:3000
					},
				]
			};
			
			const {nickName}=player;
			const {master}=player;
			const {skill:[skill1,{skillName},{skillName:sklName}]}=player;

讲解：

• 在进行对象的解构赋值的时候，变量名通过大括号{ } 包括，变量名要和结构数据里面的变量名一致，例如const {nickName}=player; nickName对应的就是player里面的nickName。
• const {skill:[skill1,{skillName},{skillName:sklName}]}=player;这一段用skill:将player中的数组进行展开，skill1取的是数组中的第一个对象，{skillName}指的是将第二个对象中的skillName取出。那么问题来了，我们定义的数据类型是const，是不能重复声明的，所以在取第三个对象的时候，我们{skillName:sklName}使用这种方式，对去除的变量进行重新的声明赋值，等于创建了一个sklName的变量。

2.解构赋值结合拓展运算符的使用

const obj={
				name:"少年啦",
				age:18,
				sex:"man"
			};
			
			const {name,...oth}=obj;
			console.log(oth);
			
			const obj1={
				summery:'年轻但没钱',
				...obj
			};
			
			console.log(obj1)

讲解：

• 在这里我们定义了两个变量，obj和obj1。首先我们通过const {name,...oth}=obj;对obj进行解构，然后分别赋值给name,和oth，这里的oth并不是一个关键字，而是我们自己定义的一个变量名。通过拓展运算符赋值为一个新的对象，oth所得到的变量值是{age:18,sex:"man"}。
• 在obj1中，我们直接在对象中使用拓展运算符将obj中的内容展开放到了obj1中。得到的变量值是{summery:'年轻但没钱',name:"少年啦",age:18,sex:"man"};

思路延伸：

const obj={
				name:"少年啦",
				age:18,
				sex:"man"
			};
			
			const {name,...oth}=obj;
			console.log(oth);
			
			const obj1={
				age:23,
				summery:'年轻但没钱',
				...obj
			};
			
			console.log(obj1)

TIPS:在这段代码中，obj,和obj1都有同样的变量age，那么在进行拓展运算符进行解构赋值之后，obj1中的age会被obj中的值所覆盖。

3.如何对已经声明的变量进行解构赋值

           let price;
		const shop1={
				name:'酱爆猪蹄',
				price:22
			};
			
			({price}=shop1);

讲解：

• 在这里，我们首先声明了一个变量price,很多人可能想为什么在对已经声明的变量进行赋值的时候要加一对括号，因为{price}=shop1，会被解读为给一个块级作用域进行赋值，所以需要通过括号括起进行解构赋值，({price}=shop1)。不过通常也不建议大家进行这样的写法。而是直接通过let {price}=shop1的方式进行解构赋值。

4.解构赋值的默认值

let girlFriend={
				name;'迪丽热巴',
				age:25
			};
			
			let {name,age=21,hobby=['吃','少年啦']}=girlFriend;

讲解：

• 在变量girlFriend中，并没有hobby这一属性，但是我们在渲染的页面中需要展示，那么我们可以在解构赋值中给定义一个默认的变量。
• 但是我们发现age是存在的，也给了默认值，那么在进行解构赋值的时候，age默认值将会被覆盖为25。

5.提取对象的属性

const {name,hobby:[hobby1],hobby}={
				name:'少年啦',
				hobby:['学习','吃饭']
			}

讲解：

• 在这里，hobby1取到的值是‘学习’，hobby取到的值是['学习','吃饭']

6.使用对象传入乱序的函数参数

function Request({
				url,
				data,
				type='get'
			}){
				
			}

讲解：

• 我们在使用ajax进行网络请求的时候，通常需要对请求的类型进行判断，我们在定义函数参数时默认的给type赋值为get。

7.获取多个  函数的返回值

function getUserInfo(userId){
				//..ajax
				return{
					status:true,
					data:{
						name:'小白'
					},
					msg:'请求成功'
				}
			}
			
			const {status,data,msg}=getUserInfo(123);

讲解：

• 对函数中返回的参数直接进行解构赋值。

三 总结

csdn貌似对我的ide不够友好，排版都是乱的。将就着看吧，下回记录数组的解构赋值,顺便换个ide