ES6语法——解构赋值

解构赋值

什么是解构赋值

• 解构赋值在语法上就是个赋值
• 解构：左边一种结构右边一种结构，左右一一对应进行赋值

解构赋值的分类

• 数组解构赋值 左右都是数组
• 对象解构赋值 * 左右都是对象*
• 字符串解构赋值 左右都是字符串，属于对象解构赋值类型
• 布尔值解构赋值 左右都是布尔值
• 函数参数解构赋值 数组解构赋值在函数参数上的应用
• 数值解构赋值 左右都是数值，属于对象解构赋值类型
  主要的是数组解构赋值和对象解构赋值

{
	let a, b, rest;
	[a,b] = [1,2];
	console.log(a,b);//1,2
}
{
	let a, b, rest;
	[a,b, ...rest] = [1,2,3,4,5,6];
	console.log(a,b,rest);//1,2,[3,4,5,6]
	//注意rest现在是一个数组//是数组解构赋值的一个特性
}
{
	let a, b
	{a,b} = {a:1, b:2}
	console.log(a,b)//1,2
}
//其他类型的解构赋值都是在数组解构赋值和对象解构赋值上的延伸

数组解构赋值&对象解构赋值

• 使用方法
• 默认值
• 使用场景

数组解构赋值——使用场景

• 默认值使用场景

{
	let a, b, c
	[a,b,c=3] = [1,2];
	console.log(a,b,c)//1,2,3
}
{
	let a, b, c
	[a,b,c] = [1,2];
	console.log(a,b,c)//1,2,undefined
	//*如果解构赋值在结构上没有配对，也就是说，c只声明没赋值，那就是undefined，所以默认值就是解决这个问题的*
}
//用于变量交换
{
	let a = 1;
	let b = 2;
	[a,b] = [b,a];
	console.log(a,b);//2,1
}
//
{
	function f1(){
		return [1,2];
	}
	let a, b;
	[a,b] = f1();//1,2
}
//在返回值中选择性的接收多个变量
{
	function f2(){
		return [1,2,3,4,5];
	}
	let a, b, c;
	[a,,,b] = f2()
	console.log(a,b)//1,4
}
//返回值的长度未知，只关心第一个，其余的返回一个数组，后面需要时候，再遍历数组，这与上面这个场景可以混合使用
{
	function f3(){
		return [1,2,3,4,5];
	}
	let a, b, c;
	[a,...b] = f3()
	console.log(a,b)//1,[2,3,4,5]
	let e, f;
	[e,,...f] = fn3()
	console.log(e,f)//1,[3,4,5]
}

对象解构赋值——使用场景

//对象的解构赋值按照对象的key value值进行赋值
{
	let obj = {p: 1, q: true}
	let p, q;
	{p, q} = obj;
	console.log(p,q)//1,true
}
{
	let {a=10,b=5} = {a:3};
	console.log(a,b)//3,5
}
//前后端数据交互使用场景
//metaData是后端返回的数据，现在要取到两个title的数据
//嵌套对象和数组应用
{
	let metaData = {
		title: 'abc',
		test: [{
			title:'test',
			desc: 'description'
		}]
	}
	let {title:esTitle, test:[{title:cnTitle}]}=metaData;
	console.log(esTitle,cnTitle);
}
//注意解构赋值的时候，三个key值（两个titile和test）必须相等，才能拿到value值