文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中的对象解构方法怎么使用

2023-07-05 11:29

关注

这篇文章主要介绍“JavaScript中的对象解构方法怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript中的对象解构方法怎么使用”文章能帮助大家解决问题。

基础解构

const fullName = {    firstName: "Quintion",    lastName: "Tang",};const { firstName, lastName } = fullName; // 解构语法console.log(firstName); // Quintionconsole.log(lastName); // Tang

正如上面的代码片段中看到的那样,在解构语法中,分解了 firstName 对象属性并将其分配给表达式左侧定义的变量。在上述场景中,对象的属性名称应与左侧表达式中定义的变量匹配。 如果定义其他变量名称,则获取不到想要的值,如:

const fullName = {    firstName: "Quintion",    lastName: "Tang",};const { firstName, trueName } = fullName; // 解构语法console.log(firstName); // Quintionconsole.log(trueName); // undefined

由于在 fullName 中没有属性 trueName ,所以它被初始化为 undefined

别名解构

如果需要把对象属性赋值给属性名不一致的变量名,可以如下代码来实现:

const fullName = {    firstName: "Quintion",    lastName: "Tang",};const { firstName: trueName, lastName } = fullName; // 解构语法console.log(trueName); // Quintionconsole.log(lastName); // Tang

默认值解构

在上面代码中有看到,对象中不存在特定属性的解构,一般会赋值为 undefined ,如果不希望是 undefined ,可以为其设置一个默认值,如下:

const fullName = {    firstName: "Quintion",    lastName: "Tang",};const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法console.log(trueName); // Quintionconsole.log(lastName); // Tangconsole.log(age); // 18

下面来看下存在 age 属性下的结果:

const fullName = {    firstName: "Quintion",    lastName: "Tang",    age: 30,};const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法console.log(trueName); // Quintionconsole.log(lastName); // Tangconsole.log(age); // 30

REST解构

如果想从一个对象中解构一个属性,剩下的属性结构为另一个变量,如下:

const fullName = {    firstName: "Quintion",    lastName: "Tang",    age: 30,};const { age, ...username } = fullName; // 解构语法console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }console.log(age); // 30

在上面的代码片段中,将 username 属性分配给了一个变量,并使用了 rest 运算符 (...) 将变量的其余部属性分配给了一个单独的对象。

关于“JavaScript中的对象解构方法怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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