JS空值合并运算符 (??)
掌握空值合并运算符，区分 null/undefined 与其他假值，为变量提供更精确的默认值。 · 难度：入门 · +15XP
空值合并运算符简介
JavaScript 中的 ?? 运算符（空值合并运算符）用于为可能为 null 或 undefined 的表达式提供默认值。它与逻辑或 || 不同，后者会将所有假值（如 0、''、false）视为无效并返回右侧值，而 ?? 仅当左侧为 null 或 undefined 时才返回右侧值。
基本使用
const value = null ?? '默认';
console.log(value); // '默认'
const count = 0 ?? 10;
console.log(count); // 0 (0 不是 null/undefined)
与 || 的区别
| 表达式 | 结果 | 说明 |
|---|---|---|
false || '默认' | '默认' | || 将 false 视为假值 |
false ?? '默认' | false | ?? 只对 null/undefined 生效 |
0 || 100 | 100 | 0 被当作假值 |
0 ?? 100 | 0 | 0 是合法值 |
常见应用场景
- 函数参数默认值： 允许参数接受
0或空字符串等有意义的值。 - 配置合并： 当配置项被显式设置为
false时，不应被默认值覆盖。 - 与可选链配合：
obj?.prop ?? 'fallback'实现安全访问+默认值。
注意事项
不能直接与 || 或 && 混用而不加括号，因为运算符优先级不同。例如 a ?? b || c 会引发语法错误，应写成 (a ?? b) || c。
练习提示
右侧代码中，我们有一个配置对象 config，其中 theme 可能为 null，fontSize 可能为 0。请使用 ?? 运算符为 theme 设置默认值 'light'，同时保留 fontSize 的 0 值。