JavaScript中的空值合并运算符（Nullish Coalescing）与逻辑或运算符（Logical OR）的区别

知识点描述
空值合并运算符（??）和逻辑或运算符（||）都用于提供默认值，但它们在判断"假值"时的逻辑不同。?? 只在左侧为 null 或 undefined 时返回右侧值，而 || 会对所有假值（false、0、""等）生效。

详细讲解

1. 假值（Falsy Values）概念回顾

   • JavaScript 中以下值在布尔上下文中被视为 false：
     false、0、-0、0n（BigInt零）、""、null、undefined、NaN
   • 逻辑或运算符 || 会返回第一个真值（truthy value），如果都是假值则返回最后一个值

2. 逻辑或运算符 || 的行为

   console.log(0 || "默认值");        // "默认值"（0是假值）
   console.log("" || "默认值");      // "默认值"（空字符串是假值）
   console.log(false || "默认值");    // "默认值"（false是假值）
   console.log(null || "默认值");     // "默认值"
   console.log(undefined || "默认值"); // "默认值"
   

3. 空值合并运算符 ?? 的引入背景

   • 问题场景：当 0、""、false 是有效值时，|| 会导致意外行为

   const config = {
     timeout: 0,     // 0 表示不超时，是有效值
     title: ""
   };
   
   // 使用 || 的问题
   console.log(config.timeout || 3000);  // 3000（但我们期望是0）
   console.log(config.title || "未命名"); // "未命名"（但我们期望是空字符串）
   

4. ?? 运算符的精确行为

   • 只对 null 和 undefined 生效

   console.log(0 ?? "默认值");        // 0（0不是null/undefined）
   console.log("" ?? "默认值");      // ""（空字符串不是null/undefined）
   console.log(false ?? "默认值");    // false
   console.log(null ?? "默认值");     // "默认值"
   console.log(undefined ?? "默认值"); // "默认值"
   

5. 实际应用场景对比

   // 用户配置处理
   const userSettings = {
     theme: null,
     fontSize: 0,
     soundEnabled: false
   };
   
   // 使用 || 的问题
   const theme = userSettings.theme || "dark";       // "dark"
   const fontSize = userSettings.fontSize || 16;     // 16（但用户明确设置了0）
   const sound = userSettings.soundEnabled || true;  // true（但用户明确关闭了声音）
   
   // 使用 ?? 的正确方式
   const themeSafe = userSettings.theme ?? "dark";    // "dark"
   const fontSizeSafe = userSettings.fontSize ?? 16;  // 0（保留用户设置）
   const soundSafe = userSettings.soundEnabled ?? true; // false（保留用户设置）
   

6. 运算符优先级和结合性

   • ?? 的优先级低于 ||，但高于三元运算符和赋值运算符
   • 使用时建议用括号明确优先级

   // 需要括号的情况
   console.log(null || undefined ?? "default");  // SyntaxError
   console.log((null || undefined) ?? "default"); // "default"
   
   // 结合性：从左到右
   console.log(null ?? undefined ?? "default");  // "default"
   

7. 浏览器兼容性和转译处理

   • ES2020 新特性，现代浏览器都支持
   • 在老环境中需要使用 Babel 等工具转译
   • 转译后的代码类似：(left !== null && left !== undefined) ? left : right

总结
空值合并运算符 ?? 提供了更精确的默认值处理机制，特别适合处理数字0、空字符串、布尔值false等有意义的情况。在实际开发中，应根据业务逻辑选择使用 || 还是 ??。