JavaScript判斷變量是否為null或undefined的方法及對(duì)比詳解
一、undefined 與 null 的區(qū)別
| 類型 | 值 | 含義 | 使用場(chǎng)景 |
|---|---|---|---|
undefined | 變量聲明了但未賦值 | "未定義" | 系統(tǒng)默認(rèn)賦值 |
null | 顯式賦值為 null | "空值" | 表示有意的“無(wú)值” |
二、各種判斷方式
1. 使用寬松相等（==）
if (value == null) {
// 相當(dāng)于 value === null || value === undefined
}
優(yōu)點(diǎn)：
- 簡(jiǎn)潔、直觀。
- 同時(shí)判斷
null和undefined。
注意：
- 寬松相等有時(shí)會(huì)被認(rèn)為不嚴(yán)謹(jǐn)，容易被誤用。
- 不適用于
0、false、""這類也“falsy”的值。
2. 使用嚴(yán)格比較（===）
if (value === null || value === undefined) {
// 更明確的判斷
}
優(yōu)點(diǎn)：
- 精確控制判斷條件。
- 更顯式、語(yǔ)義更清晰。
缺點(diǎn)：
- 比
== null稍顯冗長(zhǎng)。
3. 使用 typeof（判斷是否為 undefined）
if (typeof value === 'undefined') {
// 判斷未定義
}
優(yōu)點(diǎn)：
- 安全地判斷未聲明變量。
- 可用于全局變量或未聲明變量的判斷。
不判斷 null，僅用于檢測(cè) undefined。
4. 使用可選鏈與空值合并（ES2020+）
let result = value ?? 'default'; // value 為 null 或 undefined 時(shí)使用 'default'
優(yōu)點(diǎn)：
- 適用于賦默認(rèn)值。
- 寫法簡(jiǎn)潔，安全高效。
不適用于 0、false、'' 等“有效的 falsy 值”。
5. 使用 == null 配合邏輯非（常見于布爾上下文）
if (!(value != null)) {
// 等價(jià)于 value == null
}
雖然不推薦，但在某些場(chǎng)景中可能看到這樣的寫法。建議保持代碼可讀性，優(yōu)先使用清晰寫法。
三、實(shí)際應(yīng)用建議
| 場(chǎng)景 | 推薦寫法 |
|---|---|
判斷變量為 null 或 undefined | if (value == null) |
| 判斷變量是否 不為 空 | if (value != null) |
| 安全讀取屬性 | obj?.prop |
| 給變量賦默認(rèn)值 | value ?? defaultValue |
| 精確判斷具體類型 | if (value === null) 或 typeof value === 'undefined' |
四、陷阱與誤用
使用 if (!value) 的局限性：
if (!value) {
// 會(huì)錯(cuò)誤判斷 0, "", false 為“空”
}
不推薦用于判斷是否為 null 或 undefined，除非明確希望將 false、0、"" 也視為“無(wú)效值”。
五、總結(jié)
| 寫法 | 判斷 null | 判斷 undefined | 簡(jiǎn)潔性 | 可讀性 | 推薦度 | ||
|---|---|---|---|---|---|---|---|
value == null | ? | ? | ★★★★☆ | ★★★★☆ | ???? | ||
| `value === null | value === undefined` | ? | ? | ★★★☆☆ | ★★★★★ | ???? | |
typeof value === 'undefined' | ? | ? | ★★★☆☆ | ★★★☆☆ | ??? | ||
value ?? defaultValue | ? | ? | ★★★★★ | ★★★★☆ | ???? | ||
if (!value) | ? | ? | ★★★★★ | ★★☆☆☆ | ??（謹(jǐn)慎使用） |
六、附加建議
- 對(duì)公共函數(shù)或 API 入?yún)?，建議使用顯式判斷，避免類型模糊帶來(lái)的副作用。
- 編寫工具函數(shù)提高可讀性，例如：
function isNil(val) {
return val == null;
}
這樣在閱讀代碼時(shí)更具語(yǔ)義性：
if (isNil(user)) {
// user 為 null 或 undefined
}
結(jié)語(yǔ)
判斷變量是否為 null 或 undefined 是基礎(chǔ)但關(guān)鍵的技巧。理解每種寫法的語(yǔ)義與適用場(chǎng)景，能寫出更健壯、更易維護(hù)的代碼。在日常開發(fā)中，推薦統(tǒng)一使用 value == null 或 value ?? 等更現(xiàn)代、更語(yǔ)義化的寫法，提升代碼一致性和可讀性。
以上就是JavaScript判斷變量是否為null或undefined的方法及對(duì)比詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript判斷變量null或undefined的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScrip簡(jiǎn)單數(shù)據(jù)類型隱式轉(zhuǎn)換的實(shí)現(xiàn)
本文主要介紹了JavaScrip簡(jiǎn)單數(shù)據(jù)類型隱式轉(zhuǎn)換的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能示例
這篇文章主要介紹了js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能,涉及javascript使用時(shí)間函數(shù)與canvas繪圖結(jié)合實(shí)現(xiàn)進(jìn)度條的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
閉包，官方對(duì)閉包的解釋是：一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分2016-02-02
原生js實(shí)現(xiàn)可愛(ài)糖果數(shù)字時(shí)間特效
本文主要介紹了原生js實(shí)現(xiàn)可愛(ài)糖果數(shù)字時(shí)間特效的實(shí)例代碼，附效果展示和代碼演示。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
本文為大家詳細(xì)介紹下使用JS添加千分位以及去掉千分位的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
這篇文章主要為大家詳細(xì)介紹了bootstrap響應(yīng)式表格的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
其實(shí)為js文件傳參是很久就接觸過(guò)的一個(gè)問(wèn)題，只是一直沒(méi)有放在心上，今天在無(wú)憂看到又有人問(wèn)這個(gè)問(wèn)題，今日總結(jié)一下。2010-05-05
今天通過(guò)一個(gè)案例給大家分享微信小程序連續(xù)簽到7天積分獲得功能，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2020-08-08![[JSF]使用DataModel處理表行事件的實(shí)例代碼](http://img.jbzj.com/images/xgimg/bcimg8.png)
[JSF]使用DataModel處理表行事件的實(shí)例代碼
在使用JSF中，最常用的恐怕就要屬于表格的處理了。使用DataModel可以方便地進(jìn)行對(duì)表行的處理：2013-08-08
這篇文章主要介紹了webpack之devtool詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02