JavaScript逻辑运算符AND和OR之间的区别

AND&&和 OR||是 JavaScript 中的逻辑运算符，可用于执行不同的逻辑表达式。在这篇文章中，我将解释它们之间的区别。

本文的目标是让您了解这些运算符的工作原理以及它们的不同之处。

要理解这些运算符，了解JavaScript 中真值和假值的概念非常重要。

（更|多优质内|容：java567 点 c0m）

真实值和虚假值

在 JavaScript 中，许多值可以用它们的布尔值来表示。由 表示的值false是假值，由 表示的值true是真值。让我们看一些例子：

 0
 false
 undefined
 null
 "" // empty string

值0、false、undefined、null和空字符串""是假值，因为它们的布尔表示是false。

至于真值，任何不是真值的值falsy都是truthy。这意味着真值包括true, 1, [3. 4], {}, "hello"。

现在我们已经解决了这个问题，让我们看看它们如何与ANDandOR运算符联系起来。

如果您对此感兴趣，我有该主题的视频版本。

AND操作员

逻辑AND运算符用在表达式中的两个操作数之间，如下所示：

 operand1 && operand2

如果第一个操作数是真值，则该运算符返回第二个操作数。如果第一个操作数是假值，则运算符将返回第一个操作数。正如我们所见，真值是计算结果为 的值true。

让我们看一个例子：

 const exp1 = 5
 const exp2 = "Dillion"
 ​
 const result = exp1 && exp2
 ​
 console.log(result)
 // "Dillion"

在此示例中，我们的exp1值为5和exp2值为"Dillion"。然后我们有一个result变量，它保存使用和&&之间的运算符返回的值。exp1``exp2

这里发生的是，运算符从左侧开始检查是否exp1为真值。5是真值，因此运算符返回右侧的值。这就是为什么“Dillion”result具有价值。

AND让我们看另一个多次使用运算符的示例：

 function returnFalsy() {
   return ""
 }
 ​
 const exp1 = [1, 2]
 const exp2 = returnFalsy()
 const exp3 = { name: "Dillion" }
 ​
 const result = exp1 && exp2 && exp3
 ​
 console.log(result)
 // ""

正如我们在这个例子中看到的，我们有：

• exp1用一个数组

• exp1与调用的返回值returnFalsy()（这是一个空字符串 - 一个虚假值）

• exp3与一个物体

最后，我们有一个result变量，它保存使用and&&之间的运算符和and之间的运算符返回的值。exp1exp2exp2``exp3

我们这里有exp1 && exp2操作数 1 和操作数 2。然后这个表达式的结果将成为下一个表达式的操作数 1：result && exp3。exp3这是第二个表达式中的第二个操作数。

这里发生的是，运算符从左侧开始检查是否exp1为真值。exp2在本例中，我们有一个数组，它是一个真值，这意味着将返回第二个操作数。exp2成为第一个操作数，并exp3成为第二个表达式的第二个操作数。

第二个&&运算符检查是否exp2为真值。在这种情况下，空字符串“”是一个假值，因此运算符返回exp2。它不需要检查，exp3因为错误的事实exp2意味着操作员将停止从左到右的检查。

这里发生的是短路，您可以在我关于短路运算符的文章中了解更多信息

OR操作员

逻辑OR运算符用在表达式中的两个操作数之间，如下所示：

 operand1 || operand2

如果第一个操作数是真值，则运算符返回第一个操作数。如果第一个操作数是假值，则运算符将返回第二个操作数。

让我们看一个例子：

 const exp1 = 5
 const exp2 = "Dillion"
 ​
 const result = exp1 || exp2
 ​
 console.log(result)
 // 5

在此示例中，我们的exp1值为5和exp2值为"Dillion"。然后我们有一个result变量，它保存使用和||之间的运算符返回的值。exp1``exp2

这里发生的是，运算符从左侧开始检查是否exp1为真值。5是一个真值，因此运算符返回它。这就是为什么result值为5的原因。

操作OR员不会费心去检查，exp2因为它已经找到了一个真实值。这与运算符相反AND。AND继续从左向右，只要true。但OR会停止（再次，一旦看到true- 它只会继续从左到右，只要false

OR让我们看另一个多次使用运算符的示例：

 function returnFalsy() {
   return ""
 }
 ​
 const exp1 = null
 const exp2 = returnFalsy()
 const exp3 = { name: "Dillion" }
 ​
 const result = exp1 || exp2 || exp3
 ​
 console.log(result)
 // { name: "Dillion" }

正如我们在这个例子中看到的，我们有：

• exp1值为null（假值）

• exp1与调用的返回值returnFalsy()（这是一个空字符串 - 一个虚假值）

• exp3与一个物体

最后，我们有一个result变量，它保存使用and||之间的运算符和and之间的运算符返回的值。exp1exp2exp2``exp3

我们这里有exp1 || exp2操作数 1 和操作数 2。然后这个表达式的结果将成为下一个表达式的操作数 1：result || exp3。exp3这是第二个表达式中的第二个操作数。

这里发生的是，运算符从左侧开始检查是否exp1为真值。在本例中，我们有，它是一个假值，这意味着将返回null第二个操作数。成为第一个操作数，并成为第二个表达式的第二个操作数。exp2exp2exp3

第二个||运算符检查是否exp2为真值。在这种情况下，空字符串“”是一个假值，因此运算符返回exp3。正如您在这里所注意到的，OR只要遇到错误值，运算符就会继续运行。它只会在找到真值或到达表达式末尾时停止。

使用ANDand ORinif语句

if语句允许您创建条件语句，您可以在其中确定根据条件执行的内容。

AND让我们看一个在语句中使用的示例if：

 const isLoggedIn = true
 const cart = []
 ​
 if (isLoggedIn && cart.length) {
   console.log("Cart not empty")
 } else {
   console.log("Cart is empty")
 }

你能猜出执行这段代码的结果吗？结果是：

 // Cart is empty

原因如下。if该语句的条件是isLoggedIn && cart.length。左操作数的isLoggedIn计算结果为true。请记住，&&如果左操作数为 ，则运算符返回右操作数true。如果左操作数为 ，则仅返回左操作数false。在这种情况下，该运算符将返回cart.length，其计算结果为 0，因为cart数组为空。

这意味着该if块被执行为if(0).

该if语句将强制0为布尔值。正如我们之前看到的，0是一个假值。因此if，看到条件表达式0为的语句false将执行else块：console.log("Cart is empty")。您可以在本文中了解有关类型强制的更多信息。

假设OR被使用：

 const isLoggedIn = true
 const cart = []
 ​
 if (isLoggedIn || cart.length) {
   console.log("Cart not empty")
 } else {
   console.log("Cart is empty")
 }

你能猜到这个结果吗？这里是：

 // Cart not empty

原因如下。if这里语句的条件是isLoggedIn || cart.length。左操作数的isLoggedIn计算结果为true。请记住，||如果左操作数为 ，则该运算符将返回该操作数true。如果左操作数为 ，则仅返回右操作数false。在这种情况下，运算符将返回isLoggedIn其计算结果为true。

这意味着该if块被执行为if(true).

在这种情况下，不会发生强制转换，因为它true已经是一个布尔值。因此if，看到条件表达式true为的语句true将执行if块：console.log("Cart not empty")。

包起来

AND以下是和之间的区别摘要OR：

• AND如果左表达式是，则返回右表达式true

• AND如果左表达式是，则返回左表达式false

• OR如果左表达式是，则返回右表达式false

• OR如果左表达式是，则返回左表达式true

您注意到 是 的OR倒数AND吗？只要AND左边在，就一直向右true，LEFT只要左边在，就一直向右false

如果您喜欢这篇文章，请与其他人分享。

（更|多优质内|容：java567 点 c0m）