JavaScript中?. 和??分别是什么详解

 更新时间:2023年02月20日 09:55:30   作者:yuzhihui  
在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,下面这篇文章主要给大家介绍了关于JavaScript中?. 和??分别是什么的相关资料,需要的朋友可以参考下

?. 和 ?? 是 JavaScript 中的两个新操作符,分别是可选链操作符(optional chaining operator)和空值合并操作符(nullish coalescing operator)。

?. 操作符

?. 可选链操作符用于访问可能为空或未定义的属性或方法,它允许我们安全地访问嵌套对象的属性,如果中间的属性为空或未定义,则不会抛出错误,而是返回 undefined。例如:

const obj = {
  foo: {
    bar: 123
  }
};

// 普通访问属性的方式
const x = obj.foo.bar; // x = 123

// 使用可选链操作符
const y = obj?.foo?.bar; // y = 123

// 如果对象未定义,则返回 undefined
const z = undefined?.foo?.bar; // z = undefined

?? 操作符

?? 空值合并操作符用于检查一个变量是否为 null 或 undefined,如果是,则返回一个默认值,否则返回该变量的值。与传统的逻辑运算符 || 不同,?? 只会在左侧的值为 null 或 undefined 时返回右侧的默认值,对于其他假值(如空字符串、0、false 等)并不会返回默认值,而是会返回它本身。例如:

const x = undefined ?? 'default'; // x = 'default'
const y = null ?? 'default'; // y = 'default'
const z = 'value' ?? 'default'; // z = 'value'
const a = '' ?? 'default'; // a = ''
const b = '' || 'default'; // b = 'default'

需要注意的是,?? 操作符需要在 ES11 及以上的版本才能使用。

和||运算符的区别:

1. || 只会在左边的值为假值时返回右边的值 (0, '', undefined, null, false 等都为假值)

2. ?? 是在左边的值为undefined或者null时才会返回右边的值

总结

到此这篇关于JavaScript中?. 和??分别是什么的文章就介绍到这了,更多相关JS中?. 和??介绍内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序与h5的相互跳转场景分析

    微信小程序与h5的相互跳转场景分析

    这篇文章主要介绍了微信小程序与h5的相互跳转场景分析,在微信小程序内编写webview文件,通过webview去跳转h5,loadUrl为h5的地址,非嵌套,h5需要跳转打开某个微信小程序,需要的朋友可以参考下
    2023-10-10
  • 微信小程序实现商品数据联动效果

    微信小程序实现商品数据联动效果

    这篇文章主要介绍了微信小程序实现商品数据联动效果,代码很简单,直接复制即可根据自己的需求去修改,对小程序商品数据联动实例代码感兴趣的朋友一起看看吧
    2022-08-08
  • uniapp组件uni-popup弹出层的使用

    uniapp组件uni-popup弹出层的使用

    弹出层组件用于弹出一个覆盖到页面上的内容,本文主要介绍了uniapp组件uni-popup弹出层的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • 判断访客终端类型集锦

    判断访客终端类型集锦

    本文给大家讲解的是使用php和javascript实现的判断访客终端类型的方法集锦,十分的简单实用,有需要的小伙伴可以参考下。
    2015-06-06
  • javascript 通过键名获取键盘的keyCode方法

    javascript 通过键名获取键盘的keyCode方法

    下面小编就为大家分享一篇javascript 通过键名获取键盘的keyCode方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • javascript使用onclick事件改变选中行的颜色

    javascript使用onclick事件改变选中行的颜色

    javascript onclick事件改变选中行的颜色,方法简单,大家参考使用吧
    2013-12-12
  • Bootstrap每天必学之媒体对象

    Bootstrap每天必学之媒体对象

    Bootstrap每天必学之媒体对象,对BootBootstrap每天必学之媒体对象小编也了解的很少,希望通过这篇文章和大家更多的去学习Bootstrap每天必学之媒体对象,从中得到收获。
    2015-11-11
  • JS实现上传图片的三种方法并实现预览图片功能

    JS实现上传图片的三种方法并实现预览图片功能

    在用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览,实现思路有两种,具体实现方法和实例代码大家参考下本文
    2017-07-07
  • JavaScript多线程的实现方法

    JavaScript多线程的实现方法

    以下内容基于IE中GIF的onload事件的基础上,故所有测试IE only
    2007-05-05
  • js实现动画特效的文字链接鼠标悬停提示的方法

    js实现动画特效的文字链接鼠标悬停提示的方法

    这篇文章主要介绍了js实现动画特效的文字链接鼠标悬停提示的方法,实例分析了javascript操作css的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论