别迷惑？？与|| JavaScript：这就是它们的不同之处！

??与|| JavaScript 中：鲜为人知的区别

介绍

JavaScript 提供了多种方法来处理代码中的未定义或空值。用于此目的的两个常见运算符是 空值合并运算符 (??) 和 逻辑 OR 运算符 (||)。虽然这些操作员乍一看似乎很相似，但他们的行为在某些情况下可能有很大不同。了解这两个运算符之间的差异至关重要，特别是对于想要编写更精确且无错误的代码的初学者。

在本指南中，我们将探讨 ?? 之间的区别和 ||在 JavaScript 中，通过示例逐步分解它，以便您可以立即从零变成英雄。

什么是空合并运算符 (??)？

无效合并运算符 ??用于在处理 null 或 undefined 时提供后备值。它仅检查值是否为 null 或未定义，如果是，则返回提供的后备值。

语法:

let result = value ?? fallbackValue;

在此表达式中，如果 value 为 null 或未定义，则将返回fallbackValue。

示例 1：使用空合并运算符 (??)

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

在此示例中，name 为 null，因此将 defaultName 指定为“John Doe”作为后备。

要点：

• ??检查 null 或未定义。
• 如果NOT null 或未定义，则返回左侧的值，否则，返回右侧的回退值。

什么是逻辑或运算符 (||)？

逻辑或运算符 ||是另一个用于后备值的运算符，但其工作方式不同。它检查表达式的左侧是否为 falsy 值。在 JavaScript 中，假值包括 null、undefined、false、0、NaN 和 ''（空字符串）。

语法:

let result = value || fallbackValue;

如果值是假的，则返回fallbackValue。

示例 2：使用逻辑或运算符 (||)

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

在本例中，年龄为 0，这是一个假值，因此 defaultAge 被分配为 18。

要点：

• ||检查是否有虚假值。
• 如果左侧的值为假，则返回右侧的后备值。

之间的主要区别？和 ||

乍一看，??和 ||似乎有相同的目的——提供后备值——但有一个重要的区别：

• ??运算符仅检查 null 或未定义。
• ||运算符检查是否有任何虚假值。

当您处理虚假但有效的值（如 0、'' 或 false）时，这种微妙的差异变得至关重要。

例3：??与||具有虚假值

let result = value ?? fallbackValue;

此处，count 为 0，这是一个有效值，但在 JavaScript 中为假值。

• 使用 ??，defaultCount1 保留 0，因为 0 既不是 null 也不是未定义的。
• 使用 ||，defaultCount2 变为 10，因为 0 是一个假值。

你应该什么时候使用？或||？

选择??和 ||取决于您想要的具体行为。

使用 ？？什么时候：

• 您想要专门处理 null 或 undefined 值，而不影响 0、false 或 '' 等虚假值。
• 您需要保留有效的假值，例如 0（有效计数）或 ''（有效的空字符串）。

示例：

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

在此示例中，空字符串 '' 是有效的用户输入，所以 ??允许它通过而不用后备替换它。

使用||什么时候：

• 您希望将所有虚假值（例如 0、false、NaN、'' 和 undefined）视为需要后备值。
• 您可以替换 0 或 false 等值。

示例：

let result = value || fallbackValue;

这里， false 被视为 false，并使用后备“未登录”。

常见陷阱以及如何避免它们

现在您知道了其中的区别，让我们看看初学者经常犯的一些常见错误以及如何避免它们。

错误1：使用||对于有效的虚假值

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

问题：您想显示 0 作为分数，但是 ||将其替换为“无分数”，因为 0 为假。

解决方案：使用??允许 0 通过。

let count = 0;
let defaultCount1 = count ?? 10; // Using nullish coalescing
let defaultCount2 = count || 10; // Using logical OR

console.log(defaultCount1); // Output: 0
console.log(defaultCount2); // Output: 10

错误 2：误解空合并

let userInput = '';
let fallbackInput = userInput ?? 'default input';

console.log(fallbackInput); // Output: ''

解释：userPreference 为 null，因此使用后备 false。这是 ??.

的正确行为

常见问题解答

我可以使用吗？和 ||一起？

是的，如果需要，您可以在同一表达式的不同部分使用这两个运算符。

示例：

let isLoggedIn = false;
let loginStatus = isLoggedIn || 'Not logged in';

console.log(loginStatus); // Output: 'Not logged in'

这首先使用 ?? 检查是否为 null 或未定义。然后使用 || 检查其他虚假值。

所有浏览器都支持 Nullish 合并运算符吗？

??现代浏览器支持运算符，但对于较旧的环境，您可能需要使用像 Babel 这样的转译器。

每个运营商的用例是什么？

• 使用??当你特别关心 null 或 undefined 时。
• 使用||当你想要处理任何虚假值时。

做 ？？使用其他虚假值？

不，??只检查 null 和 undefined，不检查其他虚假值，如 false、0 或 ''。

结论

理解 ?? 之间的区别和 || JavaScript 对于编写健壮且无错误的代码至关重要。虽然这两个运算符都有助于提供后备值，但它们在处理虚假值时的行为有所不同。使用 ？？当您需要检查 null 或未定义时，请使用 ||当你想检查是否有虚假值时。

通过掌握这些运算符，您将能够编写更灵活、更准确的代码，其行为完全符合预期。

以上是别迷惑？？与|| JavaScript：这就是它们的不同之处！的详细内容。更多信息请关注PHP中文网其他相关文章！