JavaScript中 ?、!和?? 的用法及区别详解
更新时间：2024年10月12日 08:42:42 作者：subwaydown
在JavaScript中,?., !., 和 ?? 是三个不同的操作符,各自有不同的用途,旨在提高代码的简洁性和安全性,尤其是在处理可能的null或undefined值时,下面分别解释这三个操作符的用法,需要的朋友可以参考下
1. 可选链操作符 ?.
用法: obj?.prop 或 obj?.[expr]
功能: 当尝试访问一个深层嵌套的属性时，如果对象obj是null或undefined，使用?.操作符可以避免抛出错误，而是直接返回undefined，而不是尝试访问不存在的属性导致的错误。
示例:
const user = null; console.log(user?.name); // 输出 undefined 而不是抛出错误
2. 非空断言操作符 !.
用法: obj!.prop
功能: 这个操作符告诉TypeScript编译器你确定该表达式绝对不会为null或undefined，从而避免了类型检查时的警告。需要注意的是，这仅影响编译时的类型检查，并不会改变运行时的行为，因此如果实际上该表达式为null或undefined，依然会导致运行时错误。
示例: （此示例假设在TypeScript环境下）
let user: User | null = fetchUserData(); console.log(user!.name); // 告诉TypeScript你确定user不是null或undefined
3. 空值合并操作符 ??
用法: value ?? fallback
功能: 当value为null或undefined时，返回fallback指定的值；否则，返回value本身。这与逻辑或||操作符不同，因为||会在value为任何假值（如0、false、空字符串等）时就返回fallback，而??只在value严格等于null或undefined时才进行替换。
示例:
let num = null; const result = num ?? 42; // result为42，因为num是null
总结起来，?.帮助安全地访问对象属性，!.用于告诉TypeScript编译器忽略可能的null或undefined检查（使用时要确保安全），而??则是在值为null或undefined时提供一个替代值。
到此这篇关于JavaScript中 ?、!和?? 的用法及区别详解的文章就介绍到这了,更多相关JavaScript ?、!、??用法及区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序全局变量功能与用法,结合实例形式详细分析了微信小程序全局变量的作用、定义、使用方法及相关操作注意事项,需要的朋友可以参考下2019-01-01
vuex是基于vuex.js的状态管理工具,可以把它理解为一个仓库,下面这篇文章主要给大家介绍了关于uniapp中如何使用vuex并持久化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
Map是一组键值对的结构,具有极快的查找速度,下面这篇文章主要给大家介绍了关于JS利用map整合双数组的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
回车键按下时，自动以Tab键方式在文本输入框之间进行焦点切换的JavaScript代码2009-06-06
这篇文章主要介绍了如何构建一个JavaScript插件系统，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-10-10
本文主要介绍了JS变量及其作用域的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了Bootstrap模态框插入视频的实现代码,需要的朋友可以参考下2017-06-06
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
sticky组件，通常应用于导航条或者工具栏，当网页在某一区域滚动的时候，将导航条或工具栏这类元素固定在页面顶部或底部，方便用户快速进行这类元素提供的操作2016-03-03
js实现页面跳转的几种方式，需要的朋友可以参考下。2010-11-11
这篇文章主要介绍了微信小程序使用npm支持踩坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论