服务器之家

服务器之家 > 正文

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

时间:2021-11-04 21:44     来源/作者:前端小智

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

在本文串,你将学到所有你需要知道的 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
  5. console.log(taylor)
  6. console.log(shawn)
  7. console.log(zayn)
  8. console.log(halsey)

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

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

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

这比以前好多了。

它是如何工作的呢?

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

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

数组解构?

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

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

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

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

数组解构

交换变量

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

忽略一些返回值

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

默认值

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

用 Rest 参数创建子数组

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

对象解构

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

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

嵌套对象解构

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

默认值

  1. const{a=10,b=5}={a:3};
  2. console.log(a);//3
  3. 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. }
  10. const{
  11. name,
  12. age,
  13. address:{city},
  14. albums:[lover,...rest],
  15. }=taylor
  16. console.log(name)//TaylorSwift
  17. console.log(age)//31
  18. console.log(city)//NewYork
  19. console.log(lover)//Lover
  20. 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/

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部