当前位置: 首页 > Web前端 > HTML

ES6学习笔记(二)----------------------------------------变量解构assignment

时间:2023-04-02 20:11:53 HTML

ES6允许按照一定的模式从数组和对象中提取值,并为变量赋值。这称为解构ES6。在声明多个变量之前,我们需要遵循以下方法:leta=1;letb=2;letc=3;letd=4;//orleta=1,b=2,c=3,d=4;现在我们可以更简单了let[a,b,c,d]=[1,2,3,4]这种方法要求边缘结构完全对齐。如果左边有多余的变量,就会给多余的变量赋值undefined。如果右边有多余的值,多余的值会被自动忽略。让[a,[b,c,d],[e,[f,g]]]=[1,[2,3,4],[5,[6,7]]]console.log(a,b,c,d,e,f,g)//1234567让[a,b,c,d]=[1,2,3]console.log(a,b,c,d)//123undefinedlet[a,b,c]=[1,2,3,4]console.log(a,b,c)//123如果等号右边的对象不是数组,会解析失败报错//以下所有错误let[foo]=1;让[foo]=假;让[foo]=NaN;让[foo]=未定义;让[foo]=null;让[foo]={};给变量赋值undefined后,系统会自动采用默认值let[a=1,b,c,d]=["abort","bar","cancle","dance"]console.log(a,b,c,d)//中止小节取消dancelet[a=1,b,c,d]=[undefined,"bar","cancle","dance"]console.log(a,b,c,d)//1"bar""cancle""dance"let[a=1,b]=[null,2]console.log(a,b)//null2let[a=1,b]=[NaN,2]console.log(a,b)//NaN2let[a=undefined,b]=[undefined,undefined]console.log(a,b)//undefinedundefined默认值可以引用解构赋值的其他变量,但是该变量必须声明过let[x=1,y=x]=[];//x=1;y=1让[x=1,y=x]=[2];//x=2;y=2让[x=1,y=x]=[1,2];//x=1;y=2let[x=y,y=1]=[];//ReferenceError解构赋值也可以用于对象的属性赋值let{a,b}={a:1,b:2}a//1b//2let{bar,foo}={foo:"aaa",bar:"bbb"};foo//"aaa"bar//"bbb"let{baz}={foo:"aaa",bar:"bbb"};baz//undefined从上面的例子我们可以看出对象解构赋值的内部机制是先找到同名的属性,然后赋值给对应的变量。实际分配的是后者,而不是前者。如果变量名和属性名不一致,必须这样写。var{foo:baz}={foo:'aaa',bar:'bbb'};baz//"aaa"letobj={first:'hello',last:'world'};let{first:f,last:l}=obj;f//'hello'l//上面'world'的例子等价于下面,其实是左右一一对应let{foo:foo,bar:bar}={foo:"aaa",bar:"bbb"};foo//"aaa"bar//"bbb"和数组一样,解构也可以用于具有嵌套结构的对象。letobj={p:['Hello',{y:'World'}]};let{p:[x,{y}]}=obj;x//"Hello"y//"World"必看很明显它的左右对应关系varnode={loc:{start:{line:1,column:5}}};var{loc,loc:{start},loc:{start:{line}}}=node;line//1loc//Object{start:Object}start//Object{line:1,column:5}对象解构赋值也可以设置默认值var{x=3}={};x//3var{x,y=5}={x:1};x//1y//5var{x:y=3}={};y//3var{x:y=3}={x:5};y//5var{message:msg='Somethingwentwrong'}={};msg//"Somethingwentwrong"stringcan也被解构和赋值。这是因为此时,字符串被转换为类数组对象。const[a,b,c,d,e]='你好';a//"h"b//"e"c//"l"d//"l"e//"o"Array-likeObjects有一个length属性,所以这个属性也可以被解构和赋值。let{length:len}='hello';len//5数字和布尔解构赋值,解构赋值时,如果等号右边是数字或布尔值,则先转为对象。(这让我有点迷惑。对于数字和布尔值的例子,你可以阅读这个网站上的讨论:https://segmentfault.com/q/10...let{toString:s}=123;s===Number.prototype.toString//truelet{toString:s}=true;s===Boolean.prototype.toString//truelet{toString:s}=123;//可以用两步代替lettemp=newNumber(123);let{toString:s}=temp;//temp对象有toString属性,所以解构成功,然后toStirng变量被新变量s替换let{a:s}=123因为解构失败,所以是使用undefined变量解构赋值1.交换变量的值leta=1;letb=2;[a,b]=[b,a]console.log(a,b)//212.从函数Returnmultiplevalues接收返回值函数f(a,b){varnum=a+b;varaver=(a+b)/arguments.length;return[num,aver,a*b,a*a+b*b]}let[x,y,z,p]=f(2,3)console.log(x,y,z,p)//52.5613functionf1(){return{a:1,b:2}}let{a,b}=f1()console.log(a,b)//12解构赋值可以方便的关联一组带有变量名的参数。functionf1([x,y,z]){returnx+y+z}f1([1,2,3])//6个参数也可以是无序functionf2({a,c,d,f,b}){returna+c+d+f+b}f2({a:1,b:2,c:3,d:4,f:5})//15解构赋值提取JSON对象数据即可快速提取letjsonData={id:42,status:"OK",data:[867,5309]};let{id,status,data:number}=jsonData;console.log(id,status,number);//42,"好的",[867,5309]...