JavaScript ?? 空值合并运算符 详细讲解 作者:马育民 • 2026-06-08 20:01 • 阅读:10011 # 介绍 **空值合并运算符(Nullish Coalescing Operator)**,语法:`a ?? b` - 仅当 **`a` 为 `null` 或 `undefined`** 时,返回 `b`; - 否则直接返回 `a`。 - ES2020 新增语法,专门解决 **逻辑或 `||` 的缺陷**。 # 简单示例 ```javascript // 1. 左侧是 null / undefined → 返回右侧 console.log(null ?? 100); // 100 console.log(undefined ?? 200); // 200 // 2. 左侧是其他值(0、''、false、NaN 等)→ 返回左侧 console.log(0 ?? 99); // 0 console.log('' ?? '默认值'); // '' console.log(false ?? true); // false console.log(NaN ?? 66); // NaN console.log(123 ?? 456); // 123 ``` # 和 || 逻辑或 核心区别 `||` 会把**所有假值**(`0、''、false、NaN、null、undefined`)都判定为“空”,这是日常踩坑点。 | 表达式 | `??` 结果 | II 结果 | 说明 | |--------|-----------|-----------|------| | `0 ?? 10` | 0 | 10 | `0` 不是 null/undefined,`??` 保留原值 | | `'' ?? 'hello'` | `''` | `hello` | 空字符串被 `II` 误判为空 | | `null ?? 5` | 5 | 5 | 两者表现一致 | | `undefined ?? 8` | 8 | 8 | 两者表现一致 | **实战场景对比** ```javascript // 场景:给分数设置默认值,分数允许为 0 const score = 0; // 错误:|| 把 0 当成假值,覆盖了有效数据 const res1 = score || 60; console.log(res1); // 60 // 正确:?? 只处理 null/undefined,保留合法的 0 const res2 = score ?? 60; console.log(res2); // 0 ``` --- # 链式使用 支持连续链式写法,从左到右依次判断: ```javascript let a = undefined; let b = null; let c = '正常值'; console.log(a ?? b ?? c ?? '兜底'); // 正常值 ``` --- # 结合赋值:??= 空值合并赋值运算符 ES2021 新增,语法:`x ??= y` 等价于:`if (x === null || x === undefined) { x = y }` 示例: ```javascript let num = undefined; num ??= 10; console.log(num); // 10 let str = ''; str ??= 'test'; console.log(str); // '' (空字符串不处理) ``` --- # 运算优先级 & 括号规则 1. **优先级**:`??` 优先级 **低于 `&&`、`||`** 2. **禁止混用**:`??` 不能直接和 `&&` / `||` 连写,**必须加括号**,否则报错 ```javascript // 报错:语法错误,不能直接混合 && || // 1 || 2 ?? 3 // 正确:用括号明确优先级 console.log((1 || 2) ?? 3); // 2 console.log(1 || (2 ?? 3)); // 1 ``` --- # 典型使用场景 1. **给变量设置默认值(允许 0、空字符串)** ```javascript const config = { pageSize: 0 }; const page = config.pageSize ?? 10; // 0(保留合法数值) ``` 2. **接口返回数据容错** ```javascript // 接口字段可能为 null/undefined,但合法值包含 0、'' const data = res.data?.name ?? '匿名用户'; ``` 3. **对象属性兜底**(常搭配可选链 `?.` 使用) ```javascript const username = user?.info?.nickname ?? '游客'; ``` # 总结 1. `a ?? b`:**只认 `null` 和 `undefined`**,其余值全部保留; 2. 对比 `||`:`||` 是**所有假值都替换**,`??` 更精准; 3. 搭配 `?.` 可选链、`??=` 赋值运算符,是前端容错主流写法; 4. 和 `&&`/`||` 混用必须加括号。 原文出处:http://malaoshi.top/show_1GW3ScRSDQjy.html