文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

Javascript 中的解构赋值语法

2024-12-03 07:29

关注

[[390966]]

数组解构

数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量,而不是数组中的索引(即,如果你只想解处理前几个值),请跳过某些索引或甚至使用 REST 模式将所有剩余的值放到新数组中。

  1. const nums = [ 3, 6, 9, 12, 15 ]; 
  2. const [ 
  3.   k,              // k = 3 
  4.   l,              // l = 6 
  5.   ,               // Skip a value (12) 
  6.   ...n            // n = [12, 15] 
  7. ] = nums; 

对象解构

对象解构与数组解构非常相似,主要区别是可以按名称引用对象中的每个key,从而创建一个有相同名称的变量。此外还可以将键解构为新的变量名,只解构所需的 key,然后用 rest 模式将剩余的 key 解构为新对象。

  1. const obj = { a: 1, b: 2, c: 3, d: 4 }; 
  2. const { 
  3.   a,              // a = 1 
  4.   c: d,           // d = 3 
  5.   ...rest         // rest = { b: 2, d: 4 } 
  6. } = obj; 

嵌套解构

嵌套对象和数组可以通过相同的规则来进行解构。区别在于可以将嵌套 key 或值直接解构为变量,而不必将父对象存储在变量本身中。

  1. const nested = { a: { b: 1, c: 2 }, d: [1, 2]}; 
  2. const { 
  3.   a: { 
  4.     b: f,         // f = 1 
  5.     ...g          // g = { c: 2 } 
  6.   }, 
  7.   ...h            // h = { d: [1, 2]} 
  8. } = nested; 

高级解构

由于数组的行为与对象相似,所以可以通过使用索引作为对象解构分配中的 key,用解构分配语法从数组中获取特定值。用这种方法还可以得到数组的其他属性(例如数组的 length)。最后,如果解构后的值是 undefined,则还可以为解构过程中的变量定义默认值。

  1. const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ]; 
  2. const { 
  3.   6: x,           // x = 2 
  4.   0: y,           // y = 5 
  5.   2: z,           // z = 4 
  6.   length: count,  // count = 7 
  7.   name = 'array', // name = 'array' (not present in arr) 
  8.   ...restData     // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' } 
  9. } = arr; 

 

来源:前端先锋内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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