在本文串，你将学到所有你需要知道的 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=names.taylor
- constshawn=names.shawn
- constzayn=names.zayn
- consthalsey=names.halsey
- console.log(taylor)
- console.log(shawn)
- console.log(zayn)
- console.log(halsey)
好多了。但我们仍然在重复同样的工作。如果我们可以在单个变量上声明和分配对象属性呢?
这样会更好，对吧?这就是对象解构帮助我们的地方。所以我们可以这样做：
- const{taylor,shawn,zayn,halsey}=names
- console.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
而且，数组也没有值的属性。所以，可以直接给出你想要的任何变量名称。
我们继续看看对象和数组解构的一些用例。
数组解构
交换变量
- leta=1;
- letb=3;
- [a,b]=[b,a];
- console.log(a);//3
- console.log(b);//1
忽略一些返回值
- functionf(){
- return[1,2,3];
- }
- const[a,,b]=f();
- console.log(a);//1
- console.log(b);//3
默认值
- leta,b;
- [a=5,b=7]=[1];
- console.log(a);//1
- console.log(b);//7
用 Rest 参数创建子数组
- constalbums=['Lover','Evermore','Red','Fearless']
- const[,...albums2]=albums
- console.log(albums2)//['Evermore','Red','Fearless']
对象解构
从作为函数参数传递的对象中解构字段
- constanjan={
- name:'前端小智',age:20
- }
- conststatement=({name,age})=>{
- return`Mynameis${name}.Iam${age}yearsold.`
- }
- statement(anjan)
- //Mynameis前端小智.Iam20yearsold.
嵌套对象解构
- constprofile={
- name:'Anjan',
- age:20,
- professional:{
- profession:'前端开发',
- }
- }
- const{name,age,professional:{profession}}=profile
- console.log(professional)//这句会报错
- console.log(profession)//前端开发
默认值
- const{a=10,b=5}={a:3};
- console.log(a);//3
- console.log(b);//5
嵌套对象和数组解构
- consttaylor={
- name:'TaylorSwift',
- age:31,
- address:{
- city:'NewYork',
- country:'USA',
- },
- albums:['Lover','Evermore','Red','Fearless'],
- }
- const{
- name,
- age,
- address:{city},
- albums:[lover,...rest],
- }=taylor
- console.log(name)//TaylorSwift
- console.log(age)//31
- console.log(city)//NewYork
- console.log(lover)//Lover
- console.log(rest)//['Evermore','Red','Fearless']
这就是关于 JS 所有你需要知道的 JS 解构知识点。
作者：Ruphaa 译者：前端小智
来源：dev 原文：https://dev.to/thatanjan/everything-you-need-to-know-about-javascript-destructuring-30e5
原文链接：https://www.toutiao.com/a7026210971026752014/
