JS空值合并运算符??使用详解

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript空值合并运算符是 ??，它用于返回第一个非 null 或非 undefined 的值。与逻辑或（||）不同，空值合并运算符仅在左侧值为 null 或 undefined 时才返回右侧值，而逻辑或会在左侧值为 false、null、undefined、0、""、NaN 等时返回右侧值。》，聊聊，我们一起来看看吧！

应使用??而非||来保留0、false、''等合法falsy值；??仅在操作数为null/undefined时生效，优先级高于||但低于=，混用时须加括号，且不支持IE及旧Edge。

?? 是 JavaScript 的空值合并运算符，它只在左侧操作数为 null 或 undefined 时返回右侧操作数；而 || 在左侧为任意“falsy”值（如 0、''、false）时都会触发右侧逻辑。

什么时候该用 ?? 而不是 ||

当你想保留 0、false、'' 这类合法但 falsy 的默认值时，必须用 ??。比如配置项允许关闭功能（enabled: false），或允许设置数量为零（count: 0）。

• const count = user.inputCount ?? 10; → 用户输 0，结果就是 0；输 undefined，才用 10
• const count = user.inputCount || 10; → 用户输 0，结果反而是 10（错误覆盖）
• 常见误用场景：表单字段默认值、API 响应字段 fallback、状态初始化

?? 的结合性与括号必要性

?? 的优先级低于 = 和 ?:，但高于 && 和 || —— 所以混用时极易出错，必须加括号明确意图。

• ❌ 错误写法：let x = a ?? b || c → 实际等价于 let x = (a ?? b) || c，若 a 为 null、b 为 false，结果是 c，而非预期的 b
• ✅ 正确写法：let x = a ?? (b || c)（取第一个非 null/undefined，否则 fallback 到 b 或 c 的逻辑或结果）
• ⚠️ 注意：?? 不能直接跟 && 或 || 连用而不加括号，会报 SyntaxError: Invalid left-hand side in assignment

浏览器兼容性与降级处理

现代浏览器（Chrome 80+、Firefox 74+、Safari 13.1+）原生支持 ??；IE 完全不支持，旧版 Edge（≤18）也不支持。

• 构建时用 Babel 转译需启用 @babel/plugin-proposal-nullish-coalescing-operator
• TypeScript 3.7+ 支持，且类型推导更准确（例如 string | null ?? 'default' 推导为 string）
• 手写 polyfill 不可行 —— 这是语法层面的运算符，无法用函数模拟

const settings = {
  theme: null,
  fontSize: 0,
  notifications: false
};

// ✅ 用 ??：保留 0 和 false
console.log(settings.fontSize ?? 16);        // 0
console.log(settings.notifications ?? true); // false

// ❌ 用 ||：意外覆盖合法值
console.log(settings.fontSize || 16);        // 16（错误！）
console.log(settings.notifications || true); // true（错误！）

真正容易被忽略的是结合性规则——哪怕你记住了 null/undefined 的语义，一不留神混用 || 或 && 就会触发语法错误或逻辑翻车。

以上就是《JS空值合并运算符??使用详解》的详细内容，更多关于的资料请关注golang学习网公众号！