脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript可选链

JavaScript可选链的实现示例

 更新时间：2024年01月04日 09:07:47   作者：网络点点滴  
本文主要介绍了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 而不会抛出错误，从而避免程序中断。

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

您可能感兴趣的文章:

相关文章

  • echarts使用中关于y坐标轴无法正常显示的问题解决记录

    echarts使用中关于y坐标轴无法正常显示的问题解决记录

    Echarts是由百度提供的数据可视化解决方案,下面这篇文章主要给大家介绍了关于echarts使用中关于y坐标轴无法正常显示的问题解决记录,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 微信小程序实现搜索框功能及踩过的坑

    微信小程序实现搜索框功能及踩过的坑

    这篇文章主要介绍了微信小程序实现搜索框功能及踩过的坑,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • 为什么JS中eval处理JSON数据要加括号

    为什么JS中eval处理JSON数据要加括号

    这篇文章主要介绍了为什么JS中eval处理JSON数据要加括号的相关资料,需要的朋友可以参考下
    2015-04-04
  • d3.js实现简单的网络拓扑图实例代码

    d3.js实现简单的网络拓扑图实例代码

    最近一直在学习d3.js，大家都知道d3.js是一个非常不错的数据可视化库，我们可以用它来做一些比较酷的东西，比如可以来显示一些简单的网络拓扑图，这篇文中就通过实例代码给大家介绍了如何利用d3.js实现简单的网络拓扑图，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-11-11
  • 浅析JavaScript中回调地狱与asyn函数和await函数原理

    浅析JavaScript中回调地狱与asyn函数和await函数原理

    这篇文章主要介绍了JavaScript中回调地狱与asyn函数和await函数原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • js批量设置样式的三种方法不推荐使用with

    js批量设置样式的三种方法不推荐使用with

    批量设置样式的三种方法:第一种使用JSON/第二种使用cssText/使用第三种with(不推荐使用),感兴趣的朋友可以参考下，希望可以帮助到你
    2013-02-02
  • JavaScript实现的SHA-1加密算法完整实例

    JavaScript实现的SHA-1加密算法完整实例

    这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
    2016-02-02
  • 使用JavaScript实现alert的实例代码

    使用JavaScript实现alert的实例代码

    本文通过实例代码给大家介绍了js实现alert的方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-07-07
  • JavaScript 闭包深入理解(closure)

    JavaScript 闭包深入理解(closure)

    最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。
    2009-05-05
  • 控制台报错:Cannot access 'xxx' before initialization解决方法

    控制台报错:Cannot access 'xxx' before initializatio

    这篇文章主要给大家介绍了关于控制台报错:Cannot access 'xxx' before initialization的解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11

最新评论