ES中允许按照一定格式从数组,对象值提取值,对变量进行赋值,这就是解构(Destructuring)
1 let [a,b,c]=[1,10,100]
2 console.log(a,b,c)//1 10 100
3 //等式两边"模式"进行匹配,从而进行赋值
4 let [i,[[[j]],k]]=[1,[[[2]],3]]//这种看看就好,知道这样也可以执行就行
5 console.log(i,j,k)//1 2 3
6
7 let [,,x]=[1,2,3]
8 console.log(x)//3
解构不成功,相应的变量为undefined
1 let [i1,i2]=[]
2 console.log(i1,i2)//undefined undefined
3 let [i3,i4]=[10]
4 console.log(i3,i4)//10 undefined
部分解构成功
1 let [i5,i6]=[1,2,3]
2 console.log(i5,i6)//1 2
等式右边不是可遍历的结构,那么将报错
1 let [i7,i8]=1 //1 is not iterable
2 let [i9] =true//true is not iterable
解构赋值允许指定默认值
1 let [i10,i11='hi']=[100]
2 console.log(i10,i11)//100 'hi'
注意这种情况
1 // let [i111=i12,i12=10]=[]//报错,i111=i12 此时i12还未申明
2 // 而:
3 let [i13=i14,i14]=[1,2]
4 console.log(i13,i14)
对象的解构赋值
1 let {foo,bar}={foo:'name',bar:'age'}
2 console.log(foo,bar)
3 //但其实上面解构赋值是下面的缩写
4 let {foo1:foo1,bar1:bar1}={foo1:'name',bar1:'age'}
5 console.log(foo1,bar1)
6 // 如果继续变换
7 let {foo2:name,bar2:age}={foo2:'name',bar2:'age'}
8 // console.log(foo2,bar2)//报错
9 console.log(name,age)//正确写法
10 // 即foo2是模式,name才是赋值的变量
运行结果:
解构赋值的几大应用:
1.交换变量
1 let a10=10,b100=100;
2 [a10,b100]=[b100,a10]
3 console.log(a10,b100)//100 10
2.函数返回中取出多个值
1 function test10(){
2 return [1,2,3]
3 }
4 function test100(){
5 return {
6 nameT:'apple',
7 ageT:100
8 }
9 }
10 let [j1,j2,j3]=test10()
11 console.log(j1,j2,j3)//1 2 3
12 let {nameT,ageT}=test100()
13 console.log(nameT,ageT) //'apple' 100
3.提取JSON数据
1 function getJSON(){
2 return {
3 "app1":100,
4 "blue":"hello blue",
5 "data": 110
6 }
7 }
8 let {app1,blue,data:number}=getJSON()
9 console.log(app1,blue,number)//100 "hello blue" 110