js 判断 null 和 undefined

2026-03-06 10:00:19

在 JavaScript 中，null 和 undefined 都表示“空值”，但它们的含义和来源不同。因此，判断它们的方法也多种多样，具体取决于你的需求（是想区分两者，还是把它们视为同一种“空”状态）。

为了帮你写出更健壮的代码，我整理了以下几种最常用且有效的判断方法：

1. 最推荐的简洁写法：`== null` (或 `!= null`)

这是日常开发中最常用、也最推荐的写法，用于同时判断 null 和 undefined。

原理：利用了 JavaScript 的宽松相等（==）。根据语言规范，null == undefined 返回 true，但它们与其他任何值都不相等。
优点：代码极其简洁，意图明确（意图就是检查变量是否“有值”），且性能优秀。
场景：当你不关心变量到底是 null 还是 undefined，只关心它是否为空时使用。

function checkValue(value) {
    if (value == null) {
        console.log('值为空 (null 或 undefined)');
    } else {
        console.log('值存在:', value);
    }
}

checkValue(null);      // 空
checkValue(undefined); // 空
checkValue(0);         // 存在 (不会误判 0)
checkValue(false);     // 存在 (不会误判 false)

2. 最严谨的写法：`===` 结合逻辑或

如果你需要显式地同时检查两者，或者团队代码规范禁止使用 ==，这是最保险的选择。

写法：value === null || value === undefined
优点：逻辑清晰，没有类型转换的歧义，兼容性好（支持老浏览器）。
缺点：代码稍显冗长。

3. 现代 JS 写法 (ES2020+)：空值合并操作符 `??`

如果你的目的是为空值提供一个默认值，这是目前最优雅的方案。

原理：?? 操作符在左侧操作数为 null 或 undefined 时返回右侧的默认值。
优点：语法非常简洁，且不会像 || 那样误判 0、false 或 ""。

// 传统写法 (可能会误判 0 或 false)
const name1 = userName || '默认名字';

// 现代写法 (只针对 null/undefined)
const name2 = userName ?? '默认名字';

4. 需要区分两者时的判断

如果你需要精确知道变量到底是 null 还是 undefined，直接使用严格相等即可：

判断是否为 null：

if (value === null) {
    // 只有当 value 明确被赋值为 null 时才成立
}

判断是否为 undefined：

// 方法一：严格比较 (适用于已声明的变量)
if (value === undefined) { ... }

// 方法二：typeof (最安全，可检测未声明的变量)
if (typeof value === 'undefined') { ... }

注意：使用 typeof 判断 undefined 的好处在于，即使变量根本没有被声明（not declared），它也不会报错，而是安全地返回 'undefined'。

5. 容易踩坑的写法：`!value`

不推荐使用 if (!value) 来专门判断 null 或 undefined。

原因：JavaScript 中有 6 个“falsy”值（false、0、""、null、undefined、NaN）。使用 !value 会把 0、false 和空字符串 "" 也误判为空值，这通常不是我们想要的。

总结对比表

为了方便你选择，我做了一个简单的对比表：

写法	判断目标	优点	缺点	推荐场景
`value == null`	null 或 undefined	简洁、直观、意图明确	使用了宽松相等	日常开发首选
`value === null \|\| value === undefined`	null 或 undefined	严谨、无类型转换	代码较长	需要兼容老环境或严格代码规范
`value ?? defaultValue`	null 或 undefined	极简、安全	仅用于赋默认值	设置默认值时的首选
`typeof value === 'undefined'`	undefined	安全，不报错	只能判断 undefined	检查全局变量或未声明变量
`!value`	所有 Falsy 值	简单	会误判 0, false, ""	不推荐用于空值判断

💡 我的建议：
在现代前端开发中，我强烈推荐使用 value == null 来进行空值检查，或者使用 value ?? 'default' 来设置默认值。这种写法在 React、Vue 等框架的代码库中非常普遍，既简洁又不容易出错。

需要我整理一份判断空值的速查表，方便你随时查阅吗？

js 判断 null 和 undefined

1. 最推荐的简洁写法：== null (或 != null)

2. 最严谨的写法：=== 结合逻辑或