ES6 之 解构赋值

ES6 解构赋值

简介

解构赋值是对赋值运算符的扩展。

是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；
也方便了复杂对象中数据字段获取。

解构模型

在解构中，有两部分参与：

• 解构的源，解构赋值表达式的右边部分。

• 解构的目标，解构赋值表达式的左边部分。

数组模型的解构（Array）

基本：

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

可嵌套：

		let [a,[[d],b,c]] = [0,[[3],1,2]];
		console.log(a,b,c,d);// 0,1,2,3

可忽略：

		let [a, ,c] = [0,1,2];
		console.log(a,c);// 0,2

不完全解构：

		let [a = 0, b] = []; 
		console.log(a,b);// 0 undefined

剩余运算符：

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

字符串等：

		let [a,b,c,d,e] = 'china';
		console.log(a,b,c,d,e);// c h i n a

解构默认值：

		let [a = 0] = [undefined];
		console.log(a);// 0

当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

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

• a 与 b 匹配结果为 undefined ，触发默认值：a = 6; b = a =6

• a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1

• a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

---

对象模型的解构（Object）

基本：

		let {a,b} = {a:'魏无羡',b:'蓝忘机'};
		console.log(a,b);// 魏无羡 蓝忘机
		
		let {a:b} = {a:'陈情令'};
		console.log(b);// 陈情令

嵌套可忽略：

		let sa = {p:['hello',{y:'world'}]};
		let {p:[x,{y}]} = sa;
		console.log(x);// hello
		console.log(y);//world
		
		let sa = {p:['hello',{y:'world'}]};
		let {p:[x,{}]} = sa;
		console.log(x);// hello

不完全解构：

		let sa = {p:[{y:'world'}]};
		let {p:[{y},x]} = sa;
		console.log(x);// undefined
		console.log(y);// world

剩余运算符：

		let {a,b,...rest} = {a:0,b:1,c:2,d:3};
		console.log(a,b,rest);//0 1 {c: 2, d: 3}

解构默认值：

		let {a=0,b=1} = {a:2};
		console.log(a,b);// 2 1
		
		let {a:aa=6,b:bb=66} = {a:666};
		console.log(aa,bb);// 666  66