JavaScript判断变量是否为null或undefined的方法及对比详解
更新时间：2025年06月03日 09:37:44 作者：CAD老兵
在JavaScript中,判断一个变量是否为null或undefined是日常开发中非常常见的需求,虽然这两个值都表示“无值”或“空”,但它们有本质区别,而判断的方式也有多种,适用于不同场景,本文将系统总结和比较这些写法,帮助你选择合适的方式编写更健壮的代码
一、undefined 与 null 的区别
| 类型 | 值 | 含义 | 使用场景 |
|---|---|---|---|
undefined | 变量声明了但未赋值 | "未定义" | 系统默认赋值 |
null | 显式赋值为 null | "空值" | 表示有意的“无值” |
二、各种判断方式
1. 使用宽松相等（==）
if (value == null) {
// 相当于 value === null || value === undefined
}
优点：
- 简洁、直观。
- 同时判断
null和undefined。
注意：
- 宽松相等有时会被认为不严谨，容易被误用。
- 不适用于
0、false、""这类也“falsy”的值。
2. 使用严格比较（===）
if (value === null || value === undefined) {
// 更明确的判断
}
优点：
- 精确控制判断条件。
- 更显式、语义更清晰。
缺点：
- 比
== null稍显冗长。
3. 使用 typeof（判断是否为 undefined）
if (typeof value === 'undefined') {
// 判断未定义
}
优点：
- 安全地判断未声明变量。
- 可用于全局变量或未声明变量的判断。
不判断 null，仅用于检测 undefined。
4. 使用可选链与空值合并（ES2020+）
let result = value ?? 'default'; // value 为 null 或 undefined 时使用 'default'
优点：
- 适用于赋默认值。
- 写法简洁，安全高效。
不适用于 0、false、'' 等“有效的 falsy 值”。
5. 使用 == null 配合逻辑非（常见于布尔上下文）
if (!(value != null)) {
// 等价于 value == null
}
虽然不推荐，但在某些场景中可能看到这样的写法。建议保持代码可读性，优先使用清晰写法。
三、实际应用建议
| 场景 | 推荐写法 |
|---|---|
判断变量为 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) | ✅ | ✅ | ★★★★★ | ★★☆☆☆ | ⭐⭐（谨慎使用） |
六、附加建议
- 对公共函数或 API 入参，建议使用显式判断，避免类型模糊带来的副作用。
- 编写工具函数提高可读性，例如：
function isNil(val) {
return val == null;
}
这样在阅读代码时更具语义性：
if (isNil(user)) {
// user 为 null 或 undefined
}
结语
判断变量是否为 null 或 undefined 是基础但关键的技巧。理解每种写法的语义与适用场景，能写出更健壮、更易维护的代码。在日常开发中，推荐统一使用 value == null 或 value ?? 等更现代、更语义化的写法，提升代码一致性和可读性。
以上就是JavaScript判断变量是否为null或undefined的方法及对比详解的详细内容，更多关于JavaScript判断变量null或undefined的资料请关注脚本之家其它相关文章！
相关文章
本文给大家分享的是个人总结的10条非常常用的原生javascript的小技巧，都是平时项目中用到的，这里总结记录下来，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要介绍了关于JSON解析的实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
本篇文章主要介绍了JS实现页面打印（整体、局部），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
js中常用的4种模糊查询详解(includes()、indexOf()、search()、match())
这篇文章主要给大家介绍了关于js中常用的4种模糊查询(includes()、indexOf()、search()、match())的相关资料,搜索可以使我们更快的找到某一个关键词或者某一个商品,所以模糊查询和下拉匹配也成了前端必备的一个小技能,需要的朋友可以参考下2023-11-11
本文主要介绍了node.js的事件机制，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
js传参数受特殊字符影响错误，如果不做处理，会产品传参错误，encodeURI 方法返回一个编码的URI，可以有效解决此问题，感兴趣的朋友可以参考下2013-10-10
@ResponseBody 和 @RequestBody 注解的区别
这篇文章主要介绍了@ResponseBody 和 @RequestBody 注解的区别的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JS实现的类似微信聊天效果,可实现模拟微信聊天效果的对话框信息传输,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
本篇文章主要介绍了深入理解JavaScript 参数按值传递，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家详细介绍了JavaScript字符串检索字符的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论