当前位置: 首页 > 科技观察

小编为大家整理了项目中解构的常用用法

时间:2023-03-16 15:12:58 科技观察

这篇文章,你将学习到关于JS解构你需要知道的所有知识点。为什么在JS中存在解构?这是一个包含4个人名的普通对象。constnames={taylor:'小智',shawn:'前端小智',zayn:'大智',halsey:'王大智',}现在如果让你手动打印所有名字到控制台,你会怎么办做。可能会这样做:console.log(names.taylor)console.log(names.shawn)console.log(names.zayn)console.log(names.halsey)这种点有点烦人,怎么弄变好多少?但我们仍在重复同样的工作。如果我们可以在单个变量上声明和分配对象属性会怎样?那会更好,对吧?这是对象解构帮助我们的地方。所以我们可以这样做:const{taylor,shawn,zayn,halsey}=namesconsole.log(taylor)console.log(shawn)console.log(zayn)console.log(halsey)这比以前好多了。它是如何工作的?这很简单。我们只是从对象中取出属性并将它们存储在一个变量中。默认情况下,变量名称与属性名称相同。所以我们可以这样写:const{taylor,shawn,zayn:zaynMalik,halsey}=names数组解构?数组解构类似于对象解构,但有一些区别。我们知道数据存储在一个带有索引的数组中。他们是有序的。因此,我们在解构时必须保持秩序。例如:constalbums=['Lover','Evermore','Red','Fearless']const[lover,ever]=albums//LoverEvermore而且数组没有value属性。所以,你可以直接给任何你想要的变量名。让我们继续看看对象和数组解构的一些用例。数组解构交换变量leta=1;letb=3;[a,b]=[b,a];console.log(a);//3console.log(b);//1忽略一些返回值functionf(){return[1,2,3];}const[a,,b]=f();console.log(a);//1console.log(b);//3默认值leta,b;[a=5,b=7]=[1];console.log(a);//1console.log(b);//7创建一个带Rest参数的子数组constalbums=['Lover','Evermore','Red','Fearless']const[,...albums2]=albumsconsole.log(albums2)//['Evermore','Red','Fearless']对象从作为函数参数传递的对象解构字段constanjan={name:'FrontendXiaozhi',age:20}conststatement=({name,age})=>{return`Mynameis${name}.Iam${age}yearsold.`}statement(anjan)//MynameisfrontendXiaozhi.Iam20yearsold.嵌套对象解构constprofile={name:'Anjan',age:20,professional:{profession:'前端开发',}}const{name,age,professional:{profession}}=profileconsole.log(professional)//这句话会报错console.log(profession)//前端开发的默认值const{a=10,b=5}={a:3};console.log(a);//3console.log(b);//5嵌套对象和数组解构consttaylor={name:'TaylorSwift',age:31,address:{city:'NewYork',country:'USA',},albums:['Lover','Evermore','Red','Fearless'],}const{name,age,address:{city},专辑:[情人,...休息],}=taylorconsole.log(name)//TaylorSwiftconsole.log(age)//31console.log(city)//NewYorkconsole.log(lover)//Loverconsole.log(rest)//['Evermore','Red','Fearless']这就是你需要知道的关于JS的一切知识know-about-javascript-destructuring-30e5