ES6 —— 解构赋值

（1）概述

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

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

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

（2）解构模型

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

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

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

（3）数组模型的结构（Array）

            let arr = [1,2,3]
			let [a,b,c] = arr
			/*这一步的隐式操作相当于：
			 * let a = arr[0], let b = arr[1], let c = arr[2]
			 */
			console.log(a)
			console.log(b)
			console.log(c)

1） 解构赋值可以嵌套也可以忽略，如：

            let arr = [1,[2,3]]
			let [a,[b,c]] = arr
			console.log(a,b,c)
			
			let [a,[,c]] = arr
			console.log(a,c)

 

 2） 解构赋值可以不完全结构

            let arr = [1,2]
			let [a,b,c] = arr
			console.log(a,b,c)

 3） 剩余运算符 (...)

            let arr = [1,2,3]
			let [a,...b] = arr
			console.log(a,b)

4) 字符串

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

            let arr = "nice"
			let [a,b,c,d] = arr
			console.log(a,b,c,d)

 

5) 解构默认值

            let arr = []
			let [a=1,b=2] = arr
			console.log(a,b)

 

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

            let arr = [undefined]
			let [a=1] = arr
			console.log(a)

 

（4）对象模型的结构（Object）

            let obj = {name:"xiaozhang",age:21}
			let {name,age} = obj
			/**
			 * 这一步的隐式操作为：
			 * let name = obj.name
			 * let age = obj.age
			 */
			console.log(name)
			console.log(age)

1) 也可嵌套可忽略

            let obj = {p: [1, {y: 2}] };
			let {p: [x, { y }] } = obj;
			console.log(x,y)

 

            let obj = {p: [1, {y: 2}] };
			let {p: [x, {  }] } = obj;
			console.log(x)

 

2） 也可以不完全解构

            let obj = {p: [{y:2}] };
			let {p: [{ y }, x ] } = obj;
			console.log(x,y)

3） 也有剩余运算符 (...) 

            let obj = {a: 10, b: 20, c: 30, d: 40};
			let {a, b, ...c} = obj;
			console.log(a,b,c)

4)  也能设置解构默认值

            let obj = {a: 10, b: 20,};
			let {a,b,c=30} = obj;
			console.log(a,b,c)