JavaScript 逻辑或运算符：它是如何工作的？

JavaScript 中的逻辑 OR（或|| ）运算符是一个运算符，如果左侧为真值，则返回左侧，否则默认并返回右侧。

这意味着它可以用于测试两个逻辑语句，也可以在左侧操作数为falsy时返回右侧操作数。

让我们来看看它是如何工作的。

在 JavaScript 中，Truthy 和 Falsy 到底是什么意思

在继续之前，让我们先了解一下falsy是什么意思。这似乎是一个模糊的陈述，但它实际上有一个非常具体的定义。以下值在 JavaScript 中是falsy的：

• false
• 0或-0或0n
• any空字符串，即""
• null
• undefined
• NaN

同样， truthy仅表示任何不是falsy的东西。

由于falsy可能意味着0和"" ，因此有时设置默认值可能是一个糟糕的选择。

例如，在某些情况下，如果您的值确实为0 ，并且您想显示它，您将无法使用||操作员。对于这些情况，最好考虑空值合并运算符。

JavaScript 中的逻辑 OR 运算符如何工作？

如前所述， ||运算符在 JavaScript 中有两个主要功能。最常见的是，它出现在逻辑if..else语句中，如果它的一个或多个操作数为真，则返回 true，但如果它为truthy ，它也用于返回第一个truthy ，或默认为右侧如果不是，则操作数。

||以这两种方式工作，因为它实际上返回一个值。

将逻辑或与逻辑一起使用

你可能已经看到了||最常用于if和else等逻辑语句中。在这些情况下，我们通常测试一个逻辑语句，所以||如果它的一个或多个操作数为truthy ，则返回true 。

下面发生的是||运算符返回一个值，然后if语句将其转换为true或false

 let x = 100; // This returns true, since both of these statements are correct. if(x > 5 || x > 10) { // ... } // Since both "1" and "2" can be converted to true, this also returns true in this context. if("1" || "2") { // ... } // Since both "" and null are falsy, they are converted to false, and as such this returns false. if("" || null) { // ... }

这是您将使用的主要方式之一||在您的代码中，但它也经常用于根据它们的truthy falsy来返回值。

返回值

现在让我们看另一个例子，在逻辑语句之外。如前所述， ||如果它是truthy则返回其左侧，否则返回其右侧。

这听起来有点令人困惑，所以让我们看几个例子。

 // Is set to 1, since the first operand is falsy let x = false || 1; // Is set to hello, since "hello" is truthy let y = "hello" || true;

在上面的示例中，由于x的左侧设置为false ，因此x变为 1。类似地，在y中，由于"hello"不是falsy ，因此y的值是"hello" 。此功能与其在逻辑语句和if..else语句中的应用不同，但在许多情况下都很有用。

有趣的是，即使给出的最后一项是falsy ，JavaScript 仍然会返回它。

例如：

 // Is set to null since false is falsy let x = false || null; // Is set to false since 0 is falsy let y = 0 || false;

链接 OR 运算符

可以链接|| JavaScript 中的运算符。当链接逻辑语句时（在if..else子句中），如果任何链接项为真，则该语句将返回truthy ：

 // This works since both "1" and true are truthy if("1" || true || false) { // ... console.log('this works') } // This doesn't work since all values are falsy if(false || null || undefined) { console.log('this does not work'); }

当我们使用||链接在逻辑语句之外，它将使用找到的第一个truthy值，或默认为最终值。例如，在下面， x等于3 ， y是true ， z是{} 。如果您想知道为什么z是{} ，那是因为任何不是falsy的东西都是truthy的，这意味着一个对象是truthy的！

 // x is set to 3 let x = false || 0 || 3; // y is set to true let y = false || true || 3; // z is set to {} let z = {} || [] || x;

结论

||运算符在逻辑语句中经常使用，如果找到，则默认为非falsy值。它是一个灵活的运算符，是理解 JavaScript 的核心。如果您对另一个类似的运算符感兴趣，您可能还想了解nullish coalescing 运算符。