JavaScript 中的"??"和"||"

在 JavaScript 开发中，都会遇到一个场景，就是要给变量设置一个默认值，比如当变量没有有效值时，使用一个备用值。这个时候，可能有两个操作符会让你感到困惑：??（空值合并运算符）和 ||（逻辑或运算符）。一开始看，它们似乎都能达到相同的效果，但其实它们背后的逻辑完全不同，适用的场景也不一样。

"||" 是怎么工作的？

|| 就好像是在说：“如果这个不行，就换另一个。”它的具体作用是检查左边的值，如果左边这个值是 “假”，它就会去看右边的值，并返回右边的值。

举个例子来理解一下：

let result = value1 || value2;

这段代码就是在说：“如果 value1 能用，就用 value1；如果 value1 不行，那就用 value2 吧！”那问题来了，什么情况下 value1 会不行呢？

什么是 "假值"？

在 JavaScript 里，有一些特殊的值会被认为是“假”的，像这些：

• false（假）
• 0（零）
• ""（空字符串）
• null（表示空）
• undefined（未定义）
• NaN（非数字）

这些值都被认为是不能用的“假值”。

let username = "" || "游客"; // 返回 "游客"
let score = 0 || 10;          // 返回 10

在上面的例子里，""（空字符串）和 0 都是“假值”，所以 JavaScript 会忽略它们，直接选择后面的“游客”和 10 作为返回值。

什么时候用 "||" 呢？

|| 的最佳使用场景就是当你不确定一个值是否靠谱的时候，你可以为它准备一个备用值。就像生活中你遇到的两手准备：如果第一种方案失败了，立刻执行第二种。

比如你想让用户输入他们的名字，但如果用户没有输入名字，你就让系统自动叫他们“游客”。用 || 来实现这个需求简直再好不过了：

function greetUser(name) {
  let username = name || "游客";
  console.log(`你好, ${username}!`);
}
 
greetUser("");  // 输出: 你好, 游客!
greetUser("Alice");  // 输出: 你好, Alice!

在这个例子里，如果用户没有输入名字（比如空字符串 ""），我们就用 || 返回一个默认值“游客”。但如果用户输入了名字（比如 “Alice”），我们就用这个名字打招呼。

JavaScript 中的"??"操作符：只关心空值

JavaScript 里的??（空值合并运算符）看起来和||有点像，但它其实更“挑剔”，??只会在 null 和 undefined 出现时才出手救场。

?? 操作符的工作方式是：当左边的值是 null 或 undefined 时，才返回右边的备用值。像 0、false、"" 这些“假值”，在??眼里都是有效值。

语法很简单：

let result = value1 ?? value2;

意思是：如果 value1 是 null 或 undefined，那就返回 value2；否则就直接用 value1。

let username = "" ?? "游客"; // 返回 ""
let score = 0 ?? 10;          // 返回 0

在这两个例子中，空字符串 "" 和 0 虽然是“假值”，但因为它们不是 null 或 undefined，?? 不会认为它们无效，所以直接返回它们本身。这样就避免了 || 操作符那种“误判”的情况——如果你真的想用 0 或 "" 作为有效值，?? 就非常合适。

什么时候用"??"？

?? 非常适合在你 只想处理null或undefined 的场景下使用。比方说，你希望某个变量可以是 0 或 false 这样的值，而不想让它们触发默认值。

function getScore(score) {
  return score ?? 10;
}
 
console.log(getScore(0));    // 输出: 0
console.log(getScore(null)); // 输出: 10

在这个例子里，score 可以是 0，也可以是 null。如果传入 0，?? 不会把它当成空值，而是直接返回 0。但如果 score 是 null，它就会返回默认值 10。这种行为对于某些场景非常有用，比如分数为 0 的时候你不希望它被误当成无效值。

结合 || 和 ??：多重保险，让代码更健壮！

有时候，你可能会遇到更复杂的场景，既要处理 null 和 undefined，又需要对其他“假值”如 0、false、"" 做特殊处理。这种情况下，我们可以把 || 和 ?? 结合起来，打造一个更加全面的“多重保险”逻辑。

为什么要同时用 || 和 ??

?? 负责处理 null 和 **undefined**，而 || 可以处理 所有“假值”（如 0、false、空字符串等）。有些情况下，你可能希望 null 和 undefined 返回默认值，而对于其他“假值”则使用不同的逻辑处理。

来看个例子：

let result = (value ?? defaultValue) || fallbackValue;

在这段代码中，我们做了两步处理：

• value ?? defaultValue：首先，?? 检查 value 是否为 null 或 undefined。如果是，那么返回 defaultValue；如果不是，则直接返回 value。
• || fallbackValue：接下来，结果再经过 ||，如果这个结果是“假值”（例如 0、false、空字符串等），就返回 fallbackValue。

假设你在处理一个分数系统，null 或 undefined 的时候要用默认分数，但同时如果分数是 0 也不能直接忽略，需要特殊处理。我们可以这样写：

function getFinalScore(score) {
  return (score ?? 50) || "分数无效";
}
 
console.log(getFinalScore(null));  // 输出: 50（null 被 `??` 处理）
console.log(getFinalScore(0));     // 输出: "分数无效"（0 被 `||` 处理）
console.log(getFinalScore(80));    // 输出: 80（有效分数）