ES6学习——解构赋值

一.什么是解构赋值？

解构赋值可以理解为赋值操作的语法糖，它是针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。代码书写上言简意赅，语义明确，也方便了对象数据的读取操作。可以减少我们写赋值操作时的代码量。
ES6中只要有某种数据有iterator接口（也就是可以循环迭代），都可以进行数据的解构赋值。

二.使用

1.数组解构

{
	let a,b;
	[a,b] = [1,2];
	console.log(a,b)//输出1，2
}

如果有一个元素定义了，没有赋值：

	let a,b,c;
	[a,b] = [1,2];
	console.log(a,b,c)//输出1,2,undefined

上述例子中，如果想让c有值，可以给c赋一个默认值：

	let a,b,c;
	[a,b,c = 6] = [1,2];
	console.log(a,b,c)//输出1,2,6

如果c也解构赋值了，就会覆盖默认值：

	let a,b,c;
	[a,b,c = 6] = [1,2,3];
	console.log(a,b,c)//输出1,2,3

如果想分割数组：

{
	let a,other;
	[a,...other] =[1,2,3]
	console.log(a);//输出1
	console.log(other)//输出[2，3]
}

如果只想要数组中的某个数据，可以通过写一个逗号作为占位符来实现，如：

	let a,b;
	[a,,b] =[1,2,3]
	console.log(a,b);//输出1,3

2.对象解构

	let a,b;
	({a,b} = {a:1,b:2});
	console.log(a,b)//输出1,2

如果不想用规定的属性名，想用自定义的属性名：

	let num1,num2;
	({a:num1,b:num2} = {a:1,b:2});
	console.log(num1,num2)//输出1,2

三.常见使用场景

在项目中，常见的就是后端向前端返回JSON对象，前端想从中获取自己有用的值（解构后端返回的JSON数据），就需要进行解构赋值：

function fn(){
	return{
		"name":"Tim",
		"nameList":[{
			"name":"Mary"
		}]
	}
}
let b = fn();
let {name:person,nameList:[{name:otherperson}]} = b
console.log(person,otherperson)