在 JavaScript 开发中，我们经常需要处理默认值或回退值的情况。两个常用的运算符是空值合并运算符(??)和逻辑或运算符(||)。虽然它们看起来功能相似，但实际应用场景却大不相同。
逻辑或运算符 ||
|| 运算符是 JavaScript 中的传统选择，它会返回第一个"真值"，如果左侧操作数为假值（如 false、0、""、null、undefined 或 NaN），则返回右侧操作数。
const name = userName || "默认用户";
问题是什么？当我们明确想使用 0 或空字符串 "" 时，|| 会跳过这些值，因为它们被视为假值。
空值合并运算符 ??
ES2020 引入的 ?? 运算符更加精确，它只在左侧操作数为 null 或 undefined 时才返回右侧操作数。
const count = userCount ?? 0;
这意味着空字符串和数字 0 会被保留，而不会被默认值替代。
实际对比案例
// 使用 ||
0 || 10 // 返回 10
"" || "默认文本" // 返回 "默认文本"
false || true // 返回 true
// 使用 ??
0 ?? 10 // 返回 0
"" ?? "默认文本" // 返回 ""
false ?? true // 返回 false
null ?? "默认值" // 返回 "默认值"
undefined ?? 42 // 返回 42
如何选择？
-
当你只想在值为 null 或 undefined 时使用默认值，选择 ??
-
当你想在任何假值情况下使用默认值，选择 ||
实际应用场景
表单处理时，空字符串可能是有效输入：
// 更好的选择
const userInput = formValue ?? "默认消息";
// 可能有问题的选择
const userInput = formValue || "默认消息"; // 空字符串会被替换
计数场景中，0 是有效值：
// 更好的选择
const displayCount = count ?? "无数据";
// 可能有问题的选择
const displayCount = count || "无数据"; // 0 会被替换为"无数据"
结语
?? 和 || 各有用处，关键是了解它们处理假值的差异。?? 只关心 null 和 undefined，而 || 会检查所有假值。根据具体需求选择合适的运算符，可以让代码更精确、更易于维护。希望这篇文章能帮助你更好地理解并运用这两个运算符！
