在 JavaScript 中,??(双问号运算符)和 ?.(可选链运算符)区别

在 JavaScript 中,??(双问号运算符)和 ?.(可选链运算符)是两种不同的运算符,用于处理不同的情况:

双问号运算符 (??):

?? 运算符是空值合并运算符(Nullish Coalescing Operator)。

它的作用是为了提供一种默认值的设定,当左侧的操作数为 null 或 undefined 时,使用右侧的操作数作为默认值。

示例:

javascript

let value1 = null ?? 'default'; // value1 等于 'default'

let value2 = undefined ?? 'default'; // value2 等于 'default'

let value3 = 'value' ?? 'default'; // value3 等于 'value'

在以上示例中,如果左侧的值为 null 或 undefined,则 ?? 运算符会选择右侧的值作为结果。否则,它会选择左侧的值。

可选链运算符 (?.):

?. 运算符是可选链运算符(Optional Chaining Operator)。

它允许在访问可能为空或未定义的对象属性或方法时,不引发错误,而是返回 undefined。

示例:

javascript

let user = {

name: 'Alice',

social: {

twitter: '@alice'

}

};

let twitterHandle = user.social?.twitter; // twitterHandle 等于 '@alice'

let facebookHandle = user.social?.facebook; // facebookHandle 等于 undefined

在这个示例中,user.social?.twitter 如果 user.social 存在且具有 twitter 属性,则返回 twitter 的值。如果 user.social 不存在或者没有 twitter 属性,则返回 undefined 而不是引发错误。

区别总结:

?? 运算符用于提供默认值,当左侧的值为 null 或 undefined 时使用右侧的默认值。

?. 运算符用于在链式访问属性或方法时,避免因为中间属性不存在而导致的错误,而是安全地返回 undefined。

相关推荐
梦想CAD控件6 分钟前
网页CAD中组(Group)功能的二次开发
前端·javascript·github
讨厌吃蛋黄酥7 分钟前
🔥 JavaScript异步之谜:单线程如何实现“同时”做多件事?99%的人都理解错了!
前端·javascript·面试
青牛科技-Allen7 分钟前
7个常见的DFM问题及其对PCB制造的影响
开发语言·单片机·制造·usb麦克风·立体声录音笔
「QT(C++)开发工程师」10 分钟前
C++语言编程规范-风格
linux·开发语言·c++·qt
hello kitty w14 分钟前
Python学习(10) ----- Python的继承
开发语言·python·学习
newxtc18 分钟前
【广州公共资源交易-注册安全分析报告-无验证方式导致安全隐患】
开发语言·selenium·安全·yolo
懒羊羊不懒@24 分钟前
Java一、二维数组
开发语言·python
爱学习的小鱼gogo43 分钟前
python 单词搜索(回溯-矩阵-字符串-中等)含源码(二十)
开发语言·数据结构·python·矩阵·字符串·回溯·递归栈
徐同保43 分钟前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
~无忧花开~1 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画