判断变量是否为 `null` 或 `undefined` 的各种写法比较

在 JavaScript 中,判断一个变量是否为 nullundefined 是日常开发中非常常见的需求。虽然这两个值都表示"无值"或"空",但它们有本质区别,而判断的方式也有多种,适用于不同场景。本文将系统总结和比较这些写法,帮助你选择合适的方式编写更健壮的代码。


一、undefinednull 的区别

类型 含义 使用场景
undefined 变量声明了但未赋值 "未定义" 系统默认赋值
null 显式赋值为 null "空值" 表示有意的"无值"

二、各种判断方式

1. 使用宽松相等(==

js 复制代码
if (value == null) {
  // 相当于 value === null || value === undefined
}

✅ 优点:

  • 简洁、直观。
  • 同时判断 nullundefined

⚠️ 注意:

  • 宽松相等有时会被认为不严谨,容易被误用。
  • 不适用于 0false"" 这类也"falsy"的值。

2. 使用严格比较(===

js 复制代码
if (value === null || value === undefined) {
  // 更明确的判断
}

✅ 优点:

  • 精确控制判断条件。
  • 更显式、语义更清晰。

⚠️ 缺点:

  • == null 稍显冗长。

3. 使用 typeof(判断是否为 undefined

js 复制代码
if (typeof value === 'undefined') {
  // 判断未定义
}

✅ 优点:

  • 安全地判断未声明变量。
  • 可用于全局变量或未声明变量的判断。

**⚠️ 不判断 null,仅用于检测 undefined


4. 使用可选链与空值合并(ES2020+)

js 复制代码
let result = value ?? 'default';
// value 为 null 或 undefined 时使用 'default'

✅ 优点:

  • 适用于赋默认值。
  • 写法简洁,安全高效。

**⚠️ 不适用于 0false'' 等"有效的 falsy 值"。


5. 使用 == null 配合逻辑非(常见于布尔上下文)

js 复制代码
if (!(value != null)) {
  // 等价于 value == null
}

虽然不推荐,但在某些场景中可能看到这样的写法。建议保持代码可读性,优先使用清晰写法。


三、实际应用建议

场景 推荐写法
判断变量为 nullundefined if (value == null)
判断变量是否 不为 if (value != null)
安全读取属性 obj?.prop
给变量赋默认值 value ?? defaultValue
精确判断具体类型 if (value === null)typeof value === 'undefined'

四、陷阱与误用

⚠️ 使用 if (!value) 的局限性:

js 复制代码
if (!value) {
  // 会错误判断 0, "", false 为"空"
}

不推荐用于判断是否为 nullundefined,除非明确希望将 false0"" 也视为"无效值"。


五、总结

| 写法 | 判断 null | 判断 undefined | 简洁性 | 可读性 | 推荐度 |
|--------------------------------|---------|-----------------------|-------|-------|----------|-------|------|
| value == null | ✅ | ✅ | ★★★★☆ | ★★★★☆ | ⭐⭐⭐⭐ |
| `value === null | | value === undefined` | ✅ | ✅ | ★★★☆☆ | ★★★★★ | ⭐⭐⭐⭐ |
| typeof value === 'undefined' | ❌ | ✅ | ★★★☆☆ | ★★★☆☆ | ⭐⭐⭐ |
| value ?? defaultValue | ✅ | ✅ | ★★★★★ | ★★★★☆ | ⭐⭐⭐⭐ |
| if (!value) | ✅ | ✅ | ★★★★★ | ★★☆☆☆ | ⭐⭐(谨慎使用) |


六、附加建议

  • 对公共函数或 API 入参,建议使用显式判断,避免类型模糊带来的副作用。
  • 编写工具函数提高可读性,例如:
js 复制代码
function isNil(val) {
  return val == null;
}

这样在阅读代码时更具语义性:

js 复制代码
if (isNil(user)) {
  // user 为 null 或 undefined
}

结语

判断变量是否为 nullundefined 是基础但关键的技巧。理解每种写法的语义与适用场景,能写出更健壮、更易维护的代码。在日常开发中,推荐统一使用 value == nullvalue ?? 等更现代、更语义化的写法,提升代码一致性和可读性。

相关推荐
尾善爱看海6 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
驳是6 小时前
一个组件,提升 react-router 开发的幸福感
前端·preact
GreenTea6 小时前
OpenAI Agents API 上手实测:一次调用把整个 agent loop 甩给 OpenAI
前端·后端·算法
星云API技术支持6 小时前
企业微信二次开发:群权限设置、成员管理与群资料维护的接口组合实践
java·前端·企业微信
京东云开发者7 小时前
81.8 秒的视频,我们改了 15 个版本:一次纯 Codex 驱动的 AI-native 视频实践
前端·aigc
Csvn7 小时前
TypeScript 大型项目架构:从单体 tsconfig 到分层可扩展的工程
前端
计算机魔术师9 小时前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端
计算机魔术师9 小时前
OpenAI的AI代理偷偷给RubyGems下毒,我们却毫无察觉
前端
甲维斯9 小时前
0代码,0建模,3句话开发一个3D游戏!
前端·游戏·游戏开发
IT_陈寒10 小时前
Vue的响应式更新把我坑惨了,原来问题出在这
前端·人工智能·后端