JavaScript空值合并运算符是什么_它如何处理默认值

13次阅读

空值合并运算符??是ES2020引入的二元操作符,仅当左操作数为NULLundefined时返回右操作数,对0、false、”、NaN等falsy值仍返回左操作数;其与||的关键区别在于??只检测nullish值,而||检测所有falsy值。

JavaScript空值合并运算符是什么_它如何处理默认值

空值合并运算符 ?? 是什么

它是一个二元操作符,只在左操作数为 nullundefined 时返回右操作数;其他任何值(包括 0false''NaN)都会原样返回左操作数。

??|| 的关键区别在哪里

很多人误以为 ?? 是“更安全的 ||”,其实它们的判断逻辑完全不同:

  • || 检查的是“falsy 值”:只要左值是 false0''nullundefinedNaN,就取右边
  • ?? 只检查“nullish 值”:仅当左值严格等于 nullundefined 才取右边

这意味着你写 count ?? 10,哪怕 count0,结果也是 0;而 count || 10count === 0 时会错误地返回 10

常见误用场景和修复建议

典型问题出现在处理 API 返回的可选数值或布尔字段时:

立即学习Java免费学习笔记(深入)”;

  • 后端返回 { price: 0 },但代码写成 item.price || 99 → 错误覆盖为 99
  • 正确写法应为 item.price ?? 99,保留 0 的业务含义
  • 嵌套访问如 user?.profile?.age ?? 18 安全且简洁;不用再写 (user && user.profile && user.profile.age) || 18
  • 注意优先级:a ?? b || c 等价于 (a ?? b) || c,不是 a ?? (b || c);混用时建议加括号明确意图

浏览器兼容性和替代方案

?? 是 ES2020 特性,现代浏览器chrome 80+、firefox 74+、safari 13.1+)已原生支持。如果需兼容旧环境:

  • 用 Babel + @babel/plugin-proposal-nullish-coalescing-operator
  • typescript 3.7+ 默认支持,并在编译时降级为三元表达式(如 a !== null && a !== void 0 ? a : b
  • 手写兼容写法: (val === null || val === undefined) ? defaultValue : val,但别为了省几字节牺牲可读性
const config = {   timeout: response.data.timeout ?? 5000,   retries: response.data.retries ?? 3,   enabled: response.data.enabled ?? true // 即使后端没传 enabled 字段,也不影响默认 true };

真正容易被忽略的是:它不解决深层属性缺失导致的 TypeError,必须配合可选链 ?. 使用;单独写 obj.items[0].name ?? 'N/A'obj.items 为空时仍会报错。

text=ZqhQzanResources