必须区分 null 与 undefined：前者表示“已声明且主动清空”，后者表示“未设置”；二者语义不同，混用会掩盖业务意图、引发静默错误，需在属性检查、DOM 查询、函数参数、API 响应等场景严格区分。
在 JavaScript 属性检查中，区分 null 与 undefined 不是“要不要做”的问题，而是“必须做”的实践——因为二者语义不同，混用会掩盖真实业务意图，甚至引发静默错误。
属性缺失 vs 属性明确为空
这是最典型的区分场景：一个对象属性根本不存在（undefined），和它存在但被设为 null，代表完全不同的业务状态。
-
undefined 表示“未设置”：比如用户注册表单中，
user.middleName没被填写，字段压根没出现在提交数据里 → 访问时是undefined，说明“该信息未提供” -
null 表示“已声明且主动清空”：比如后台接口明确返回
{"middleName": null}，表示“我们查到了这个用户，但他的中间名确实为空（或不适用）”
DOM 元素查询结果判断
document.getElementById、querySelector 等 API 在找不到元素时返回 null，而不是 undefined。若你用 == null 或 ?? 判断，虽能覆盖，但若后续逻辑需区分“查无此元素”（null）和“变量未初始化”（undefined），就必须严格判断。
- 错误写法：
if (el == null)—— 把undefined（比如let el;未赋值）和null（查不到元素）一并处理，可能掩盖变量未初始化的 bug - 正确做法：
if (el === null)明确表达“元素不存在”，而if (el === undefined)或typeof el === 'undefined'用于排查变量是否漏声明/漏赋值
函数参数默认值与解构赋值的语义控制
ES6 解构和函数参数默认值默认对 undefined 生效，但对 null 不生效——这正是利用二者差异设计健壮 API 的机会。
立即学习“Java免费学习笔记（深入）”；
-
function greet({ name = 'Anonymous' } = {}) { ... }：当调用greet({})时name是undefined，触发默认值；但greet({ name: null })中name是null，不会回退，默认值不生效 —— 这允许你把null作为“显式留空”的信号 - 若想同时处理两者，用空值合并操作符：
const displayName = user.name ?? 'Anonymous'，它只对null和undefined生效，其他 falsy 值（如''、0）不受影响
API 响应数据建模与类型校验
后端返回的 JSON 数据中，字段为 null 通常有明确语义（如“该用户未设置头像”），而字段缺失（对应 JS 中的 undefined）可能表示“该字段本次未返回”或“权限不足不可见”。前端做数据校验或状态映射时，必须分开处理：
-
if (apiRes.avatar === null)→ 显示“无头像占位图” -
if (apiRes.avatar === undefined)→ 可能触发重试、报错或降级逻辑（比如字段本应存在却没返回，属异常） - 使用 TypeScript 时，
avatar: string | null和avatar?: string（即string | undefined）是两种不同可选性，编译器会强制你分别处理
