JavaScript 中 null 和 undefined 的深度对比
一、本质区别
| 特性 | null |
undefined |
|---|---|---|
| 语义 | 开发者主动赋值的空值 | 系统默认的空值（未初始化状态） |
| 类型 | typeof null → "object" |
typeof undefined → "undefined" |
| 初始值 | 必须显式赋值 | 变量声明后默认值 |
二、使用场景对比
1. undefined 的典型场景
变量未初始化：
let a; console.log(a); // undefined函数参数未传递：
function fn(b) { console.log(b) } fn(); // undefined对象属性未定义：
const obj = {}; console.log(obj.key); // undefined
2. null 的典型场景
主动释放对象引用：
let data = fetchData(); data = null; // 通知GC回收内存DOM查询结果不存在：
document.getElementById('non-existent'); // null显式空值返回值：
function findUser(id) { return users[id] || null; // 明确表示"未找到" }
三、类型转换差异
| 转换操作 | null |
undefined |
|---|---|---|
| 数值转换 | Number(null) → 0 |
Number(undefined) → NaN |
| 布尔转换 | Boolean(null) → false |
Boolean(undefined) → false |
| 字符串转换 | String(null) → "null" |
String(undefined) → "undefined" |
经典面试问题：
null + 10; // 10（0 + 10）
undefined + 10; // NaN（NaN + 10）四、相等性比较
| 比较方式 | 结果 | 原理说明 |
|---|---|---|
null == undefined |
true |
抽象相等算法特例 |
null === undefined |
false |
类型不同 |
Object.is(null, null) |
true |
严格值比较 |
Object.is(undefined, undefined) |
true |
严格值比较 |
特殊案例：
JSON.stringify({a: null, b: undefined});
// 输出：'{"a":null}'（undefined被忽略）五、常见陷阱与解决方案
1. 类型检测陷阱
// 错误方式：
if (!value) {} // 会过滤掉0、''、false等合法值
// 正确方式：
if (value === null || value === undefined) {}2. 默认参数处理
function setName(name = 'Anonymous') {
console.log(name);
}
setName(null); // 输出 null（不会触发默认值）
setName(undefined); // 输出 "Anonymous"3. 解构赋值默认值
const { a = 10, b = 20 } = { a: null };
console.log(a); // null（默认值不生效）
console.log(b); // 20六、最佳实践指南
初始化规范：
变量声明后立即赋值（避免意外的
undefined）使用
let value = null表示"暂时无值"
API设计原则：
函数参数默认用
undefined表示可选参数用
null明确表示"无返回值"
安全检测方案：
// 通用空值检测 const isEmpty = val => val == null; // 同时检测null和undefined // 严格类型检测 const isNull = val => val === null; const isUndefined = val => val === void 0;JSON处理技巧：
// 保留null，过滤undefined JSON.stringify({ a: null, b: undefined }); // {"a":null} // 转换undefined为null const replacer = (key, val) => (val === undefined ? null : val); JSON.stringify({ a: undefined }, replacer); // {"a":null}
七、底层原理扩展
历史遗留问题：
typeof null返回"object"是 JavaScript 设计初期的 Bug（1995年）由于修复会导致大量现存网站崩溃，该行为被保留至今
V8引擎处理：
undefined是全局只读属性null是关键字，不可被重新赋值
内存表现：
null和undefined在内存中占用固定空间（通常为机器字长）不同于对象引用，它们不指向堆内存地址
总结
理解 null 和 undefined 的关键差异：
语义区别：
undefined是系统级空值，null是应用级空值类型系统：
typeof检测的陷阱与解决方案使用场景：初始化策略、API设计、状态管理
安全操作：检测方法选择与类型转换规则
在工程实践中，建议：
始终使用
===进行严格比较在需要表示"空值"时优先使用
null利用 TypeScript 类型系统强化空值管理（如
strictNullChecks选项）