JavaScript判斷變量是否為null或undefined的方法及對比詳解
更新時間：2025年06月03日 09:37:44 作者：CAD老兵
在JavaScript中,判斷一個變量是否為null或undefined是日常開發(fā)中非常常見的需求,雖然這兩個值都表示“無值”或“空”,但它們有本質(zhì)區(qū)別,而判斷的方式也有多種,適用于不同場景,本文將系統(tǒng)總結和比較這些寫法,幫助你選擇合適的方式編寫更健壯的代碼
一、undefined 與 null 的區(qū)別
| 類型 | 值 | 含義 | 使用場景 |
|---|---|---|---|
undefined | 變量聲明了但未賦值 | "未定義" | 系統(tǒng)默認賦值 |
null | 顯式賦值為 null | "空值" | 表示有意的“無值” |
二、各種判斷方式
1. 使用寬松相等（==）
if (value == null) {
// 相當于 value === null || value === undefined
}
優(yōu)點：
- 簡潔、直觀。
- 同時判斷
null和undefined。
注意：
- 寬松相等有時會被認為不嚴謹，容易被誤用。
- 不適用于
0、false、""這類也“falsy”的值。
2. 使用嚴格比較（===）
if (value === null || value === undefined) {
// 更明確的判斷
}
優(yōu)點：
- 精確控制判斷條件。
- 更顯式、語義更清晰。
缺點：
- 比
== null稍顯冗長。
3. 使用 typeof（判斷是否為 undefined）
if (typeof value === 'undefined') {
// 判斷未定義
}
優(yōu)點：
- 安全地判斷未聲明變量。
- 可用于全局變量或未聲明變量的判斷。
不判斷 null，僅用于檢測 undefined。
4. 使用可選鏈與空值合并（ES2020+）
let result = value ?? 'default'; // value 為 null 或 undefined 時使用 'default'
優(yōu)點：
- 適用于賦默認值。
- 寫法簡潔，安全高效。
不適用于 0、false、'' 等“有效的 falsy 值”。
5. 使用 == null 配合邏輯非（常見于布爾上下文）
if (!(value != null)) {
// 等價于 value == null
}
雖然不推薦，但在某些場景中可能看到這樣的寫法。建議保持代碼可讀性，優(yōu)先使用清晰寫法。
三、實際應用建議
| 場景 | 推薦寫法 |
|---|---|
判斷變量為 null 或 undefined | if (value == null) |
| 判斷變量是否 不為 空 | if (value != null) |
| 安全讀取屬性 | obj?.prop |
| 給變量賦默認值 | value ?? defaultValue |
| 精確判斷具體類型 | if (value === null) 或 typeof value === 'undefined' |
四、陷阱與誤用
使用 if (!value) 的局限性：
if (!value) {
// 會錯誤判斷 0, "", false 為“空”
}
不推薦用于判斷是否為 null 或 undefined，除非明確希望將 false、0、"" 也視為“無效值”。
五、總結
| 寫法 | 判斷 null | 判斷 undefined | 簡潔性 | 可讀性 | 推薦度 | ||
|---|---|---|---|---|---|---|---|
value == null | ? | ? | ★★★★☆ | ★★★★☆ | ???? | ||
| `value === null | value === undefined` | ? | ? | ★★★☆☆ | ★★★★★ | ???? | |
typeof value === 'undefined' | ? | ? | ★★★☆☆ | ★★★☆☆ | ??? | ||
value ?? defaultValue | ? | ? | ★★★★★ | ★★★★☆ | ???? | ||
if (!value) | ? | ? | ★★★★★ | ★★☆☆☆ | ??（謹慎使用） |
六、附加建議
- 對公共函數(shù)或 API 入?yún)?，建議使用顯式判斷，避免類型模糊帶來的副作用。
- 編寫工具函數(shù)提高可讀性，例如：
function isNil(val) {
return val == null;
}
這樣在閱讀代碼時更具語義性：
if (isNil(user)) {
// user 為 null 或 undefined
}
結語
判斷變量是否為 null 或 undefined 是基礎但關鍵的技巧。理解每種寫法的語義與適用場景，能寫出更健壯、更易維護的代碼。在日常開發(fā)中，推薦統(tǒng)一使用 value == null 或 value ?? 等更現(xiàn)代、更語義化的寫法，提升代碼一致性和可讀性。
以上就是JavaScript判斷變量是否為null或undefined的方法及對比詳解的詳細內(nèi)容，更多關于JavaScript判斷變量null或undefined的資料請關注腳本之家其它相關文章！
相關文章
本文給大家分享的是個人總結的10條非常常用的原生javascript的小技巧，都是平時項目中用到的，這里總結記錄下來，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了關于JSON解析的實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
本篇文章主要介紹了JS實現(xiàn)頁面打?。ㄕw、局部），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
js中常用的4種模糊查詢詳解(includes()、indexOf()、search()、match())
這篇文章主要給大家介紹了關于js中常用的4種模糊查詢(includes()、indexOf()、search()、match())的相關資料,搜索可以使我們更快的找到某一個關鍵詞或者某一個商品,所以模糊查詢和下拉匹配也成了前端必備的一個小技能,需要的朋友可以參考下2023-11-11
本文主要介紹了node.js的事件機制，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
js傳參數(shù)受特殊字符影響錯誤，如果不做處理，會產(chǎn)品傳參錯誤，encodeURI 方法返回一個編碼的URI，可以有效解決此問題，感興趣的朋友可以參考下2013-10-10
@ResponseBody 和 @RequestBody 注解的區(qū)別
這篇文章主要介紹了@ResponseBody 和 @RequestBody 注解的區(qū)別的相關資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JS實現(xiàn)的類似微信聊天效果,可實現(xiàn)模擬微信聊天效果的對話框信息傳輸,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
本篇文章主要介紹了深入理解JavaScript 參數(shù)按值傳遞，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家詳細介紹了JavaScript字符串檢索字符的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06