空值合并运算符(??)仅在操作数为null或undefined时返回默认值,不触发其他假值;与||的区别在于判断逻辑不同,??更精准处理缺失值,适用于配置、api字段、表单输入等场景。

空值合并运算符(??)用于在左侧操作数为 null 或 undefined 时,返回右侧的默认值;其他假值(比如 0、false、'')不会触发默认值。
什么时候用 ?? 而不是 ||
区别关键在于判断逻辑:|| 基于“真值/假值”,?? 只关心是否为 null 或 undefined。
-
const count = 0 ?? 10;→ 结果是0(0不是 null/undefined,所以不替换) -
const count = 0 || 10;→ 结果是10(0是假值,触发默认) -
const name = null ?? '匿名';→'匿名' -
const name = undefined ?? '匿名';→'匿名' -
const name = '' ?? '匿名';→''(空字符串被保留)
常见默认值设置场景
适合处理可能缺失的配置、API 返回字段或用户输入。
- 对象属性访问:
user?.profile?.age ?? 18(配合可选链,避免报错) - 函数参数默认:
function greet(name) { console.log(`Hello ${name ?? 'there'}`); } - 解构赋值:
const { theme = 'light', lang } = config; const actualLang = lang ?? 'en'; - 表单输入 fallback:
const input = document.querySelector('#email'); const value = input?.value ?? '';
注意嵌套和优先级
?? 的优先级低于 ??=、&&、|| 等,但高于赋值运算符。多个 ?? 连用是左结合的,不过通常建议用括号明确意图。
- ✅ 推荐写法:
const x = a ?? (b ?? c); - ⚠️ 避免歧义:
const x = a ?? b ?? c;虽然合法,但等价于(a ?? b) ?? c,可读性稍差 - ❌ 错误混用:
const x = a && b ?? c;会报语法错误,需加括号:const x = a && (b ?? c);
兼容性与替代方案
现代浏览器和 Node.js(v14.0+)原生支持 ??。如需兼容旧环境,可用 Babel 转译,或退化为逻辑表达式:
- 替代写法:
const value = (obj.prop === null || obj.prop === undefined) ? defaultValue : obj.prop; - 或封装工具函数:
const def = (val, defVal) => val == null ? defVal : val;
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











