JavaScript 中的 || 和 ?? 操作符比较

JavaScript 中的 || 和 ?? 操作符比较

JavaScript 中的逻辑或操作符 (||) 和空值合并操作符 (??) 都用于提供默认值，但它们的行为有重要区别。

逻辑或操作符 (||)

a || b 的规则：

• 如果 a 是 falsy 值，则返回 b
• 否则返回 a

Falsy 值包括：false, 0, "", null, undefined, NaN

示例

javascript

const name = "" || "Anonymous"; // "Anonymous"
const age = 0 || 21; // 21
const isValid = false || true; // true

空值合并操作符 (??)

a ?? b 的规则：

• 如果 a 是 null 或 undefined，则返回 b
• 否则返回 a

示例

javascript

const name = "" ?? "Anonymous"; // ""
const age = 0 ?? 21; // 0
const isValid = false ?? true; // false
const unknown = null ?? "default"; // "default"

何时使用

• 使用 || 当你想要排除所有 falsy 值
• 使用 ?? 当你只想排除 null 和 undefined，但保留其他 falsy 值（如 0, false, ""）

实际应用示例

javascript

// 用户设置示例
const userSettings = {
  theme: null,
  fontSize: 0,
  darkMode: false
};

const theme = userSettings.theme || "light"; // "light" (因为 null 是 falsy)
const fontSize = userSettings.fontSize || 16; // 16 (因为 0 是 falsy)
const darkMode = userSettings.darkMode || true; // true (因为 false 是 falsy)

// 使用 ??
const theme = userSettings.theme ?? "light"; // "light" (因为 null)
const fontSize = userSettings.fontSize ?? 16; // 0 (保留 0)
const darkMode = userSettings.darkMode ?? true; // false (保留 false)

?? 操作符在 ES2020 中引入，为处理默认值提供了更精确的控制。