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 而不会抛出错误,从而避免程序中断。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年工作计划与目标怎么写?如何用手机制作工作待办清单

2024年的钟声已经到来,对于上班族来说,制定一份切实可行的工作计划与目标是非常有必要的。但是,很多人不知道2024年工作计划与目标怎么写?其实,关键在于明确目标、细化计划、合理安排时间,以确保每一步都稳…

BIO和NIO编程(待完善)

目录 IO模型 BIO NIO 常见问题 IO模型 Java共支持3种网络编程IO模式:BIO,NIO,AIO BIO 同步阻塞模型,一个客户端连接对应一个处理线程 代码示例: Server端: public class BioServer {private static …

window下载安装Mongodb数据库

我们先要访问他的官网 https://www.mongodb.com/zh-cn 然后顶部导航栏 选择 (Products/产品) 下的 (Community Edition/社区版) 进入界面后 找到 MongoDB Community Server Download 点击下面的按钮 Select package 然后会弹到这个位置 第一个版本 用系统默认选择的就好 第二…

Redis - 挖矿病毒 db0 库 backup 反复出现解决方案

问题描述 腾讯云的服务器,使用 Docker 部署了 Redis 之后,发现 DB0 中总是出现 4 条 key,分别是 backup01backup02backup03backup04 而自己每次存入 db0 中的数据过一会就会被无缘无故删除掉。 原因分析 挖矿病毒 解决方案 在启动的时候…

PSoc62™开发板之串口通信

实验目的 1.使用串口和PC机通信:接收和发送信息 2.接收GNSS模块定位信息 实验准备 PSoc62™开发板CH340 USB转TTL模块ATGM332D GNSS模块公母头杜邦线x4 板载资源 板载有多少uart 创建工程例程,在libraries/HAL_Drivers/uart_config.h中查看BSP支持…

凯越推出复古150踏板欧洲先上?DAE150/150亮相

今天临下班发现凯越在欧洲的官网上更新了一台复古踏板,外观别说还有点精致的意思,一共分为125和150两个配置,都是采用的水冷单缸发动机。 配置和参数等数据简单过一下,这种车型更多的是看外观了,仪表采用的LCD的显示屏…

MySQL之四大引擎、账号管理以及建库认识

目录 一、数据库存储引擎(发动机) 1.1、认识引擎 1.2、查看存储引擎 1.3、引擎常识 1.4、support字段说明 1.5、四大引擎 二、数据库管理 2.1、元数据库介绍: 2.2、分类: 2.3、增删改查以及使用操作 2.4、权限 三、数…

ArkTS语言应用开发入门指南与简单案例解析

文章目录 前言创建项目及其介绍简单案例学习本文总结问答回顾-学习前言 在前几节课中,我们已经了解了ArkTS语言的特点以及其基本语法。现在,我们将正式利用ArkTS来进行应用开发。本节课将通过一个快速入门案例,让大家熟悉开发工具的用法,并介绍UI的基础概念。 创建项目及…

Mnist手写体数字数据集介绍与在Pytorch中使用

1.介绍 MNIST(Modified National Institute of Standards and Technology)数据集是一个广泛用于机器学习和计算机视觉研究的常用数据集之一。它由手写数字图像组成,包括0到9的数字,每张图像都是28x28像素的灰度图像,图…

探索大模型语言(LLM)科技的革新

文章目录 一. 引言二. 了解大模型语言2.1 什么是LLM?2.2 大模型与大模型语言的区分 三. 机器学习3.1 AI开发3.2 机器学习服务 四. 大模型的应用场景五. 全篇总结 一. 引言 自然语言处理领域的发展取得了巨大的突破,其中广义语言模型(LLM&…

pytorch学习笔记

torchvision处理图像的 pytorch官网上看数据集的包,COCO数据集目标检测、语义分割,cifar物体识别 预训练好的模型 这个模块是图片的处理 root-位置,train-创建的true是个训练集,transform 前面是输出图片的数据类型,“…

ByteTrack算法流程的简单示例

ByteTrack ByteTrack算法是将t帧检测出来的检测框集合 D t {\mathcal{D}_{t}} Dt​ 和t-1帧预测轨迹集合 T ~ t − 1 {\tilde{T}_{t-1}} T~t−1​ 进行匹配关联得到t帧的轨迹集合 T t {T_{t}} Tt​。 首先使用检测器检测t帧的图像得到检测框集合 D t {\mathcal{D}_{t}} …

md文件图片上传方案:Github+PicGo 搭建图床

文章目录 1. PicGo 下载2. 配置Github3. 配置PicGo4. PicGo集成Typora4.1 picGo监听端口设置 5. 测试 1. PicGo 下载 下载地址:https://molunerfinn.com/PicGo/ 尽量下载稳定版本 2. 配置Github 1. 创建一个新仓库,用于存放图片 2. 生成一个token&a…

【安卓的签名和权限】

Android 编译使用哪个key签名? 一看Android.mk 在我们内置某个apk的时候都会带有Android.mk,这里面就写明了该APK使用的是什么签名,如: LOCAL_CERTIFICATE : platform表明使用的是platform签名 LOCAL_CERTIFICATE : PRESIGNED…

SpringBoot整合ElasticSearch实现CRUD操作

本文来说下SpringBoot整合ES实现CRUD操作 文章目录 概述项目搭建ES简单的crud操作保存数据修改数据查看数据删除数据 本文小结 概述 SpringBoot支持两种技术和es交互。一种的jest,还有一种就是SpringData-ElasticSearch。根据引入的依赖不同而选择不同的技术。反正作…

代码随想录算法训练营Day16 | 654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

LeetCode 654 最大二叉树 本题思路:我们可以看到每次其实这个找最大值,然后创建节点的过程就是一个二叉树的前序遍历的过程。所以,我们可以递归来完成它。 先创找到数组中,最大的值的下标,然后创建根节点然后根据下标…

c语言-整型在内存的存储

文章目录 前言一、整型数值在内存中的存储1.1 整型数值的表示形式1.2 二进制的表示形式1.3 整数在内存中存储 二、大端字节序存储和小端字节序存储2.1 大端字节序存储2.2 小端字节序存储2.3 练习 总结 前言 本篇文章叙述c语言中整型数据在内存中的存储方式。 一、整型数值在内…

Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup

1. OptionsAPI与CompositionAPI Vue2的API设计是Options(配置)风格的Vue3的API设计是Composition(组合)风格的 Options API的弊端: Options类型的API,数据、方法、计算属性等,是分散在:data、methods、computed中的,若…

【操作系统xv6】学习记录2 -RISC-V Architecture

说明:看完这节,不会让你称为汇编程序员,知识操作系统的前置。 ref:https://binhack.readthedocs.io/zh/latest/assembly/mips.html https://www.bilibili.com/video/BV1w94y1a7i8/?p7 MIPS MIPS的意思是 “无内部互锁流水级的微…