前端开发中如何准确判断变量非 null 且非 undefined

在前端工程化实践中，校验一个变量是否存在（既不是 null 也不是 undefined）几乎是每个开发者都会遇到的场景。这通常被称为'非空检查'，但要注意它和布尔值的'真值'判断不同。

下面整理了几种主流写法，结合实战经验给出建议：

这是社区公认最简洁、性能也最好的写法。利用 JavaScript 的历史遗留特性，null 和 undefined 在宽松相等比较时被视为相同。

if (value != null) {
  // 代码逻辑
  // 进入这里说明 value 既不是 null，也不是 undefined
  // value 可以是 0, false, '', [] 等任何其他值
}

原理很简单：null == undefined 返回 true，所以 value != null 实际上等价于 value !== null && value !== undefined。除非你有特殊的团队规范禁止使用 ==，否则这是首选。

如果你追求代码的绝对清晰，或者团队规范强制要求严格模式，可以手动写出两个条件。

if (value !== null && value !== undefined) {
  // 代码逻辑
}

这种写法语义非常明确，没有任何隐式转换的歧义，但相对冗长一些。

如果是为了设置默认值，ES2020 引入的 ?? 运算符更合适。它专门用于处理 null 和 undefined，不会把 0、false 或空字符串误判为需要替换的值。

// 场景 A：获取一个肯定有值的变量
const result = value ?? '默认值';

// 场景 B：在条件判断中使用
if ((value ?? false) !== false) {
  // 逻辑处理
}

需要注意的是，?? 在 IE 等极旧浏览器中不支持，生产环境通常需要 Babel 转译。

如果 value 这个变量可能根本没有被 var/let/const 声明过（直接访问会抛出 ReferenceError），那么上述方法都会失效。此时必须借助 typeof：

if (typeof value !==  && value !== ) {
  
}

更多推荐文章