JavaScript中 ?? 和 || 的区别

在前端开发中，??（Nullish Coalescing Operator）和 ||（Logical OR Operator）是用来提供默认值的操作符。它们的行为有一些细微但重要的区别。

||（Logical OR Operator）

|| 是逻辑或操作符，它会返回第一个真值（truthy value），如果左边的操作数是一个假值（falsy value），那么它会返回右边的操作数。注意，在 JavaScript 中以下值被认为是假值：

• false
• 0
• -0
• 0n (BigInt zero)
• "" (空字符串)
• null
• undefined
• NaN

示例：

const foo = false || 'default'; // 'default'
const bar = 0 || 'default';     // 'default'
const baz = '' || 'default';    // 'default'
const qux = null || 'default';  // 'default'
const quux = undefined || 'default'; // 'default'

??（Nullish Coalescing Operator）

?? 是空值合并操作符，它会返回第一个非空值（nullish value），即非 null 和 undefined。如果左边的操作数是 null 或 undefined，那么它会返回右边的操作数。

示例：

const foo = null ?? 'default';  // 'default'
const bar = undefined ?? 'default'; // 'default'
const baz = 0 ?? 'default';     // 0
const qux = false ?? 'default'; // false
const quux = '' ?? 'default';   // ''

区别

• || 会对所有的假值（falsy values）进行判断，包括 false、0、"" 等，而 ?? 只对 null 和 undefined 进行判断。
• ?? 更加严格，只在左操作数为 null 或 undefined 时才返回右操作数，而不会忽略其他假值。

什么时候使用哪个？

• 使用 || 当你想为任何假值提供默认值时。例如，想要确保一个变量不为 false、0、"" 等任何假值：

  const value = userInput || 'default';
  

• 使用 ?? 当你想为 null 或 undefined 提供默认值，而保留 false、0、"" 等有效值时：

  const value = userInput ?? 'default';
  

代码示例

let user = null;

let name1 = user || "Anonymous";  // "Anonymous"
let name2 = user ?? "Anonymous";  // "Anonymous"

user = "";

let name3 = user || "Anonymous";  // "Anonymous" (因为 "" 是 falsy 值)
let name4 = user ?? "Anonymous";  // "" (因为 "" 不是 null 或 undefined)

通过以上的解释和示例，可以清楚地看到 ?? 和 || 在处理不同类型的假值时的区别和适用场景。