Es6-解构赋值

---

概述

1.解构赋值是对赋值运算符的扩展
2.解构赋值是针对数组和对象进行模式匹配, 然后对变量进行赋值的操作
3.在数组解构中, 只要是可遍历对象都可以进行解构

一、数组(Array)的解构

1.基本解构

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

2.可忽略的解构

在解构赋值时可以用,进行占位

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

3.可嵌套的解构

只要模式相同就可进行解构

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

4.对字符串进行解构

在数组模式的解构中, 只要是可遍历的对象都可以进行解构

let [a,b,c,d,e] = 'hello'
console.log(a) // h
console.log(b) // e
console.log(c) // l
console.log(d) // l
console.log(e) // o

5.变量多于值时解构

当变量多于值时, 没有匹配到值的变量值为undefined

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

6.值多于变量时解构

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

7.解构默认值

正常解构时默认值不会生效, 当没有匹配值或匹配值为undefined时, 默认值就会生效

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

8.用剩余运算符进行解构

当前面的值匹配完之后, 剩余值会以数组的形式保存变量b中

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

没有匹配结果时变量b的值为空数组[]

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

剩余运算符必须放在最后一个不然会报错

let [...a,b] = [1,2,3] 
//错误信息: Uncaught SyntaxError: Rest element must be last element

二、对象(Object)的解构

1.基本解构

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

注意: 匹配时变量名必须和对象的属性名相同, 没有匹配结果时变量值为undefined

2.可嵌套的解构

对象嵌套对象

let {a,a:{b},a:{c}} = {a:{b:2,c:3}}
console.log(a) // {b:2,c:3}
console.log(b) // 2
console.log(c) // 3

对象嵌套数组

let {a,a:[b,c]} = {a:[2,3]}
console.log(a) // [2,3]
console.log(b) // 2
console.log(c) // 3

对象嵌套数组再嵌套对象

let {a,a:[b,{c}]} = {a:[2,{c:3}]}
console.log(a) // [2,{c:3}]
console.log(b) // 2
console.log(c) // 3

3.解构默认值

正常解构时默认值不会生效, 当没有匹配值或匹配值为undefined时, 默认值就会生效

let {a = 99,b = 2,c = 3} = {a:1,b:undefined}
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

4.用剩余运算符解构对象

在解构对象中剩余运算符同样放在最后一个

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

剩余运算符会把前面匹配剩下的都放在变量b中,和对象属性的顺序无关

let {a,...b} = {w:11,k:22,a:33,d:44}
console.log(a) // 33
console.log(b) // {w:11,k:22,d:44}

如果没有多余的属性变量b就是一个空对象{}

let {a,...b} = {a:1}
console.log(a) // 1
console.log(b) // {}

5.给解构的属性指定变量名

指定变量名方式 对象属性:变量名,设置变量名之后不能再使用属性名

let {a:aaa,b:bb,c} = {a:1,b:2,c:3}
console.log(aaa) // 1
console.log(bb) // 2
console.log(c) //3
// console.log(a) // 报未定义错误

三、对函数返回值进行解构赋值

1.函数返回数组

function position(){
	return [1,2]
}
let [x,y] = position()
console.log(x) // 1
console.log(y) // 2

2.函数返回对象

function position(){
	return {x:1,y:2}
}
let {x,y} = position()
console.log(x) // 1
console.log(y) // 2

总结

1.解构赋值让代码书写起来更加简洁, 语句更加清晰
2.不管嵌套多少, 只要解构的模式相同就可以使用解构赋值
3.解构函数的返回值时, 只需要根据返回值对应的模式进行匹配即可, 和解构数组或者解构对象时的操作相同