JavaScript - 逻辑运算符

JavaScript 逻辑运算符

JavaScript 中的逻辑运算符通常与布尔操作数一起使用，并返回布尔值。JavaScript 中的逻辑运算符主要有三种类型 - &&(与)、||(或)和 !(非)。这些运算符用于控制程序流程。

虽然逻辑运算符通常与布尔值一起使用，但它们可以与任何类型一起使用。对于每个非布尔值，运算符会转换为布尔值。falsy 值转换为 false，truthy 值转换为 true。

JavaScript 中有六个 falsy 值:false、null、undefined、0(零)、""(空字符串)、NaN。除 falsy 值以外的值均被视为 truthy 值。因此，非零数字、非空字符串等均为 truthy 值。

&& 和 || 运算符根据条件返回其中一个操作数的值。因此，如果操作数为非布尔值，则返回非布尔值。! 运算符始终返回布尔值。

操作数可以是文字、变量或表达式。在执行逻辑运算之前，这些操作数首先会被求值为等效的布尔值。

下表给出了逻辑运算符及其说明和示例。假设:x = true，y = false。

JavaScript 逻辑与 (&&) 运算符

逻辑与 (&&) 运算符按从左到右的顺序对操作数进行求值。如果第一个操作数可以转换为 false，则返回第一个操作数的值;否则，返回第二个操作数的值。

x && y

在上述表达式中，如果 x 为 false，则返回 x 的值;否则，返回 y 的值。

上述规则适用于所有类型的操作数，无论是布尔值、数字还是字符串等。

我们先讨论一下布尔操作数。一般来说，对于一组布尔操作数，如果两个操作数都为真，则返回 true，否则返回 false。

true && true; // 返回 true
true && false;// 返回 false
false && true; // 返回 false
false && false; // 返回 false

对于数字操作数，如果第一个操作数是简单值(0、-0 和 0n)，&& 运算符将返回第一个操作数，否则返回第二个操作数。

0 && 10; // 返回 0
10 && 20; // 返回 20
20 && 0; // 返回 0

对于字符串值，空字符串转换为 false，非空字符串转换为 true。请看以下示例。

let str1 = '';
let str2 = 'Hello';
let str3 = 'World';
console.log(str1 && str2); // 返回 '' 空字符串
console.log(str2 && str3); // 返回 World

让我们看看 && 运算符如何处理 null 和 undefined -

null && true // 返回 null
undefined && true // 返回 undefined

对于以上所有示例，您已经注意到，如果第一个操作数可以转换为 false，则返回第一个操作数的值，否则返回第二个操作数的值。

示例

现在让我们看一个逻辑表达式的示例。

<html>
<body>
<div id="output"></div>
<script>
  const x = 3;
  const y = -2;
  document.getElementById("output").innerHTML = x > 0 && y > 2;
</script>
</body>
</html>

此处 x > 0 的计算结果为 true，而 y > 2 的计算结果为 false。最终表达式的结果为 true && false，其计算结果为 false。

多个 && 运算符

如果表达式中有多个 && 运算符，&& 运算符将从左到右计算表达式，并将每个操作数转换为布尔值。如果结果为 false，则返回该操作数的值并终止执行。如果所有操作数均为真，则返回最后一个操作数的值。

10 && null && false; // 返回 null
true && 10 && 20; // 返回 20

JavaScript 逻辑或 (||) 运算符

逻辑或 (||) 运算符也按从左到右的顺序对操作数进行求值。如果第一个操作数可以转换为 true，则返回第一个操作数的值，否则返回第二个操作数的值。

x || y

在上面的表达式中，如果 x 为真值，则返回 x 的值，否则返回 y 的值。

由于 || 是一个逻辑运算符，因此它可以应用于任何类型的操作数，而不仅仅是布尔值。

我们先讨论一下布尔操作数。通常，对于一组布尔操作数，如果两个操作数都为 false，则返回 false，否则返回 true。

true || true; // 返回 true
true || false; // 返回 true
false || true; // 返回 true
false || false; // 返回 false

对于数字操作数，||如果第一个操作数为真值(0、-0 和 0n 除外)，则运算符返回第一个操作数;否则返回第二个操作数。

0 || 10; // 返回 10
10 || 20; // 返回 10
20 || 0; // 返回 20

对于字符串值，空字符串转换为 false，非空字符串转换为 true。请看以下示例。

示例

<html>
<body>
<div id="output"></div>
<script>
  let str1 = '';
  let str2 = 'Hello';
  let str3 = 'World';  
  document.getElementById("output").innerHTML = 
  str1 || str2 + "<br>" +
  str2 || str3;
</script>
</body>
</html>

让我们看看 && 运算符如何用于 null 和 undefined -

null || true; // 返回 true
undefined || true; // 返回 true

对于以上所有示例，您已经注意到，如果第一个操作数可以转换为 true，则返回第一个操作数的值，否则返回第二个操作数的值。

示例

现在让我们看一个带有表达式的示例 -

<html>
<body>
<div id="output"></div>
<script>
  const x = 3;
  const y = -2;
  document.getElementById("output").innerHTML = x > 0 || y > 2;
</script>
</body>
</html>

多个 || 运算符

一个表达式中可以有多个 || 运算符。|| 运算符从左到右对表达式进行求值，并将每个操作数转换为布尔值。如果结果为 true，则返回该操作数的值并终止执行。如果所有操作数均为 false，则返回最后一个操作数的值。

null || 10 || false // 返回 10
false || null || undefined // 返回 undefined

JavaScript 逻辑非 (!) 运算符

逻辑非 (!) 运算符是一个一元运算符。如果操作数可以转换为 true，则返回 false;否则返回 true。

!x

如果 x 为真，则 NOT (!) 运算符返回 false。如果 x 为假，则返回 true。

与逻辑 AND 和 OR 运算符一样，此逻辑 NOT 运算符也可以用于非布尔操作数。但它始终返回布尔值。

示例

<html>
<body>
<div id="output"></div>
<script>
  document.getElementById("output").innerHTML = 
  !true   + "<br>" +
  !false  + "<br>" +
  !0      + "<br>" +
  !20     + "<br>" +
  !('Hello World')
</script>
</body>
</html>

逻辑运算符的优先级

JavaScript 中，一个表达式可能包含多个逻辑运算符。在这种情况下，运算符的计算将基于其优先级。非 (!) 运算符的优先级最高。与 (&&) 运算符的优先级高于或 (||) 运算符。

• 逻辑非 (!)
• 逻辑与 (&&)
• 逻辑或 (||)

示例

我们来看一下以下示例 -

<html>
<body>
<div id="output"></div>
<script>
  document.getElementById("output").innerHTML = 
  (false || true && !false) // returns true
</script>
</body>
</html>

逻辑非 (!) 运算符优先级最高，因此 !false 会被求值为 true。因此，表达式现在的形式为"false || true && true"。&& 的优先级高于 ||，因此接下来的"true && true"将被求值。现在表达式的形式为"false || true"。最后，"false || true"将被求值为 true。

短路求值

逻辑表达式的求值顺序为从左到右。这些表达式会进行短路求值测试。以下是短路求值的规则:

• false && any_value 返回 false
• true || any_value 返回 true

any_value 部分不会被求值，因此它对最终结果没有任何影响。