项目中关于解构的常用用法，我都帮你整理好了

在本文串，你将学到所有你需要知道的 JS 解构知识点。

为什么 JS 中存在解构?

这是一个普通的对象，包含4个人的名字。

1. constnames={
2. taylor:'小智',
3. shawn:'前端小智',
4. zayn:'大志',
5. halsey:'王大志',
6. }

现在，如果让你手动打印所有人名到控制台，你会怎么做。可能会这样做：

1. console.log(names.taylor)
2. console.log(names.shawn)
3. console.log(names.zayn)
4. console.log(names.halsey)

这种点的方式有点烦人，怎样才能让它变得更好?

1. consttaylor=names.taylor
2. constshawn=names.shawn
3. constzayn=names.zayn
4. consthalsey=names.halsey
6. console.log(taylor)
7. console.log(shawn)
8. console.log(zayn)
9. console.log(halsey)

好多了。但我们仍然在重复同样的工作。如果我们可以在单个变量上声明和分配对象属性呢?

这样会更好，对吧?这就是对象解构帮助我们的地方。所以我们可以这样做：

1. const{taylor,shawn,zayn,halsey}=names
3. console.log(taylor)
4. console.log(shawn)
5. console.log(zayn)
6. console.log(halsey)

这比以前好多了。

它是如何工作的呢?

这很简单。我们只是从对象中取出属性并将它们存储在一个变量中。默认情况下，变量名与属性名相同。所以我们可以这样写：

1. const{taylor,shawn,zayn:zaynMalik,halsey}=names

数组解构?

数组解构与对象的解构类似，但有一些区别。我们知道数据被存储在一个带有索引的数组中。它们是有顺序的。因此，在进行解构时，我们必须保持顺序。比如：

1. constalbums=['Lover','Evermore','Red','Fearless']
3. const[lover,ever]=albums
4. //LoverEvermore

而且，数组也没有值的属性。所以，可以直接给出你想要的任何变量名称。

我们继续看看对象和数组解构的一些用例。

数组解构

交换变量

1. leta=1;
2. letb=3;
4. [a,b]=[b,a];
5. console.log(a);//3
6. console.log(b);//1

忽略一些返回值

1. functionf(){
2. return[1,2,3];
3. }
5. const[a,,b]=f();
6. console.log(a);//1
7. console.log(b);//3

默认值

1. leta,b;
3. [a=5,b=7]=[1];
4. console.log(a);//1
5. console.log(b);//7

用 Rest 参数创建子数组

1. constalbums=['Lover','Evermore','Red','Fearless']
3. const[,...albums2]=albums
5. console.log(albums2)//['Evermore','Red','Fearless']

对象解构

从作为函数参数传递的对象中解构字段

1. constanjan={
2. name:'前端小智',age:20
3. }
5. conststatement=({name,age})=>{
6. return`Mynameis${name}.Iam${age}yearsold.`
7. }
9. statement(anjan)
10. //Mynameis前端小智.Iam20yearsold.

嵌套对象解构

1. constprofile={
2. name:'Anjan',
3. age:20,
4. professional:{
5. profession:'前端开发',
6. }
7. }
9. const{name,age,professional:{profession}}=profile
11. console.log(professional)//这句会报错
12. console.log(profession)//前端开发

默认值

1. const{a=10,b=5}={a:3};
3. console.log(a);//3
4. console.log(b);//5

嵌套对象和数组解构

1. consttaylor={
2. name:'TaylorSwift',
3. age:31,
4. address:{
5. city:'NewYork',
6. country:'USA',
7. },
8. albums:['Lover','Evermore','Red','Fearless'],
9. }
11. const{
12. name,
13. age,
14. address:{city},
15. albums:[lover,...rest],
16. }=taylor
18. console.log(name)//TaylorSwift
19. console.log(age)//31
20. console.log(city)//NewYork
21. console.log(lover)//Lover
22. 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/