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值