前端开发中如何准确判断变量非 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 !== ) {
}


