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 ?、!、??用法及区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要是对动态创建script标签实现跨域资源访问的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本文通过实例代码给大家分享javascript实现弹出广告功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-03-03
很多朋友问小编能否通过JavaScript来阻止超链接的跳转呢，今天给大家通过多种写法来实现这一功能，具体实例代码跟随小编一起看看吧2021-06-06
这篇文章主要介绍了JS实现的文件拖拽上传功能,涉及javascript事件触发、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下2018-05-05
就是一个页面使用两个iframe来调用内容，实现页面导航，更容易控制，可控制性好2008-06-06
这篇文章主要介绍了Bootstrap学习笔记之表单基本样式的相关资料,为大家分享了三种表单样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了在前端开发中,常见的跨域解决方案,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下2023-09-09
这篇文章主要介绍了js实现的tab标签切换效果，功能非常简单，实现了点击切换的效果，推荐给大家，有需要的小伙伴可以参考下。2015-09-09
关于iframe之间的通信问题与自适应高度问题网上有很多，那么这篇文章小编也和大家一起来谈谈iframe之间通信问题及iframe自适应高度问题，有需要的可以参考借鉴。2016-08-08
这篇文章主要给大家介绍了关于JavaScript实现轮播图方法的相关资料,JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示,配合HTML和CSS完成布局和样式设置,文中介绍的方法逻辑清晰一看就懂,需要的朋友可以参考下2023-12-12
最新评论