1。es6中数组的解构赋值:let[a,b,c]=[1,2,3];a//1b//2c//3let[foo,[[bar],baz]]=[1,[[2],3]];foo//1bar//2baz//3//逗号而不是字符串let[,,third]=["foo","bar","baz"];third//"baz"让[x,,y]=[1,2,3];x//1y//3让[head,...tail]=[1,2,3,4];head//1tail//[2,3,4]让[x,y,...z]=['a'];x//"a"y//undefinedz//[]如果解构不成功,变量的值是未定义的2.对象的解构分配对象的解构有一个重要的区别从一个数组。数组的元素是有序排列的,变量的值由它的位置决定;虽然对象的属性没有顺序,但变量必须与属性同名才能获得正确的值。正确值:let{bar,foo}={foo:'aaa',bar:'bbb'};foo//"aaa"bar//"bbb"错误值:let{baz}={foo:'aaa',bar:'bbb'};baz//undefinedconst{data:res}=awaitthis.$http.post('login',this.loginForm)以上是速记;不用速记,全部写成:constresult=awaitloin(XXX);constdata=result.data;constres=data;解析如下:const{data}=awaitlogin(XXX)是es6中的解构赋值,去掉login(XXX)的data属性。const{data:res}=awaitlogin(XXX)是将data重命名为res。数组&对象解构赋值总结解构赋值是赋值运算符的扩展。他是对数组或者对象进行模式匹配,然后给里面的变量赋值。作用:1、文字易读,语义更清晰;2.方便获取复杂对象中的数据字段。解构模型在解构中,有以下两部分参与:1.解构来源: 解构赋值表达式的右边部分。2.解构的目标:解构赋值表达式的左边部分。数组模型(Array)的解构basiclet[a,b,c]=[1,2,3];//a=1//b=2//c=3可嵌套let[a,[[b],c]]=[1,[[2],3]];//a=1//b=2//c=3可以忽略让[a,,b]=[1,2,3];//a=1//b=3不完全解构let[a=1,b]=[];//a=1,b=undefinedremainderoperatorlet[a,...b]=[1,2,3];//a=1//b=[2,3]字符串等在解构中对于数组,如果解构的目标是一个可遍历的对象,就可以解构赋值。可遍历对象是实现Iterator接口的数据。let[a,b,c,d,e]='hello';//a='h'//b='e'//c='l'//d='l'//e='o'解构默认值let[a=2]=[undefined];//a=2当解构模式有匹配结果且匹配结果未定义时,会触发默认值作为返回结果。让[a=3,b=a]=[];//a=3,b=3让[a=3,b=a]=[1];//a=1,b=1let[a=3,b=a]=[1,2];//a=1,b=2解析:a和b的匹配结果未定义,触发默认值:a=3;b=a=3a正常解构赋值,匹配结果:a=1,b匹配结果未定义,触发默认值:b=a=1aandb正常解构赋值,匹配结果:a=1,b=2对象模型解构(Object)basiclet{foo,bar}={foo:'aaa',bar:'bbb'};//foo='aaa'//bar='bbb'let{baz:foo}={baz:'ddd'};//foo='ddd'可嵌套且可忽略不计letobj={p:['hello',{y:'world'}]};let{p:[x,{y}]}=obj;//x='hello'//y='world'letobj={p:['hello',{y:'world'}]};let{p:[x,{}]}=obj;//x='hello'没有完全解构letobj={p:[{y:'world'}]};让{p:[{y},x]}=obj;//x=undefined//y='world'restoperatorlet{a,b,...rest}={a:10,b:20,c:30,d:40};//a=10//b=20//rest={c:30,d:40}解构默认值让{a=10,b=5}={a:3};//a=3;b=5;让{a:aa=10,b:bb=5}={a:3};//aa=3;bb=5;如果想了解更多关于解构赋值的知识,可以去MDN看看,介绍的很详细!
