作者：Ruphaa译者：前端小智来源：dev有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。在本文中，您将了解有关JS解构的所有知识。为什么在JS中存在解构？这是一个包含4个人名的通用对象。constnames={taylor:'小智',shawn:'前端小智',zayn:'大智',halsey:'王大智',}现在，如果让你手动打印所有的名字到控制台，会怎样你做。可能会这样做：console.log(names.taylor)console.log(names.shawn)console.log(names.zayn)console.log(names.halsey)这种点有点烦人，怎么弄改变更好？consttaylor=名字。taylorconstshawn=名字。shawnconstzayn=名字。zaynconsthalsey=名字。哈尔西控制台。日志（泰勒）控制台。日志（肖恩）控制台。日志（zayn）控制台。log(halsey)好多了。但我们仍在重复同样的工作。如果我们可以在单个变量上声明和分配对象属性会怎样？那会更好，对吧？这是对象解构帮助我们的地方。所以我们可以这样做：const{taylor,shawn,zayn,halsey}=namesconsole.log(taylor)console.log(shawn)console.log(zayn)console.log(halsey)这比以前好多了。它是如何工作的？这很简单。我们只是从对象中取出属性并将它们存储在一个变量中。默认情况下，变量名称与属性名称相同。所以我们可以这样写：const{taylor,shawn,zayn:zaynMalik,halsey}=命名数组解构？数组解构类似于对象解构，但有一些不同。我们知道数据存储在一个带有索引的数组中。他们是有序的。因此，我们在解构时必须保持秩序。例如：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']从作为函数参数传递的对象解构的对象Deconstructedfieldconstanjan={name:'FrontendXiaozhi',age:20}conststatement=({name,age})=>{返回`我的名字是${name}。我今年${age}岁。`}statement(anjan)//我叫前端小智。我20岁了。嵌套对象解构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{名称,age,address:{city},albums:[lover,...rest],}=taylorconsole.log(name)//TaylorSwiftconsole.log(age)//31console.log(city)//纽约console.log(lover)//Loverconsole.log(rest)//['Evermore','Red','Fearless']这就是你需要了解的关于JS的全部内容。JS解构知识点。编辑中可能存在的BUG无法实时获知。之后为了解决这些bug，我花了很多时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://dev.to/thatanjan/ever...交流有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
