【JavaScript】双问号（??）操作符详解_js ??
文章目录
-
- 一、双问号（??）操作符概述
-
- 1. 什么是空值合并操作符
- 2. 基本语法
- 3. 简单示例
- 二、为什么需要 ?? 操作符
- 三、?? 操作符的使用细节
-
- 1. null 和 undefined 的区别对待
- 2. 与三元表达式（条件表达式）的对比
- 3. 与逻辑运算符优先级相关
- 4. 禁止与 && 和 || 直接混用
- 四、实际应用场景
-
- 1. 设置默认参数
- 2. 读取对象属性
- 3. 配合解构赋值使用
- 4. 配合可选链（?.）使用
- 五、常见问题与注意事项
-
- 1. 区分 falsy 值和 null/undefined
- 2. 语法错误要注意加括号
- 3. 浏览器兼容性
- 六、总结
在 JavaScript 中，
??被称为空值合并操作符（Nullish Coalescing Operator）。这是 ES2020（ES11）引入的一项新特性，主要用于处理默认值的赋值问题。相比传统的||逻辑或操作符，??在判断标准上更加严格，能更准确地表达“仅在值为 null 或 undefined 时使用默认值”的意图。本文将详细介绍??的作用、用法、与其他操作符的区别及实际应用场景。
一、双问号（??）操作符概述
1. 什么是空值合并操作符
空值合并操作符 ?? 是一种逻辑运算符，用于在左侧表达式的值为 null 或 undefined 时，返回右侧的默认值。简单来说，就是：
- 如果左侧的值是
null或undefined，返回右侧的值； - 否则，返回左侧的值。
2. 基本语法
let result = a ?? b;a是要检查的值；b是当a为null或undefined时使用的默认值；- 最终
result的值是a或b，取决于a是否为null或undefined。
3. 简单示例
let username;let displayName = username ?? \"匿名用户\";console.log(displayName); // 输出：\"匿名用户\"在这个例子中，因为 username 是 undefined，所以最终 displayName 赋值为右侧的 “匿名用户”。
如果 username 有一个实际的值，比如：
let username = \"张三\";let displayName = username ?? \"匿名用户\";console.log(displayName); // 输出：\"张三\"那么就直接使用 username 的值，不使用默认值。
二、为什么需要 ?? 操作符
1. 传统的 || 存在的问题
在 ?? 出现之前，我们常常用逻辑或 || 来处理默认值，比如：
let username = \"\";let displayName = username || \"匿名用户\";console.log(displayName); // 输出：\"匿名用户\"问题是，|| 会把**所有假值（falsy value）**都当成无效，包括：
false0NaN\"\"（空字符串）nullundefined
上面例子中，虽然 username 是空字符串 \"\"，理论上是有意义的（可能用户就是想提交一个空的名字），但 || 认为空字符串是无效的，于是强行用了默认值。这并不是我们想要的。
2. ?? 更合理的默认值逻辑
?? 只在 null 和 undefined 时才使用默认值，其它的假值（比如 0、false、\"\"）都会被当作有效值保留下来。
修改上面的例子：
let username = \"\";let displayName = username ?? \"匿名用户\";console.log(displayName); // 输出：\"\"这次不会强行替换默认值，而是保留了空字符串。这就更加符合实际开发中对于“值是否存在”的真实判断需求。
三、?? 操作符的使用细节
1. null 和 undefined 的区别对待
?? 只关心 null 和 undefined，忽略其他 falsy 值。
示例：
console.log(false ?? \"默认值\"); // falseconsole.log(0 ?? 100); // 0console.log(\"\" ?? \"默认字符串\"); // \"\"console.log(null ?? \"默认值\"); // \"默认值\"console.log(undefined ?? \"默认值\"); // \"默认值\"可以看到，只有当值为 null 或 undefined 时，右侧的默认值才生效。
2. 与三元表达式（条件表达式）的对比
很多人可能习惯使用三元表达式：
let result = (a !== null && a !== undefined) ? a : b;其实用 ?? 可以大大简化：
let result = a ?? b;这样代码更加简洁，易读性也更好。
3. 与逻辑运算符优先级相关
?? 的优先级比 || 和 && 要低，但比赋值 = 高。在组合使用时，需要注意加括号明确逻辑。
错误示例：
let a = null || undefined ?? \"默认值\"; // SyntaxError: Unexpected token \'??\'正确写法应该加括号：
let a = (null || undefined) ?? \"默认值\"; console.log(a); // 输出：\"默认值\"或者彻底拆开来写，避免混用。
4. 禁止与 && 和 || 直接混用
JavaScript 规定，如果要同时使用 ?? 和 &&、||，必须用括号包裹清晰逻辑，否则会抛出 SyntaxError。
例如：
let x = (a || b) ?? c;而不是：
let x = a || b ?? c; // ❌ 错误，语法错误四、实际应用场景
1. 设置默认参数
函数参数如果没有传值，可以用 ?? 设置默认值。
function greet(name) { let userName = name ?? \"游客\"; console.log(`你好，${userName}`);}greet(\"李雷\"); // 你好，李雷greet(); // 你好，游客2. 读取对象属性
读取对象中的某个属性时，防止属性不存在导致显示错误。
let user = { name: \"小明\", age: 0};console.log(user.name ?? \"匿名\"); // 小明console.log(user.age ?? \"未知\"); // 0console.log(user.gender ?? \"保密\"); // 保密这里即使 age 是 0，?? 也不会替换成默认值。
3. 配合解构赋值使用
在解构赋值时，结合 ?? 可以更加灵活处理默认值。
let settings = { theme: null, layout: \"grid\"};let theme = settings.theme ?? \"light\";let layout = settings.layout ?? \"list\";console.log(theme); // lightconsole.log(layout); // grid如果 theme 是 null，则使用默认值 light；如果 layout 已经有值 grid，则保留。
4. 配合可选链（?.）使用
?? 和可选链（?.）搭配使用非常高效，可以避免层层判断。
let user = { profile: { nickname: \"\" }};let nickname = user.profile?.nickname ?? \"未命名\";console.log(nickname); // \"\"这里即使 nickname 是空字符串，也不会被替换；如果 profile 不存在，也不会抛出异常，而是走默认值。
五、常见问题与注意事项
1. 区分 falsy 值和 null/undefined
?? 只针对 null 和 undefined，不像 || 那样针对所有 falsy 值。这是它最核心的区别。务必根据业务场景选择使用哪种操作符。
如果你希望 0、false、“” 也能触发默认值，用 ||； 如果你只关心 null 或 undefined，应该用 ??。
2. 语法错误要注意加括号
混合使用 &&、|| 和 ?? 时，务必加括号明确优先级，否则 JavaScript 会抛出语法错误。
3. 浏览器兼容性
??是 ES2020 新增的特性；- 现代浏览器（Chrome 80+，Firefox 72+，Edge 80+，Safari 13.1+）基本已经支持；
- 如果需要兼容老旧浏览器（比如 IE11），可以使用 Babel 转译处理。
六、总结
空值合并操作符 ?? 是一个非常实用的 JavaScript 新特性，它可以帮助我们更加准确地处理默认值，避免传统 || 在 0、false、“” 等值上的逻辑误判。掌握 ?? 的使用，不仅可以让你的代码更加简洁，也能让逻辑更加清晰明确。特别是在函数参数处理、对象属性读取、配置项设置等场景中，?? 都能发挥极大的作用。
在日常开发中，只要牢记：只有在值为 null 或 undefined 时，才使用默认值，你就能准确地应用好 ??，写出更优雅、更健壮的 JavaScript 代码。
推荐：
- JavaScript
- react
- vue
