JavaScript中 ?、!和?? 的用法及區(qū)別詳解
更新時間：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環(huán)境下）
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中 ?、!和?? 的用法及區(qū)別詳解的文章就介紹到這了,更多相關JavaScript ?、!、??用法及區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序全局變量功能與用法,結合實例形式詳細分析了微信小程序全局變量的作用、定義、使用方法及相關操作注意事項,需要的朋友可以參考下2019-01-01
vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個倉庫,下面這篇文章主要給大家介紹了關于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模態(tài)框插入視頻的實現代碼,需要的朋友可以參考下2017-06-06
使用Sticky組件實現帶sticky效果的tab導航和滾動導航的方法
sticky組件，通常應用于導航條或者工具欄，當網頁在某一區(qū)域滾動的時候，將導航條或工具欄這類元素固定在頁面頂部或底部，方便用戶快速進行這類元素提供的操作2016-03-03
js實現頁面跳轉的幾種方式，需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了微信小程序使用npm支持踩坑，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11