## 为什么要区分两种`空`

在 JavaScript 这门由规范驱动、引擎实现且与 Web API 深度耦合的语言里，`空` 不是一个维度。`null` 和 `undefined` 共同描述了不同层面的`不存在`：

* `undefined` 更像是语言层给你的`占位符`：变量未赋值、形参未传入、对象属性不存在、函数没有返回明确值，语言会以 `undefined` 来表达。MDN 指出：`Undefined` 类型只包含一个值 `undefined`，而语言通常在值缺失时默认产生它。([MDN Web Docs][1])
* `null` 则是开发者主动表达`这里本来应该是一个对象引用，但我故意置空`，许多 Web API 在`期望返回对象但又没有可用对象`的情境会返回 `null`。([MDN Web Docs][2])

这一区分不止是风格，它决定了比较、运算、序列化、遍历与调试的行为边界，直接影响可维护性与运行时性能。

---

## 语言层对比：类型、比较与 `typeof` 历史遗留

### 类型层面

* `typeof undefined` 结果是 `undefined`；
* `typeof null` 结果却是 `object`。这是被广泛记录的历史遗留问题，源自早期实现的`类型标记`设计，已经无法在不破坏大量既有代码的前提下更改。([2ality.com][3])

### 宽松相等与严格相等

* `null == undefined` 为 `true`；
* `null === undefined` 为 `false`。
  MDN 在 `undefined` 的条目中强调，若要只判定一个值是否`正好是 undefined`，应使用严格相等；而 `x == undefined` 会把 `null` 也当成`相等`。([MDN Web Docs][4])

### 运算短路与空值处理

自 `??` 引入后，我们可以使用 `a ?? b` 在 `a` 为 `null` 或 `undefined` 时回退到 `b`，且运算右侧仅在必要时求值，优先级等细节见 TC39 文档。([tc39.es][5])

**真实世界的设计约束**：在大型前端架构中，`||` 与 `??` 的混用极易制造优先级与短路困惑。TC39 明确规定 `??` 不能与 `&&` 或 `||` 无括号混写，以避免解析歧义。([tc39.es][5])

---

## Web API 约定：缺少对象 vs 缺少值

浏览器与 W3C 生态普遍采用以下约定：

* `document.getElementById` 找不到节点时返回 `null` —— 表达`此处期望对象，但对象不存在`；
* `Map.prototype.get` 对缺失键返回 `undefined` —— 表达`集合里没有绑定值`。
  这类约定与 MDN 对 `null` 的解释一致：`null` 常出现在`应该返回对象的位置`但`没有合适对象`时。([MDN Web Docs][2])

**案例**：在复杂的编辑器内核中，选区 `selection` 可能被清空。这时 API 返回 `null` 明确告诉你`当前无选区对象`，而不是`返回一个类型不确定的占位值`。这能让渲染管线在分支预测和去优化判断上更稳定。

---

## 对象属性语义：不存在、值为 `undefined` 与值为 `null`

三种常见状态，不应混淆：

1. 属性根本不存在：`'k' in obj` 为 `false`；
2. 属性存在、但值是 `undefined`；
3. 属性存在、值是 `null`（开发者显式置空）。

在调试器与日志中，`undefined` 与属性缺失很容易混为一谈。工程实践通常建议：

* 用 `in` 或 `Object.hasOwn` 判定属性存在性；
* 若要表达`已知字段但当前没有业务值`，明确写 `null`，避免将`缺字段`和`空值`混淆。

**示例**：

```js
const user = { id: 42 };
// user.name 属性缺失
user.name;            // undefined
'name' in user;       // false

user.name = undefined;
// 现在属性存在，但值为 undefined
'name' in user;       // true

user.nickname = null; // 语义上：该字段暂时无值
```

---

## 函数参数、默认值与返回值

* 未传入的形参是 `undefined`，因此默认参数只在`实参为 undefined` 时生效：

```js
function greet(name = 'guest') { return `Hi, ${name}`; }
greet();          // 'Hi, guest'
greet(undefined); // 'Hi, guest'
greet(null);      // 'Hi, null'  —— `null` 被当作有效实参，不触发默认值
```

* 未显式 `return` 的函数返回 `undefined`。这与`有意识地返回 null`在语义上不同：`null` 表示`调用成功，只是没有结果对象`；`undefined` 更多是`未提供返回值`。

**真实案例**：在富文本排版内核中，查询命令 `queryActiveMark()` 可以返回一个 `Mark` 对象；当没有激活标记时，返回 `null` 明确告知`不存在该对象`；当内部计算异常早退，直接缺省返回 `undefined` 往往会被监控系统捕捉为`未定义返回`的潜在缺陷，利于排障。

---

## 序列化与网络传输：`JSON.stringify` 的差异

规范与 MDN 明确指出：`undefined`、`Function`、`Symbol` 不是合法的 JSON 值。对象中若出现 `undefined` 值会被**直接省略**；数组中出现 `undefined` 会被转为 `null`；而对象属性为 `null` 会被**原样保留**。这也是很多接口层`字段缺失`与`字段存在但为空`之所以能在 JSON 里被区分的根本原因。([MDN Web Docs][6])

**示例**：

```js
JSON.stringify({ a: undefined, b: null, c: 1 }); // '{"b":null,"c":1}'
JSON.stringify([1, undefined, 3]);               // '[1,null,3]'
```

**真实案例**：在表单保存接口中，`address2: null` 通常表示`用户明确清空了二级地址`，服务端会将该列更新为 `NULL`；而省略该字段，则表示`用户没有动这个字段`，服务端保持原值。`undefined` 在对象里被 JSON 省略，恰好提供了这层区分。([MDN Web Docs][6])

---

## 数组中的空位、`undefined` 与迭代差别

稀疏数组的`空槽`与`显式的 undefined 元素`并不相同。MDN 说明：不同数组方法对`空槽`有不同处理；老一代方法如 `forEach` 会跳过`空槽`，但会访问`值为 undefined 的元素`。这对渲染列表或补洞填充算法有直接影响。([MDN Web Docs][7])

**示例**：

```js
const a = [ , 1, undefined, 3 ]; // a[0] 是空槽
a.forEach((v, i) => console.log(i, v)); // 输出: 1 1; 2 undefined; 3 3
```

**真实案例**：在虚拟列表引擎里，使用`空槽`来表示尚未渲染的数据块，可以让 `forEach` 等遍历跳过它们，避免不必要的 diff 运算；当需要显式占位进行对齐时，再把槽位写成 `undefined` 或真实节点，确保布局稳定。

---

## 运算与短路：`??`、`||`、`?` 的协同

* 处理数据缺省与回退时，`??` 仅在值为 `null` 或 `undefined` 时才触发回退，避免把 `0`、`''`、`false` 这样的合法值误判为空。TC39 明确了它与 `||` 的优先级和短路规则。([tc39.es][5])
* 常配合可选链 `?.` 使用：

```js
// 当 response.settings 缺失或为 nullish 时使用默认
const timeout = response?.settings?.timeout ?? 3000;
```

TypeScript 在 3.7 版本文档中也强调了两者的配合，有助于在大型代码库里统一空值处理的风格。([TypeScript][8])

**真实案例**：在多租户可配置渲染管线中，配置中心可能返回 `0` 级别的阈值。用 `||` 会把 `0` 当作假值而误用默认；改用 `??` 则能准确地区分`确实配置为 0`与`没配置`。([tc39.es][5])

---

## 工程实践建议：如何挑选 `null` 或 `undefined`

面向可维护性的团队约定，往往遵守以下分工：

1. **表达`有字段、暂时为空`**：使用 `null`。

   * 表单模型初始化：`{ firstName: '', middleName: null, lastName: '' }` 表示 `middleName` 合法但可空。
   * 数据库回写：把 `null` 序列化后落库为 `NULL`，保持与后端语义一致。([MDN Web Docs][6])

2. **表达`未提供/未初始化/未传入`**：让语言产生或保持 `undefined`。

   * 形参未传入、对象属性缺失、默认返回值等；
   * 配合 `??` 做回退，避免把有效假值当成空值。([tc39.es][5])

3. **区分缺字段与空字段**：

   * 读对象时使用 `in` 或 `Object.hasOwn`；
   * 写对象时，`delete obj.k` 代表`移除字段`；`obj.k = null` 表示`字段仍在，但当前为空`。

4. **跨端协作统一**：

   * API 约定`找不到对象返回 null`，集合查询缺失返回 `undefined`；
   * JSON 层坚持`undefined 不入对象`，确保协议清晰。([MDN Web Docs][6])

---

## 调试与可观察性：怎么把`空`变成可见事实

* **日志与埋点**：把 `undefined`、`null`、`missing` 明确分栏输出；
* **类型守卫**：在 TypeScript 中，偏向 `x == null` 用于`同时过滤 null 与 undefined` 的窄化，或明确写联合类型 `T | null`；
* **边界探针**：对外部 API 的返回做`空检查`，将`不可恢复的 null` 与`可回退的 undefined` 区分上报级别。

**真实案例**：在支付页的风控探针里，`riskToken` 若为 `null` 代表`风控系统确认缺席`，这是高危信号；若为 `undefined` 则可能是`网络超时导致暂未获取`，可以稍后补偿重试。两者分别触发不同等级的告警策略，更利于稳定性运营。

---

## 常见陷阱清单

* `typeof null === 'object'` 是历史遗留，不要据此判对象。用 `obj !== null && typeof obj === 'object'` 或 `Object.prototype.toString.call(obj) === '[object Object]'`。历史来源与兼容性讨论可参阅 `2ality` 的追溯与社区讨论。([2ality.com][3])
* `JSON.stringify` 会忽略对象里的 `undefined`，这在`差量更新`协议里可能造成误判；需要保留时，先转化为 `null` 或定制 `replacer`。([MDN Web Docs][6])
* 稀疏数组的`空槽`会被 `forEach` 跳过，但 `undefined` 元素不会被跳过，写算法时应区分。([MDN Web Docs][7])
* `x == undefined` 会把 `null` 一起匹配，审计安全敏感逻辑时更应使用 `===` 或 `x == null` 的明确表达。([MDN Web Docs][4])

---

## 典型代码片段：把规则落到实处

### 1) 统一的空值工具

```js
export function isNullish(x) { return x == null; }          // 匹配 null 或 undefined
export function hasKey(obj, k) { return Object.hasOwn(obj, k); }
export function isMissing(obj, k) { return !(k in obj); }   // 属性不存在
```

### 2) API 读写契约

```js
// 读：期望对象、可能为空
const el = document.getElementById('root');
if (el === null) { /* 不存在 DOM 节点，走兜底渲染 */ }

// 写：区分清空 vs 不变更
const payload = { address1: 'A', address2: null }; // 明确清空 address2
fetch('/profile', { method: 'PATCH', body: JSON.stringify(payload) }); // address2 将落库为 NULL
```

### 3) 配置回退与优先级

```js
const cfg = getTenantConfig(); // 可能返回对象，也可能返回 null
const timeout = cfg?.network?.timeout ?? 5000; // 仅在 null/undefined 时回退
```

关于 `??` 的短路、优先级与语义，请参考 TC39 文档。([tc39.es][5])

### 4) 稀疏数组处理

```js
const slots = Array(5);        // 5 个空槽
slots[2] = undefined;          // 显式占位
slots.forEach((v, i) => { /* 访问 i=2 的 undefined，但跳过其他空槽 */ });
```

数组方法与空槽的差异行为详见 MDN。([MDN Web Docs][7])

---

## 面向大型前端的团队规范建议

* **领域建模**：
  数据模型里，凡是被业务允许为空的字段，用 `null` 表示`有这个字段但当前没有值`；凡是`不在此版本协议里`或`客户端暂未携带`的字段，直接`缺省`或保持 `undefined`。配合 JSON 的省略行为，自动得到`空`与`缺`的区分。([MDN Web Docs][6])

* **API 清晰度**：
  返回对象类型的函数，在`未命中`时返回 `null`；返回标量的函数，在异常或未定义时返回 `undefined`。这样调用方可据此决定是`分支处理`还是`回退默认`。

* **工具链支持**：
  ESLint 规则里开启 `no-eq-null` 与 `eqeqeq` 的组合策略，明确在业务可读性与误用防护间取得平衡；TypeScript 打开 `strictNullChecks`，把 `T | null` 与 `T | undefined` 作为不同分支来治理。

* **可观测性**：
  APM 埋点把 `null`、`undefined`、`missing` 分桶上报，结合错误采样与用户行为重放，快速定位空值导致的渲染抖动、布局污染与协议不一致。

---

## 一句话对比表（工程视角）

* 含义：`null` = 有意识的空对象；`undefined` = 语言默认的未定义。([MDN Web Docs][2])
* 比较：`null == undefined` 为真，`===` 为假。([MDN Web Docs][4])
* 类型：`typeof null` 为 `object`（历史遗留），`typeof undefined` 为 `undefined`。([2ality.com][3])
* 序列化：对象属性为 `undefined` 会被 `JSON.stringify` 省略；数组中的 `undefined` 会变成 `null`；`null` 会被保留。([MDN Web Docs][6])
* 遍历：数组空槽多方法跳过；`undefined` 元素会被访问。([MDN Web Docs][7])
* 回退：`??` 只在 `null` 或 `undefined` 时回退，避免把 `0`、`''`、`false` 误当空。([tc39.es][5])

---

## 小结：把抽象规则转成可执行约定

当我们把 `null` 与 `undefined` 看作表达能力不同的`空值语法`时，许多边界即刻清晰：

* 需要`表达语义`、需要`在协议里持久化`就用 `null`；
* 需要`表达缺席/未提供`、需要`触发默认参数或 ?? 回退`就交给 `undefined`。
  语言、规范与浏览器 API 的长期演化已经为这些选择提供了稳定的落点：`typeof null` 的历史包袱不会改变；`??` 已成为处理空值的主力工具；`JSON.stringify` 的省略规则让协议沟通天然具备`空`与`缺`的区分能力。([2ality.com][3])

---

**参考与延伸阅读**

* `null` 与 `undefined` 的官方描述与用法：MDN `Data structures`、`null`、`undefined`。([MDN Web Docs][1])
* `??` 的设计与语义：TC39 提案与说明。([tc39.es][5])
* `typeof null` 的历史背景与兼容性考量。([2ality.com][3])
* `JSON.stringify` 关于 `undefined` 与 `null` 的处理。([MDN Web Docs][6])
* 数组空槽与迭代行为差异：MDN `Array` 与方法条目。([MDN Web Docs][7])

---

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Data_structures?utm_source=chatgpt.com "JavaScript data types and data structures - MDN - Mozilla"
[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null?utm_source=chatgpt.com "null - JavaScript | MDN - Mozilla"
[3]: https://2ality.com/2013/10/typeof-null.html?utm_source=chatgpt.com "The history of “typeof null”"
[4]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined?utm_source=chatgpt.com "undefined - JavaScript | MDN - Mozilla"
[5]: https://tc39.es/proposal-nullish-coalescing/?utm_source=chatgpt.com "Nullish Coalescing Operator"
[6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify?utm_source=chatgpt.com "JSON.stringify() - JavaScript | MDN - Mozilla"
[7]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array?utm_source=chatgpt.com "Array - JavaScript"
[8]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html?utm_source=chatgpt.com "Documentation - TypeScript 3.7"


在 JavaScript 这门由规范驱动、引擎实现且与 Web API 深度耦合的语言里，空 不是一个维度。null 和 undefined 共同描述了不同层面的不存在：

null 与 undefined 的本质差异、工程用法与真实案例

紫薇堂堂主

前端

编程语言

JavaScript中null和undefined的区别：null表示开发者主动置空的对象引用，undefined是语言默认的未定义值。两者在类型、比较、序列化、遍历等场景表现不同，影响代码可维护性和性能。建议用null表示明确空值，undefined表示未定义状态，遵循WebAPI规范，提升代码清晰度。

TypeScript

数据库

调试器

JSON

2026采购季 | AI焕新·智启新局

tencentdb-catalog

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

null 与 undefined 的本质差异、工程用法与真实案例-腾讯云开发者社区-腾讯云

null 与 undefined 的本质差异、工程用法与真实案例

null 与 undefined 的本质差异、工程用法与真实案例

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐