快捷導(dǎo)航

JavaScript?中處理?null和?undefined的常見方法

更新時間：2025年01月16日 12:08:40 作者：i_am_a_div_日積月累_

文章介紹了可選鏈操作符（?.）和空值合并操作符（??）的使用方法,并對比了它們與邏輯非運(yùn)算符（!）的區(qū)別,還討論了使用寬松比較運(yùn)算符（==）和自定義函數(shù)來優(yōu)化判斷的幾種方法,以提高代碼的可讀性和性能,感興趣的朋友跟隨小編一起看看吧

1.可選鏈操作符（?.）

const user = {
    address: {
        city: "Beijing"
    }
};
console.log(user.address?.city); // 輸出 "Beijing"
console.log(user.unknown?.city); // 輸出 undefined

當(dāng)鏈?zhǔn)讲檎也坏较乱粋€屬性時候，就會返回undefined

2.空值合并操作符（??）

當(dāng)??的左側(cè)值為 null 或 undefined的時候就會取到右側(cè)的默認(rèn)值

console.log(null ?? "default"); // 輸出 "default"
console.log(undefined ?? "default"); // 輸出 "default"
console.log("Hello" ?? "default"); // 輸出 "Hello"
console.log("" ?? "default"); // 輸出 ""
console.log(0 ?? "default"); // 輸出 0
console.log(false ?? "default"); // 輸出 false
console.log(false || "default"); // 輸出 default

注意??和||的區(qū)別
??：僅僅在 null 和 undefined 時返回 defaultValue
||:不僅會在 null 和 undefined 時返回 defaultValue，也會在 false, 0, '' (空字符串) 等其他假值情況下返回默認(rèn)值defaultValue

3.優(yōu)化判斷

一般在判斷if語句時候，經(jīng)常會有類似的判斷。
if(a.aa === undefined || a.aa === null || a.aa === ''){
}

是的，可以通過使用更簡潔和可讀性更高的方式來優(yōu)化這種判斷。以下是幾種常見的優(yōu)化方法：

3.1 使用 == 進(jìn)行寬松比較

使用寬松相等運(yùn)算符 == 可以同時檢查 undefined 和 null：

if (a.aa == null || a.aa === '') {
    // 處理邏輯
}

3.2 使用邏輯非運(yùn)算符 !

可以利用邏輯非運(yùn)算符 ! 來檢查 falsy 值（如 undefined、null、''、0、NaN 和 false）：

if (!a.aa) {
    // 處理邏輯
}

不過要注意，這種方式會將所有 falsy 值都視為 true，如果你需要排除 0 或 false，則不適用。

3.3 使用可選鏈和空值合并運(yùn)算符

結(jié)合可選鏈操作符和空值合并運(yùn)算符，可以更加簡潔：

if (a.aa?.trim() === '') {
    // 處理邏輯
}

3.4 使用自定義函數(shù)

如果這種檢查在多個地方使用，可以考慮封裝成一個函數(shù)：

function isEmpty(value) {
    return value == null || value === '';
}
if (isEmpty(a.aa)) {
    // 處理邏輯
}

總結(jié)

選擇哪種方式取決于具體的需求和上下文。使用 ! 運(yùn)算符是最簡潔的，但需要確保不會誤判其他 falsy 值。如果需要更嚴(yán)格的檢查，使用 == 或自定義函數(shù)可能更合適。

到此這篇關(guān)于JavaScript 中處理 null和 undefined情況分析的文章就介紹到這了,更多相關(guān)js處理null和underfined內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript?中處理?null和?undefined的常見方法

目錄

1.可選鏈操作符（?.）

2.空值合并操作符（??）

3.優(yōu)化判斷

3.1 使用 == 進(jìn)行寬松比較

3.2 使用邏輯非運(yùn)算符 !

3.3 使用可選鏈和空值合并運(yùn)算符

3.4 使用自定義函數(shù)

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具