JavaScript中 ?? 用法及与 || 的区别

2023-10-23 00:45:48

引言

在 JavaScript 中，我们经常需要处理条件判断和赋值操作。为了使代码更加简洁和易于理解，JavaScript 提供了多种运算符，其中包括 ?? 和 || 运算符。这两个运算符都可以用于条件判断和赋值，但它们之间存在一些微妙的区别。

?? 运算符

?? 运算符又称为空值合并运算符（Nullish Coalescing Operator），它于 ES11 版本中引入 JavaScript。它的作用是当左边的操作数为 null 或 undefined 时，返回右边的操作数。否则，返回左边的操作数。

let result = username ?? "Guest";
console.log(result); // 输出: "Guest"

let score = null;
let newScore = score ?? 0;
console.log(newScore); // 输出: 0

在第一个示例中，username 为 undefined，因此 result 的值将被赋值为 "Guest"。在第二个示例中，score 为 null，因此 newScore 的值将被赋值为 0。

|| 运算符

|| 运算符称为逻辑或运算符（Logical OR Operator），它在 JavaScript 中用于判断两个操作数是否都为 true。如果两个操作数都为 true，则返回 true；否则，返回 false。

let isLoggedIn = true || false;
console.log(isLoggedIn); // 输出: true

let isPremium = false || true;
console.log(isPremium); // 输出: true

let isValid = null || undefined;
console.log(isValid); // 输出: false

在第一个示例中，isLoggedIn 的值为 true，因此 || 运算符返回 true。在第二个示例中，isPremium 的值为 true，因此 || 运算符返回 true。在第三个示例中，isValid 的值为 null，因此 || 运算符返回 false。

?? 与 || 的区别

乍一看，?? 和 || 运算符似乎非常相似。然而，它们之间存在一个关键区别。?? 运算符只检查左边的操作数是否为 null 或 undefined，而 || 运算符检查两个操作数是否都为 true。这意味着 ?? 运算符可以用于处理空值的情况，而 || 运算符只能用于处理布尔值的情况。

下表总结了 ?? 和 || 运算符之间的主要区别：

| 特征 | ?? 运算符 | || 运算符 |
|---|---|---|
| 操作数 | 左边为 null 或 undefined，右边为任意值 | 两个操作数均为布尔值 |
| 返回值 | 左边不为 null 或 undefined，则返回左边；否则，返回右边 | 两个操作数都为 true，则返回 true；否则，返回 false |
| 用途 | 处理空值的情况 | 处理布尔值的情况 |