JavaScript 中 null 和 undefined 到底有何区别？彻底解析两者的核心差异

前言：为什么开发者总混淆这两个特殊值？

在 JavaScript 开发中，null 和 undefined 如同双生子般让人困惑。新手常将它们视为"空值"的代名词，资深工程师在代码审查时也常为二者的错误使用争论不休。特别是在处理 API 返回值、变量初始化、类型检测等场景时，正确理解它们的差异直接关系到程序的健壮性。

一、本质定义：从内存角度看根本区别

1.1 undefined：未定义的幽灵

undefined 表示声明但未赋值的变量状态。当引擎遇到以下情况时自动产生：
```javascript
let name; // 声明未赋值 → undefined
function test() {} // 无返回值 → 默认返回undefined
obj.unknownProp; // 访问不存在的属性 → undefined
```

1.2 null：程序员主动设置的空标记

null 是开发者显式赋值的空值指针，常见于：
```javascript
let data = fetchData() || null; // 数据获取失败时主动置空
document.getElementById('none') // DOM查询失败返回null
```

二、六大核心差异对照表

三、实战场景：何时该用哪个？

3.1 必须使用null的典型场景

DOM操作：获取不存在的元素返回null
对象销毁：手动解除对象引用加速GC
明确空状态：API返回{ data: null }表示查询无结果

3.2 优先使用undefined的情况

函数默认参数：function config(options = {}){}
可选属性标记：interface User { age?: number }
解构默认值：const { page = 1 } = params

四、常见误区与调试技巧

4.1 隐式转换引发的灾难

```javascript
// 数值计算中的陷阱
null + 10 = 10 // null → 0
undefined + 10 = NaN // undefined → NaN

// 条件判断的诡异表现
if (!null) → true
if (!undefined) → true
```

4.2 严格类型检查的必要性

```javascript
// == 导致意外相等
null == undefined // → true
null === undefined // → false

// 类型守卫的正确写法
function isNull(value) {
return value === null; // 必须用全等判断
}
```

五、深度原理：从规范理解设计哲学

根据ECMAScript规范：
undefined 是全局对象的属性（ES3前可被改写）
null 是字面量关键字，不可修改不可枚举
在内存表现上，undefined表示变量未指向任何内存地址，null表示指向空指针地址

六、最佳实践指南

1. 使用void 0代替undefined避免被篡改（ES5前环境）
2. 初始化对象属性时显式赋null比undefined更语义化
3. 在TypeScript中严格区分：
```typescript
interface Response {
data: object | null; // 明确数据可空状态
error?: string; // 可选属性用undefined
}
```

结语：选择即承诺

理解null与undefined的差异，本质上是在理解JavaScript的设计哲学：undefined是引擎给你的提示，null是你给其他开发者的约定。当你在代码中写下null时，就是在明确宣告："这里应该有值，但现在为空"。这种清晰的意图传达，正是高质量代码的核心特征。