JavaScript 中 ?? 与 || 操作符的区别
概述
在 JavaScript 中，??（空值合并操作符）和 ||（逻辑或操作符）都可以用于提供默认值，但它们处理不同值的方式存在重要差异。
操作符详解
||（逻辑或操作符）
- 当左侧的值为 falsy 时，返回右侧的值
- Falsy 值包括：
false、0、''（空字符串）、null、undefined、NaN
??（空值合并操作符）
- 只有当左侧的值为
null或undefined时，才返回右侧的值 - 对于其他 falsy 值（如
0、''、false、NaN），不会使用默认值
实际应用示例
使用 ?? 的场景
当你需要区分 null/undefined 和其他 falsy 值时：
javascript
// 用户配置对象，0 是有效值
const userConfig = { maxRetries: 0 };
const maxRetries = userConfig?.maxRetries ?? 3;
// 结果: 0 (保留了用户设置的有效值)
// 用户文本设置，空字符串是有效值
const userText = { prefix: '' };
const prefix = userText?.prefix ?? '默认前缀';
// 结果: '' (保留了用户设置的有效值)
使用 || 的场景
当你希望任何 falsy 值都使用默认值时：
javascript
// 获取用户名，任何 falsy 值都使用默认名称
const user = { name: '' };
const displayName = user?.name || '匿名用户';
// 结果: '匿名用户' (将空字符串视为需要替换的情况)
最佳实践建议
-
推荐使用
??：- 提供更精确的控制
- 避免意外替换有效的 falsy 值
- 符合现代 JavaScript 开发规范
-
谨慎使用
||：- 仅在确实需要将所有 falsy 值替换为默认值时使用
- 注意可能意外替换有效值的风险
-
结合可选链操作符
?.使用：obj?.prop ?? 'default'是安全且精确的默认值处理方式- 避免访问不存在对象属性时的错误
浏览器兼容性
||：所有浏览器都支持??：较新的特性，需要现代浏览器支持或通过 Babel 等工具转译
