JavaScript判斷變量是否為null或undefined的方法及對(duì)比詳解
更新時(shí)間：2025年06月03日 09:37:44 作者：CAD老兵
在JavaScript中,判斷一個(gè)變量是否為null或undefined是日常開發(fā)中非常常見的需求,雖然這兩個(gè)值都表示“無值”或“空”,但它們有本質(zhì)區(qū)別,而判斷的方式也有多種,適用于不同場(chǎng)景,本文將系統(tǒng)總結(jié)和比較這些寫法,幫助你選擇合適的方式編寫更健壯的代碼
一、undefined 與 null 的區(qū)別
| 類型 | 值 | 含義 | 使用場(chǎng)景 |
|---|---|---|---|
undefined | 變量聲明了但未賦值 | "未定義" | 系統(tǒng)默認(rèn)賦值 |
null | 顯式賦值為 null | "空值" | 表示有意的“無值” |
二、各種判斷方式
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、"" 也視為“無效值”。
五、總結(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)?，建議使用顯式判斷，避免類型模糊帶來的副作用。
- 編寫工具函數(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)文章
本文給大家分享的是個(gè)人總結(jié)的10條非常常用的原生javascript的小技巧，都是平時(shí)項(xiàng)目中用到的，這里總結(jié)記錄下來，有需要的小伙伴可以參考下。2015-04-04
關(guān)于JSON解析的實(shí)現(xiàn)過程解析
這篇文章主要介紹了關(guān)于JSON解析的實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
JS實(shí)現(xiàn)頁(yè)面打?。ㄕw、局部）
本篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面打?。ㄕw、局部），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
js中常用的4種模糊查詢?cè)斀?includes()、indexOf()、search()、match())
這篇文章主要給大家介紹了關(guān)于js中常用的4種模糊查詢(includes()、indexOf()、search()、match())的相關(guān)資料,搜索可以使我們更快的找到某一個(gè)關(guān)鍵詞或者某一個(gè)商品,所以模糊查詢和下拉匹配也成了前端必備的一個(gè)小技能,需要的朋友可以參考下2023-11-11
本文主要介紹了node.js的事件機(jī)制，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
js傳參數(shù)受特殊字符影響錯(cuò)誤，如果不做處理，會(huì)產(chǎn)品傳參錯(cuò)誤，encodeURI 方法返回一個(gè)編碼的URI，可以有效解決此問題，感興趣的朋友可以參考下2013-10-10
@ResponseBody 和 @RequestBody 注解的區(qū)別
這篇文章主要介紹了@ResponseBody 和 @RequestBody 注解的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)的類似微信聊天效果,可實(shí)現(xiàn)模擬微信聊天效果的對(duì)話框信息傳輸,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
本篇文章主要介紹了深入理解JavaScript 參數(shù)按值傳遞，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript字符串檢索字符的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06