前端判斷不等于 undefined 不等于 null 的方法

在前端開發(fā)（JavaScript/TypeScript）中，判斷一個變量既不等于 undefined 也不等于 null，通常被稱為判斷“空值”或“有效存在”。

以下是幾種常用且推薦的方法，你可以根據(jù)場景選擇：

1. 最常用：寬松相等法（推薦）

這是最簡潔、最符合語言習慣的寫法。利用 == null 的特性，它能同時匹配 null 和 undefined。

if (value != null) {
  // 代碼邏輯
  // 進入這里說明 value 既不是 null，也不是 undefined
  // value 可以是 0, false, '', [] 等任何其他值
}

• 原理： 在 JavaScript 中，null == undefined 返回 true。因此 value != null 等價于 value !== null && value !== undefined。
• 優(yōu)點： 代碼極簡，性能好，是社區(qū)公認的“最佳實踐”之一。

2. 嚴格判斷：邏輯或（Explicit OR）

如果你追求代碼的絕對清晰，或者團隊規(guī)范禁止使用 ==，可以使用嚴格全等 === 配合邏輯非。

if (value !== null && value !== undefined) {
  // 代碼邏輯
}

• 優(yōu)點： 語義非常明確，沒有任何隱式轉(zhuǎn)換，邏輯清晰。
• 缺點： 相對冗長。

3. 現(xiàn)代語法：空值合并運算符（Nullish Coalescing）

如果你是在進行賦值或條件判斷（例如設(shè)置默認值），這是 ES2020 提供的最新語法。

// 場景A：獲取一個肯定有值的變量
const result = value ?? '默認值';

// 場景B：在 if 中使用（判斷是否存在）
if ((value ?? false) !== false) {
  // 或者更直接地結(jié)合布爾值判斷
}

• 優(yōu)點： 專門用于處理 null 和 undefined，不會把 0、false、'' 誤判為“空”。
• 注意： ?? 運算符在非常舊的瀏覽器（如 IE）中不支持，需要 Babel 轉(zhuǎn)譯。

4. 特殊情況：變量可能未聲明

注意： 如果 value 這個變量可能根本就沒有被 var/let/const 聲明過（直接訪問會報錯），那么直接使用 value != null 會拋出 ReferenceError。

此時必須使用 typeof：

if (typeof value !== 'undefined' && value !== null) {
  // 安全地處理可能未聲明的變量
}

• 注意： 這種情況在現(xiàn)代模塊化開發(fā)中很少見，通常變量都會先聲明。

避坑指南：不要只用!value

請千萬不要使用下面這種寫法，除非你同時也想過濾掉 0、false 和空字符串 ''：

//  錯誤寫法（過度過濾）
if (!value) {
  // 這里會把 0, false, '' 也當成空值處理，通常不是我們想要的
}

總結(jié)建議

以上就是前端判斷變量不等于undefined不等于null的方法推薦的詳細內(nèi)容，更多關(guān)于前端判斷變量不等于undefined不等于null的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論