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

深入理解ES6的《解构》

时间:2023-04-04 22:57:05 HTML5

对象解构如果使用var、let、const来解析和声明变量,必须提供初始化器(即等号右边的值)。下面的语句有语法错误var{type,name};let{type,name}const{type,name}解构赋值表达式(也就是右边的表达式)如果是null或undefined会导致程序抛出错误,因为任何试图读取null或undefined属性会触发运行时错误同时节点。如果类型和名称已经存在,如果重新赋值使用解构,则需要在表达式两边加上括号letnode={type:'Identifier',name:'angela'},type='demo',name=1;//加括号可以将block语句转化为表达式,从而实现解构赋值的整个过程({type,name}=node)可以使用解构赋值表达式letnode={type:'Identifier',name:'angela'},type='demo'无论值在哪里使用,name=1;functionoutputInfo(value){console.log(value===node)}outputInfo({type,name}=node)//true解构也可以使用默认值={type:'Identifier'}let{type:localType,name:localName="angela"}=nodeconsole.log(localType)//Identifierconsole.log(localName)//angela解构嵌套对象,可能会创建一个无效的表达式,例如loc后面的花括号不需要,更好的办法是定义一个默认值let{loc:{}}=节点数组解构letcolors=['red','green','blue']let[,,thirdColor]=colors只能取数组的第三个元素如上图,忽略前两个letcolors=['red','green','blue'],firstColor='black',secondColor='purple';[firstColor,secondColor]=colors在重新赋值变量和使用解构时,数组解构不再需要左右两边的括号。数组解构可能用的最多的就是交换值leta=1,b=2;[a,b]=[b,a]同样,数组解构也可以加入默认值。数组解构中有不确定元素的概念,数组中剩余的元素可以赋值给一个特定的变量letcolors=['red','green','blue'];let[firstColor,...restColors]=colors//restColors包含两个元素green和blueconcat方法旨在连接两个Array,如果调用时没有传递参数,将返回当前函数的副本letcolors=['red','green','blue'];letcloneColors=colors.concat()//["red","green","blue"]上面的代码在ES6中对于不确定的元素也可以达到这个目的letcolors=['red','green','blue'];let[...cloneColors]=colors//["red","green","blue"]需要注意的是,在解构数组中,不确定元素必须是最后一项,后面加逗号会导致语法错误解构参数函数setCookie(name,value,{secure,path,domain,expires}={}){}setCookie("type","js",{secure:true,expires:6000})最全面的思路是同时使用解构和默认constsetCookieDefaults={secure:false,path:"/",domain:"example.com",expires:newDate(Date.now()+360000000)}functionsetCookie(name,value,{secure=setCookieDefaults.secure,path=setCookieDefaults.path,domain=setCookieDefaults.domain,expires=setCookieDefaults.expires}){}