当前位置：首页 > news >正文

JS 中判断 null、undefined 与 NaN 的权威方法及场景实践

news 来源：原创 2025/5/25 8:32:40

在 JavaScript 中，null、undefined 和 NaN 是三个特殊的「非正常值」，正确判断它们是保证代码健壮性的关键。本文结合 ECMA 规范与 MDN 权威文档，系统梳理三者的判断方法、原理及典型场景，帮助开发者规避常见误区。

一、理解三个特殊值的本质

undefined：表示「变量未初始化」或「对象属性未显式赋值」（如声明变量未赋值、访问不存在的对象属性）。
null：表示「有意为之的空值」（通常用于表示「空对象」，如 let obj = null）。
NaN（Not a Number）：表示「非数字」，常见于数值计算失败场景（如 0/0、"abc" - 1）。

二、判断 `undefined` 的权威方法

undefined 的核心特征是「未初始化」，判断时需注意兼容性。

1. 使用 `typeof`（推荐，兼容未声明变量）

typeof 返回变量的类型字符串（"undefined" 表示未初始化）。即使变量未声明，typeof 也不会抛出错误，适合安全检查。

javascript

// 变量已声明但未初始化
let a; 
console.log(typeof a === "undefined"); // true// 检查对象不存在的属性（安全）
const obj = { name: "张三" };
console.log(typeof obj.age === "undefined"); // true（age属性未定义）// 变量未声明（不会报错）
console.log(typeof b === "undefined"); // true（b未声明）

2. 直接比较 `=== undefined`（需变量已声明）

若变量已声明，可通过严格等于 undefined 判断，但未声明变量会抛出 ReferenceError。

javascript

let c; 
console.log(c === undefined); // true（变量已声明未初始化）// 未声明变量直接比较会报错！
// console.log(d === undefined); // Uncaught ReferenceError: d is not defined

三、判断 `null` 的权威方法

null 是「主动设置的空对象」，需严格区分于其他值。

唯一可靠方式：`=== null`

typeof null 会返回 "object"（历史遗留问题），因此必须通过严格等于 null 判断。

javascript

const obj = null;
console.log(obj === null); // true（正确判断null）// 错误示例：typeof无法区分null和对象
console.log(typeof null); // "object"（无法用typeof判断null）

四、判断 `NaN` 的权威方法

NaN 是唯一不满足 x === x 的值（NaN !== NaN），判断需结合其特性。

1. ES6 新增 `Number.isNaN`（严格判断，推荐）

仅当值本身是 NaN 时返回 true，不会隐式转换其他类型。

javascript

console.log(Number.isNaN(NaN)); // true（直接判断NaN）
console.log(Number.isNaN("abc" - 1)); // true（计算结果为NaN）
console.log(Number.isNaN("123")); // false（字符串不是NaN）

2. 传统 `isNaN`（非严格，需谨慎）

先将参数隐式转换为数字，再判断是否为 NaN，可能误判其他类型。

javascript

console.log(isNaN(NaN)); // true（正确）
console.log(isNaN("abc")); // true（"abc"转数字为NaN）
console.log(isNaN("123")); // false（"123"转数字为123）

3. 利用 `NaN !== NaN` 特性（兼容旧环境）

NaN 是唯一不满足自身相等的值，可手动实现判断函数。

javascript

function isNaNPolyfill(value) {return value !== value; 
}
console.log(isNaNPolyfill(NaN)); // true
console.log(isNaNPolyfill("abc" - 1)); // true（结果为NaN）

五、综合场景与补充方法

实际开发中，需根据需求灵活组合判断逻辑。

场景 1：统一判断 `null` 或 `undefined`

利用宽松相等（null == undefined 为 true），快速判断两者。

javascript

const value = null;
if (value == null) { // 等价于 value == undefinedconsole.log("值为null或undefined"); // 触发
}

场景 2：函数参数默认值处理（ES6 解构赋值）

解构赋值的默认值仅在参数为 null 或 undefined 时生效，其他假值（如 0）不触发。

javascript

function getUserInfo({ age = "未知" } = {}) { console.log(`年龄：${age}`);
}getUserInfo({ age: null }); // 输出 "年龄：未知"（null触发默认值）
getUserInfo({ age: 0 }); // 输出 "年龄：0"（0是有效值，不触发默认值）

场景 3：使用工具库（如 Lodash）

成熟工具库提供语义化方法，提升代码可读性。

javascript

import { isNil, isNull, isUndefined } from "lodash";isNull(null); // true（仅判断null）
isUndefined(undefined); // true（仅判断undefined）
isNil(null); // true（判断null或undefined）
isNil(undefined); // true

六、总结与最佳实践

值	权威判断方法	适用场景
`undefined`	`typeof value === "undefined"`	安全检查未声明变量或对象属性
`null`	`value === null`	明确判断「主动设置的空对象」
`NaN`	`Number.isNaN(value)`（ES6）	严格判断非数字结果
综合判断	`value == null`（null/undefined） `lodash.isNil`（工具库）	无需区分 null 和 undefined 时快速过滤