暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / JS 双问号操作符解析

JS 双问号操作符解析

IT那活儿 2025-08-11
115
点击上方“IT那活儿”公众号--专注于企业全栈运维技术分享，不管IT什么活儿，干就完了！！！
一

文档概述

本文档全面解析 JavaScript 中的空值合并操作符（Nullish Coalescing Operator）??，包含其工作原理、使用场景、最佳实践以及与相似操作符的对比。
1.1 核心概念解析
双问号 ?? 是 ES2020 (ES11) 引入的逻辑操作符，用于处理 null 和 undefined 值：
// 基础语法 

const result = leftExpression ?? rightExpression;
1.2 工作原理
  • 当左侧表达式为 null 或 undefined 时，返回右侧表达式；
  • 当左侧表达式为其他值（包括假值）时，返回左侧表达式。
// 实际示例 const username = null ?? 
'匿名用户'; // '匿名用户' const score = 0 ?? 100;  0
（保留有效值） const isActive = false ?? true; // false
（保留有效值） const emptyValue = undefined ?? '默认值'; // '默认值'
1.3 与 || 操作符的对比
特性
?? 操作符
|| 操作符
处理空值
仅处理 null 和 undefined
处理所有假值（falsy values）
0 的处理
保留 0 作为有效值
将 0 视为假值
空字符串的处理
保留 "" 作为有效值
将 "" 视为假值
false 的处理
保留 false 作为有效值
将 false 视为假值
适用场景
需要保留有效假值的默认值设置
需要过滤所有假值的场景
// 对比示例 const count = 0; console.log(count || 10); //10
（0 被视为假值） console.log(count ?? 10); //0
（保留有效值） const name = ""; console.log(name || "未知"); //"未知"console.log(name ?? "未知"); //""
二

核心应用场景

2.1 安全访问嵌套对象属性
// 传统方式 const city = user && user.address && user.address.city || "未知";  使用 ?? 和 ?.（可选链） const city = user?.address?.city ?? "未知";
2.2 函数参数默认值
function printMessage(message) { const text = message ?? "默认消息";
 console.log(text); } printMessage(); //"默认消息" printMessage(null); //"默认消息" printMessage(""); //
""（保留空字符串） printMessage(0); //0（保留0）
2.3 配置对象处理
const config = { timeout:0, // 显式设置为0retries: null, //
未设置值 title:"" // 空标题 }; const timeout = config.timeout ?? 3000; / 0 const retries = config.retries ?? 3; / 3 const title = config.title ?? "默认标题"; / ""
最佳实践提示： 
双问号操作符 ?? 与可选链操作符 ?. 结合使用，可以安全地处理深层嵌套的对象访问和默认值设置。 
三

优先级与结合性规则

重要注意事项： 双问号操作符不能直接与 || 或 && 组合使用，需要使用括号明确优先级。 
  • // 错误用法（语法错误） const value = a ?? b || c;
  •  // 正确用法（使用括号） const value = (a ?? b) || c; const anotherValue = a ?? (b || c); 
优先级顺序：
  • 小括号 ()（最高优先级）
  • 逻辑非 !
  • 乘除运算符 *, /
  • 加减运算符 +, -
  • 比较运算符 >, <, >=, <=
  • 相等运算符 ==, !=, ===, !==
  • 逻辑与 &&
  • 逻辑或 ||
  • 空值合并 ??
  • 赋值运算符 =（最低优先级）
四

浏览器兼容性与环境支持

环境
支持版本
支持状态
Chrome
80+
✅ 完全支持
Firefox
72+
✅ 完全支持
Safari
13.1+
✅ 完全支持
Edge
80+
✅ 完全支持
Node.js
14.0+
✅ 完全支持
Internet Explorer
所有版本
❌ 不支持
兼容性解决方案：
对于不支持的环境，可使用 Babel 插件 @babel/plugin-proposal-nullish-coalescing-operator 进行转译，或使用等效的三元表达式： 
// 转译方案 constvalue = a !== null && a !== undefined ? a : b;
五

最佳实践总结

5.1 推荐使用场景
  • 需要区分 null/undefined 和 0/""/false 的情况；
  • 处理可能缺失的 API 响应数据；
  • 配置对象中保留显式设置的假值；
  • 与可选链 ?. 配合安全访问嵌套属性。
5.2 避免使用场景
  • 需要过滤所有假值（falsy values）的情况（应使用 ||）；
  • 在未使用括号的情况下与 || 或 && 混合使用；
  • 需要支持 Internet Explorer 的项目。

END


本文作者：赵 卓(上海新炬中北团队）

本文来源：“IT那活儿”公众号

优先级jsconst
文章转载自IT那活儿，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论