JavaScript可选链接

注:本节仍然使用之前的饭店的对象,可以看上几篇文章查看代码
● 如果我们想要看看饭店周一的开门时间,我们会这么写

console.log(restaurant.openingHours.mon.open);

在这里插入图片描述

原因是我们在开放时间中并没有定义周一的开放时间,所有会报错;
● 那我们该如何解决呢,之前我们可能会添加一个IF语句来解决,例如

if (restaurant.openingHours.mon)
console.log(restaurant.openingHours.mon.open);

● 这样确实能解决,但是这时候我们好像不仅需要判断mon存不存在,我们可能还需要去判断openingHours存不存在,那么我们可能还会这么写

if (restaurant.openingHours && restaurant.openingHours.mon)
console.log(restaurant.openingHours.mon.open);

这样就太过于复杂了,判断太多,代码不简洁

ES2020,引入了可选链接

上面的代码可以这样写

console.log(restaurant.openingHours.mon?.open);

● 当然,可选连接也可以多层可选

console.log(restaurant.openingHours?.mon?.open);

真实

● 如果我们不知道饭店周几开门,也不知道周几的几点开门,我们可以逐一的去判断
● 首先我们创建一个周一到周日的数组

const days = ['mon','the','wed','thu','fri','sat','sun'];

● 然后通过我们之前学习的for-of去将数组的每一个数据循环出来

for (const day of days) {
  console.log(day);
}

在这里插入图片描述

● 接着我们就可以通过可选连接来进行判断,从来去得到开门和关门的时间

for (const day of days) {
  const open = restaurant.openingHours[day]?.open;
  console.log(`${day}的开门时间是${open}`);
}

在这里插入图片描述

这样我们就可以一下看到周几开门,开门的时间是多久了
● 那如果我们不想让不开门的星期为undefined,怎么办呢?向之前一样,给他设置一个默认值

for (const day of days) {
  const open = restaurant.openingHours[day]?.open ?? '不开门';
  console.log(`${day}的开门时间是${open}`);
}

在这里插入图片描述

可选链接判断方法是否存在

console.log(restaurant.order?.(0,1) ?? "方法不存在");
console.log(restaurant.ordertest?.(0,1) ?? "方法不存在");

在这里插入图片描述

可选链接判断数组是否存在

const users = [{ name: 'jonas',email: 'example@jonas.com'}];
console.log(users[0]?.name ?? '用户不存在');

在这里插入图片描述

总结

JavaScript中的可选链接是一种语法特性,用于简化访问嵌套对象属性或调用嵌套函数的过程。它通过使用问号(?)来判断属性或函数是否存在,避免了因为属性或函数不存在而导致的错误。
具体而言,可选链接使用问号(?)来替代传统的点号(.)或方括号([])语法,在访问属性或调用函数时可以在链式属性之间插入问号,以确保安全访问。如果链式中的某个属性或函数不存在,可选链接会返回 undefined 而不会抛出错误,从而避免程序中断。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/286274.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C语言】作用域 和 生命周期

🚩 WRITE IN FRONT 🚩 🔎 介绍:"謓泽"正在路上朝着"攻城狮"方向"前进四" 🔎🏅 荣誉:2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…

暂时性死区:JavaScript 中隐藏的陷阱

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

分布式数据库事务故障恢复的原理与实践

关系数据库中的事务故障恢复并不是一个新问题,自70年代关系数据库诞生之后就一直伴随着数据库技术的发展,并且在分布式数据库的场景下又遇到了一些新的问题。本文将会就事务故障恢复这个问题,分别讲述单机数据库、分布式数据库中遇到的问题和…

记事本在手机桌面上怎么找?手机里的记事本怎么找?

在日常生活、工作和学习中,我们时常需要随手记录一些重要的事项、灵感闪现的瞬间或者是待办的任务。比如,在超市购物前,列出购物清单;在开会时,记下重要的讨论点;在学习时,捕捉那一刹那的灵感。…

58.网游逆向分析与插件开发-游戏增加自动化助手接口-游戏菜单文字资源读取的逆向分析

内容来源于:易道云信息技术研究院VIP课 之前的内容:接管游戏的自动药水设定功能-CSDN博客 码云地址(master分支):https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号:34b9c1d43b512d0b4a3c395b…

JavaScript中BOM操作【通俗易懂】

✨前言✨   本篇文章主要在于了解JavaScript中BOM(即浏览器对象模型),以及对它的简单使用 🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍒博主将持续更新学习记录收获,友友们有任何问题可以在评论区留…

Unity | 渡鸦避难所-5 | 角色和摄像机之间的遮挡物半透明

1 前言 角色在地图上移动到岩石后面时,完全被岩石遮挡,玩家只能看到岩石。这逻辑看起来没问题,但并不是玩家想要看到的画面,玩家更希望关注角色的状态 为了避免角色被遮挡,可以使用 Cinemachine Collider 功能&#x…

‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。这个问题如何解决?

这个错误信息 vue-cli-service 不是内部或外部命令,也不是可运行的程序或批处理文件 表示 vue-cli-service 命令在你的系统上未被识别。这通常是因为 Vue CLI 没有被正确安装或其路径没有被加入到系统的环境变量中。以下是几个解决这个问题的步骤: 确认 …

二维码地址门牌系统物业采集端:打造智能化、便捷化的住户登记体验

文章目录 前言一、集成先进科技,提升登记效率二、简化登记流程三、实际效果与应用价值四、未来展望 前言 在科技不断进步的时代,追求智能化与便捷化的生活方式已成为人们的目标。二维码地址门牌系统物业采集端应运而生,为居民提供全新的登记…

怎样消除图片上的水印三招教你如何图片去水印

在数字的洪流中,图片已成为我们生活的一部分,仿佛绿洲之于沙漠。然而,有时这些图片会带上水印,如美玉上的瑕疵,既影响了视觉的美感,也可能阻碍了我们的使用。那么,如何揭去这层恼人的面纱呢&…

微服务-OpenFeign-工程案例

Ribbon 前置知识 是NetFlix的开源项目,主要来提供关于客户端的负载均衡能力。从多个服务提供方,选取一个节点发起调用。 Feign:NetFlix,SpringCloud 的第一代LB(负载均衡)客户端工具包。 OpenFeign:SpringCloud自研&#xff0c…

STM32G030F6P6读写flash失败问题(HAL)

STM32G030是F0系列的升级版,其在性能上比F0要好很多,具体G0参数如下: 最开始做项目选用的单片机是STM32F030F4P6,但是在后期使用中发现,我的FLASH(16K)不够用了,就选择了STM32G030F6…

基于YOLOv8深度学习的人脸面部表情识别系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推…

深入剖析ShardingSphere:探索其内核原理与核心源码,揭秘分库分表技术的奥秘

一、 内核剖析 ShardingSphere虽然有多个产品,但是他们的数据分片主要流程是完全一致的。 解析引擎 解析过程分为词法解析和语法解析。 词法解析器用于将SQL 拆解为不可再分的原 子符号,称为Token。 并根据不同数据库方言所提供的字典,将其…

掌握 Postman Newman:快速启动 API 测试自动化

Postman 中的 Newman 是什么? Newman 是一个 CLI(命令行界面)工具,用于运行 Postman 中的集合(Collection)和环境(Environment)来进行自动化测试。它允许直接从命令行运行 Postman …

解决VMware 虚拟机 ubuntu 20.04 异常关闭导致虚拟网卡 ens33 无法工作问题

问题描述 由于经常使用 SSH 远程链接 VMware 中的虚拟机 ubuntu,每次关闭都是挂起,时间久了,虚拟机运行有些卡顿了,此时可以通过 Linux 命令重启或者关闭 ubuntu,也可以之间使用 VMWare 中的【虚拟机】-- 【电源】-&g…

SpringCloudAlibaba之Nacos

1、简介 Nacos支持基于DNS和基于RPC的服务发现,服务端可以通过SDK或者Api进行服务注册,相应的服务消费者可以使用DNS或者Http查找的方式获取服务列表。Spring Cloud 服务注册中心的服务器很多,如 Zookeeper、Eureka、Consul 等。 Spring Clou…

CCNP课程实验-02-EIGRP_CFG

目录 实验条件网络拓朴需求: 基础配置需求实验1. R4/R5/R6通过二层交换机连接,按照实验拓扑图来宣告路由器接口到相应的EIGRP进程,没有具体说明的可任意宣告,要求关闭自动汇总。2. R2 --- R3上启用EIGRP认证(采用MD5进…

SM2——适用于前后端(java+vue)公用的SM2国密加解密传输

目录 一、SM2国密加解密算法1.1、pom文件引入依赖包1.2、SM2加解密工具类1.3、测试类 一、SM2国密加解密算法 1.1、pom文件引入依赖包 <dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk18on</artifactId><version>…

JMeter使用

目录 启动JMeter 创建线程组 设置线程参数 设置http请求参数 ​编辑 创建查看结果树(显示成功/失败多少以及返回结果等信息) 创建聚合报告(显示响应时间、吞吐量、异常数等信息) 点击上方的执行按钮即可开始压力测试 结果树显示 聚合报告结果显示 启动JMeter 在JMete…