DestructureArray的基本用法——Destructure跳过赋值变量,可以是任意可遍历对象。当破坏性赋值不够时,左边可以是对象属性rest变量的默认值&。Object-Destructure的基本用法可以将变量名更改为默认值。Rest运算符嵌套ObjectES6-ES10学习布局解构赋值:使用数组索引使用变量,直接给一个变量赋值比较好,但是不适合声明很多变量用letArray-Destructure基本用法letarr=['hello','world']//通过索引访问值letfirstName=arr[0]letsurName=arr[1]console.log(firstName,surName)//helloworldES6letarr=['hello','world']让[firstName,surName]=arrconsole。log(firstName,surName)//helloworld跳过赋值变量,可以是任意可遍历对象//跳过某个值//Arrayletarr=['a','b','c','d']let[firstName,,thirdName]=arr//左边是变量,右边是可遍历对象,包括Set和Mapconsole.log(firstName,thirdName)//一个c//Stringletstr='abcd'let[,,thirdName]=strconsole.log(thirdName)//c//Setlet[firstName,,thirdName]=newSet([a,b,c,d])console.log(firstName,thirdName)//ac的左边可以anobjectAttributesrenameobjectattributesletuser={name:'s',surname:'t'};[user.name,user.surname]=[1,2]//花括号和括号之间必须有分号console.log(user)//{name:1,surname:2}restvariableletarr=[1,2,3,4,5,6,7,8,9]let[firstName,,thirdName,...last]=arrconsole.log(firstName,thirdName,last)//12[3,4,5,6,7,8,9]//以上如果只是赋值firstName和thirdName,那么剩下的参数arr会被回收,如果不想删除3-9的元素,可以使用[...rest]//rest只能使用最后一个元素中的默认值&当解构赋值不够时,undefinedletarr=[1,2,3,4,5,6,7,8,9]let[firstName,,thirdName,...last]=arrconsole。log(firstName,thirdName,last)//12[3,4,5,6,7,8,9]letarr=[1,2,3]让[firstName,,thirdName,...last]=arr//12[3]letarr=[1,2]let[firstName,,thirdName,...last]=arr//12[]letarr=[1]let[firstName,,thirdName,...last]=arr//1undefined[]letarr=[]let[firstName,,thirdName,...last]=arr//undefinedundefined[]//默认没有参数,会undefined,如果此时在进行数值运算时,就会出现问题//如果避免这种情况,必须赋默认值letarr=[]let[firstName='hello',,thirdName,...last]=arr//helloundefined[]Object-Destructure基本用法letoptions={title:'menu',width:100,height:200}let{title,width,height}=optionsconsole.log(title,width,height)//menu100200可以改变量名,变量冲突怎么办?不能使用缩写//下面的title是匹配的属性名来提取变量名//title2是新的变量名let{title:title2,width,height}=optionsconsole.log(title2,width,height)//menu100200默认值letoptions={title:'menu',height:200}let{title:title2,width=130,height}=optionsconsole.log(title2,width,height)//menu130200restoperatorletoptions={title:'menu',width:100,height:200}let{title,...last}=optionsconsole.log(title,last)//menu{width:100,height:200}嵌套对象letoptions={size:{width:100,height:200},item:['Cake','Donut'],extra:true}let{size:{width:width2,height},item:[item1]}=选项控制台.log(width2,height,item1)//100200“蛋糕”学习布局
