快捷導(dǎo)航

JavaScript中 ?、!和?? 的用法及區(qū)別詳解

更新時(shí)間：2024年10月12日 08:42:42 作者：subwaydown

在JavaScript中,?., !., 和 ?? 是三個(gè)不同的操作符,各自有不同的用途,旨在提高代碼的簡(jiǎn)潔性和安全性,尤其是在處理可能的null或undefined值時(shí),下面分別解釋這三個(gè)操作符的用法,需要的朋友可以參考下

1. 可選鏈操作符 ?.

用法: obj?.prop 或 obj?.[expr]

功能: 當(dāng)嘗試訪問(wèn)一個(gè)深層嵌套的屬性時(shí)，如果對(duì)象obj是null或undefined，使用?.操作符可以避免拋出錯(cuò)誤，而是直接返回undefined，而不是嘗試訪問(wèn)不存在的屬性導(dǎo)致的錯(cuò)誤。

示例:

const user = null;
console.log(user?.name); // 輸出 undefined 而不是拋出錯(cuò)誤

2. 非空斷言操作符 !.

用法: obj!.prop

功能: 這個(gè)操作符告訴TypeScript編譯器你確定該表達(dá)式絕對(duì)不會(huì)為null或undefined，從而避免了類型檢查時(shí)的警告。需要注意的是，這僅影響編譯時(shí)的類型檢查，并不會(huì)改變運(yùn)行時(shí)的行為，因此如果實(shí)際上該表達(dá)式為null或undefined，依然會(huì)導(dǎo)致運(yùn)行時(shí)錯(cuò)誤。

示例: （此示例假設(shè)在TypeScript環(huán)境下）

let user: User | null = fetchUserData();
console.log(user!.name); // 告訴TypeScript你確定user不是null或undefined

3. 空值合并操作符 ??

用法: value ?? fallback

功能: 當(dāng)value為null或undefined時(shí)，返回fallback指定的值；否則，返回value本身。這與邏輯或||操作符不同，因?yàn)?code>||會(huì)在value為任何假值（如0、false、空字符串等）時(shí)就返回fallback，而??只在value嚴(yán)格等于null或undefined時(shí)才進(jìn)行替換。

示例:

let num = null;
const result = num ?? 42; // result為42，因?yàn)閚um是null

總結(jié)起來(lái)，?.幫助安全地訪問(wèn)對(duì)象屬性，!.用于告訴TypeScript編譯器忽略可能的null或undefined檢查（使用時(shí)要確保安全），而??則是在值為null或undefined時(shí)提供一個(gè)替代值。

到此這篇關(guān)于JavaScript中 ?、!和?? 的用法及區(qū)別詳解的文章就介紹到這了,更多相關(guān)JavaScript ?、!、??用法及區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: