在JavaScript中判斷空值的方法匯總
更新時間：2025年11月26日 10:15:43 作者：yingjuxia.com
在JavaScript中,判斷空值、null和undefined是常見任務(wù),因這些值在邏輯處理中可能導(dǎo)致錯誤或意外行為,JavaScript中的空值通常指空字符串、空對象 、空數(shù)組 、null、undefined、NaN等,以下是詳細(xì)的講解,介紹判斷這些值的方法,包含代碼示例、使用場景和注意事項
1.常見空值類型
null：表示“無值”或“空對象引用”，通常由程序員顯式設(shè)置。undefined：表示變量未定義、函數(shù)無返回值或?qū)ο髮傩圆淮嬖凇?/li>- 空字符串 (
"")：字符串長度為 0。 - 空數(shù)組 (
[])：數(shù)組長度為 0。 - 空對象 (
{})：對象沒有可枚舉屬性。 NaN：表示“非數(shù)字”，常出現(xiàn)在數(shù)學(xué)運算失敗時。0、false：在某些場景下被視為“假值”（falsy），但不總是“空值”。
2.判斷方法
方法 1：使用===或==嚴(yán)格/寬松比較
- 描述：使用嚴(yán)格相等 (
===) 判斷特定值是否為null或undefined。 - 適用場景：精確檢查變量是否為
null或undefined。 - 代碼示例：
const value1 = null; const value2 = undefined; const value3 = ''; console.log(value1 === null); // true console.log(value2 === undefined); // true console.log(value3 === ''); // true console.log(value1 == null); // true（寬松比較，null 和 undefined 相等） console.log(value2 == null); // true
- 說明：
===：嚴(yán)格比較類型和值，推薦使用。==：寬松比較，null == undefined為true，但可能導(dǎo)致意外結(jié)果。
- 注意：
==不區(qū)分null和undefined，慎用。
方法 2：檢查 Falsy 值（隱式轉(zhuǎn)換）
- 描述：利用 JavaScript 的假值（falsy values：
false、0、""、null、undefined、NaN）在條件語句中判斷。 - 適用場景：快速檢查變量是否“為空”或“無效”，但需明確上下文。
- 代碼示例：
const value = '';
if (!value) {
console.log('值為空或假值'); // 輸出：值為空或假值
}
// 注意：0 和 false 也會觸發(fā)
const num = 0;
if (!num) {
console.log('num 是假值'); // 輸出
}
- 說明：
if (!value)會將所有假值視為“空”，包括0和false。 - 注意：不適合需要區(qū)分
null、undefined或0的場景。
方法 3：使用typeof檢查undefined
- 描述：通過
typeof運算符檢查變量類型是否為"undefined"。 - 適用場景：專門檢查變量是否未定義。
- 代碼示例：
let value;
console.log(typeof value === 'undefined'); // true
const obj = {};
console.log(typeof obj.prop === 'undefined'); // true（屬性不存在）
- 說明：
typeof安全，即使變量未聲明也不會拋錯（如typeof undeclaredVar）。 - 注意：
typeof null返回"object"，不能用于判斷null。
方法 4：檢查NaN（使用isNaN或Number.isNaN）
- 描述：使用全局
isNaN或Number.isNaN判斷值是否為NaN。 - 適用場景：處理數(shù)值運算結(jié)果。
- 代碼示例：
const value = parseInt('abc');
console.log(isNaN(value)); // true
console.log(Number.isNaN(value)); // true
// 注意全局 isNaN 的行為
console.log(isNaN('abc')); // true（字符串被強制轉(zhuǎn)換為 NaN）
console.log(Number.isNaN('abc')); // false（嚴(yán)格檢查）
- 說明：
isNaN：嘗試將參數(shù)轉(zhuǎn)換為數(shù)字后檢查是否為NaN。Number.isNaN：更嚴(yán)格，僅當(dāng)值為NaN時返回true（推薦）。
- 注意：
isNaN可能誤判非數(shù)字值，優(yōu)先用Number.isNaN。
方法 5：檢查空對象或空數(shù)組
- 描述：通過檢查對象鍵數(shù)量（Object.keys）或數(shù)組長度（length）判斷是否為空。
- 適用場景：處理對象或數(shù)組是否為空。
- 代碼示例：
const obj = {};
const arr = [];
console.log(Object.keys(obj).length === 0); // true（空對象）
console.log(arr.length === 0); // true（空數(shù)組）
- 說明：
Object.keys(obj).length：檢查對象是否有可枚舉屬性。arr.length：檢查數(shù)組元素數(shù)量。
- 注意：空對象可能包含不可枚舉屬性，需視情況使用
Object.getOwnPropertyNames。
方法 6：綜合檢查空值
- 描述：結(jié)合多種方法，檢查所有可能的空值（
null、undefined、空字符串、空對象、空數(shù)組、NaN）。 - 適用場景：需要通用函數(shù)驗證輸入是否“有效”。
- 代碼示例：
function isEmpty(value) {
return (
value === null ||
value === undefined ||
value === '' ||
(typeof value === 'object' && Object.keys(value).length === 0) ||
(Array.isArray(value) && value.length === 0) ||
Number.isNaN(value)
);
}
console.log(isEmpty(null)); // true
console.log(isEmpty(undefined)); // true
console.log(isEmpty('')); // true
console.log(isEmpty({})); // true
console.log(isEmpty([])); // true
console.log(isEmpty(NaN)); // true
console.log(isEmpty(0)); // false
console.log(isEmpty('text')); // false
- 說明：綜合檢查，覆蓋常見空值場景。
方法 7：使用 jQuery（可選）
- 描述：通過 jQuery 獲取 DOM 元素值并檢查是否為空。
- 適用場景：項目已使用 jQuery，處理輸入框等 DOM 元素。
- 代碼示例：
// HTML: <input type="text" id="input">
$(document).ready(function() {
const value = $('#input').val();
if (value === '' || value === null || value === undefined) {
console.log('輸入為空');
} else {
console.log('輸入值:', value);
}
});
- 說明：
val()返回空字符串、null 或 undefined，需單獨檢查。
3.綜合示例
以下是一個完整示例，展示多種判斷空值的方法：
<!DOCTYPE html>
<html>
<head>
<title>判斷空值</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="input" placeholder="輸入內(nèi)容">
<button onclick="checkValue()">檢查</button>
<div id="output"></div>
<script>
function isEmpty(value) {
return (
value === null ||
value === undefined ||
value === '' ||
(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
(Array.isArray(value) && value.length === 0) ||
Number.isNaN(value)
);
}
function checkValue() {
const input = document.getElementById('input').value;
const output = document.getElementById('output');
// 原生檢查
output.innerHTML += `<p>輸入值: ${input || '無'}</p>`;
output.innerHTML += `<p>是空值: ${isEmpty(input)}</p>`;
output.innerHTML += `<p>是 null: ${input === null}</p>`;
output.innerHTML += `<p>是 undefined: ${input === undefined}</p>`;
output.innerHTML += `<p>是空字符串: ${input === ''}</p>`;
output.innerHTML += `<p>是 NaN: ${Number.isNaN(input)}</p>`;
// jQuery 檢查
const jqValue = $('#input').val();
output.innerHTML += `<p>jQuery 獲取: ${jqValue || '無'}</p>`;
}
</script>
</body>
</html>
4.方法對比
| 方法 | 適用對象 | 優(yōu)點 | 缺點 |
|---|---|---|---|
=== / == | null, undefined | 精確，簡單 | 需逐一檢查不同類型 |
| Falsy 檢查 | 所有假值 | 快速，適合簡單邏輯 | 可能誤判 0 或 false |
typeof | undefined | 安全，即使變量未聲明 | 不能區(qū)分 null |
Number.isNaN | NaN | 嚴(yán)格檢查 NaN | 僅限 NaN |
Object.keys / length | 空對象/數(shù)組 | 準(zhǔn)確判斷空對象/數(shù)組 | 需額外檢查類型 |
jQuery val() | DOM 輸入 | 簡潔，適合 jQuery 項目 | 需引入 jQuery |
5.注意事項
- 類型混淆：
null和undefined不同，typeof null返回"object"，需單獨處理。NaN不等于自身，需用Number.isNaN檢查。
- 假值陷阱：
0、false、""是假值，但不一定是“空值”，需明確需求。- 示例：
if (!value)會誤判0為“空”。
- 瀏覽器兼容性：
Number.isNaN和Object.keys是 ES5+，現(xiàn)代瀏覽器全支持。- 老舊瀏覽器（如 IE8）需 polyfill。
- 安全性：
- 檢查 DOM 輸入時，過濾 XSS 風(fēng)險：
const safeValue = input.replace(/[<>]/g, '');
- 性能：
===和typeof效率最高，適合簡單檢查。Object.keys對大對象有開銷，謹(jǐn)慎使用。
6.總結(jié)
- 首選方法：
===精確檢查null和undefined；Number.isNaN檢查NaN。 - 綜合檢查：使用自定義
isEmpty函數(shù)覆蓋多種空值場景。 - jQuery 項目：結(jié)合
val()檢查 DOM 輸入。 - 選擇依據(jù)：
- 簡單檢查：
===或typeof。 - 復(fù)雜場景：綜合函數(shù)或
Object.keys。 - DOM 操作：jQuery 或
value屬性。
- 簡單檢查：
- 測試：在不同場景（空輸入、未定義變量）測試，確保邏輯健壯。
如果需要特定場景的實現(xiàn)（如處理特定類型的空值、結(jié)合表單驗證），或其他 JavaScript 相關(guān)問題，請?zhí)峁└嗉?xì)節(jié)，我可以進(jìn)一步優(yōu)化回答！
以上就是在JavaScript中判斷空值的方法匯總的詳細(xì)內(nèi)容，更多關(guān)于JavaScript判斷空值的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
layer實現(xiàn)彈出層自動調(diào)節(jié)位置
今天小編就為大家分享一篇layer實現(xiàn)彈出層自動調(diào)節(jié)位置，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript用二分法查找數(shù)據(jù)的實例代碼
本篇文章主要介紹了JavaScript用二分法查找數(shù)據(jù)的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
JS實現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼
這篇文章主要介紹了JS實現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼,通過JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式屬性實現(xiàn)手風(fēng)琴效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)滾動條自動滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了js在IE與FF之間的區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
下面的js代碼不管if條件的結(jié)果是true還是false都會執(zhí)行大括號的代碼，結(jié)果發(fā)現(xiàn)if條件括號后面多寫了分號，崩潰啊2013-11-11
ECMAScript 基礎(chǔ)知識...2007-06-06
這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下2017-08-08
JS如何獲取指定范圍內(nèi)的隨機數(shù)含小數(shù)
這篇文章主要介紹了JS如何獲取指定范圍內(nèi)的隨機數(shù)含小數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本文主要介紹了js代碼異常監(jiān)控的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01