文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 18:07

关注

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

为什么 JS 中存在解构?

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

  1. const names = { 
  2.     taylor: '小智'
  3.     shawn: '前端小智'
  4.     zayn: '大志'
  5.     halsey: '王大志'

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

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

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

  1. const taylor = names.taylor 
  2. const shawn = names.shawn 
  3. const zayn = names.zayn 
  4. const halsey = names.halsey 
  5.  
  6. console.log(taylor) 
  7. console.log(shawn) 
  8. console.log(zayn) 
  9. console.log(halsey) 

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

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

  1. const { taylor, shawn, zayn, halsey} = names 
  2.  
  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. const albums = ['Lover''Evermore''Red''Fearless'
  2.  
  3. const [lover, ever] = albums 
  4. // Lover Evermore 

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

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

数组解构

交换变量

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

忽略一些返回值

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

默认值

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

用 Rest 参数创建子数组

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

对象解构

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

  1. const anjan = { 
  2.         name'前端小智', age: 20 
  3.  
  4. const statement = ({name, age}) => { 
  5.         return `My name is ${name}. I am ${age} years old.` 
  6.  
  7. statement(anjan) 
  8. // My name is 前端小智. I am 20 years old. 

嵌套对象解构

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

默认值

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

嵌套对象和数组解构

  1. const taylor = { 
  2.   name'Taylor Swift'
  3.   age: 31, 
  4.   address: { 
  5.       city: 'New York'
  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.  
  17. console.log(name) // Taylor Swift 
  18. console.log(age) // 31 
  19. console.log(city) // New York 
  20. console.log(lover) // Lover 
  21. console.log(rest) // [ 'Evermore''Red''Fearless' ] 

这就是关于 JS 所有你需要知道的 JS 解构知识点。

作者:Ruphaa 译者:前端小智

来源:dev 原文:https://dev.to/thatanjan/everything-you-need-to-know-about-javascript-destructuring-30e5

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯