JavaScript可选链的实现示例

更新时间：2024年01月04日 09:07:47 作者：网络点点滴

本文主要介绍了JavaScript可选链的实现示例,它通过使用问号（?）来判断属性或函数是否存在,避免了因为属性或函数不存在而导致的错误,具有一定的参考价值,感兴趣的可以了解一下

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

到此这篇关于JavaScript可选链的实现示例的文章就介绍到这了,更多相关JavaScript可选链内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Bootstrap基本插件学习笔记之折叠(22)
这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之折叠的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
js 数据存储和DOM编程
本文主要介绍了js数据存储和DOM编程的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
实现checkbox全选、反选、取消JavaScript小脚本异常
实现checkbox全选，反选，取消JavaScript小脚本的时出现点小异常，大家可以看看，以后就不要犯这个特别2的错误了
2014-04-04
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
这篇文章主要介绍了JavaScript 双向链表操作,结合实例形式分析了JavaScript双向链表的创建、增加、查找、删除等相关操作技巧,需要的朋友可以参考下
2020-04-04
微信小程序实现锚点跳转
这篇文章主要为大家详细介绍了微信小程序实现锚点跳转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JavaScript实现烟花绽放动画效果
这篇文章主要介绍了JavaScript如何实现烟花绽放动画效果，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-08-08
JavaScript实现点击切换功能
这篇文章主要为大家详细介绍了JavaScript实现点击切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
Javascript高级技巧分享
这篇文章主要介绍了Javascript高级技巧,需要的朋友可以参考下
2014-02-02
JavaScript中判断函数、变量是否存在
这篇文章主要介绍了JavaScript中判断函数、变量是否存在,本文给出了多个判断函数是否存在的方法,并分别给出代码实例,需要的朋友可以参考下
2015-06-06
京东优选小程序的实现代码示例
这篇文章主要介绍了京东优选小程序的实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02