Javascript 简明教程

JavaScript - Logical Operators

JavaScript Logical Operators

JavaScript 中的 logical 运算符通常与布尔操作数一起使用，并返回布尔值。JavaScript 中主要有三种类型的逻辑运算符 - &&（AND）、||（OR）和！（NOT）。这些运算符用于控制程序的流。

尽管 logical 运算符通常与布尔值一起使用，但它们可以与任何类型一起使用。对于每个非布尔值，运算符转换为布尔值。假值转换为 false，真值转换为 true。

JavaScript 中有六个假值：false、null、undefined、0（零）、“” （空字符串）、NaN。真值以外的值都被视为真值。因此，非零数字、非空字符串等是真值。

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

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

在下表中，我们提供了逻辑运算符及其描述和示例。我们假设：x = true，y = false。

Operator

Description

Example

&&

Logical AND

(x && y) 为 false。

Logical OR

(x

y) is true.

!

Logical NOT

JavaScript Logical AND (&&) Operator

logical AND （&&）运算符从左到右计算操作数。如果第一个操作数可以转换为 false，则它将返回第一个操作数的值，否则它将返回第二个操作数的值。

x && y

在上面的表达式中，如果 x 是假值，则它将返回 x 的值，否则它将返回 y 的值。

对于所有类型的操作数都遵循上述规则，无论它们是布尔值、数字还是字符串等。

我们首先用布尔操作数来探讨。一般来说，对于一组布尔操作数，如果两个操作数都为 true，则它将返回 true，否则它将返回 false。

true && true; // returns true
true && false;// returns false
false && true; // returns false
false && false; // returns false

对于数字操作数，如果 && 运算符是 false 值（0、-0 和 0n），它将返回第一个操作数，否则返回第二个操作数。

0 && 10; // returns 0
10 && 20; // returns 20
20 && 0; // returns 0

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

let str1 = '';
let str2 = 'Hello';
let str3 = 'World';
console.log(str1 && str2); // returns '' empty string
console.log(str2 && str3); // returns World

我们来看 && 运算符如何处理 null 和 undefined：

null && true // return null
undefined && true // returns undefined

对于以上所有示例，您都会注意到，如果第一个运算符可转换为 false，则它会返回第一个运算符的值，否则返回第二个运算符的值。

Example

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

<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 。

Multiple && Operators

如果表达式中有多个 && 运算符，&& 运算符会从左到右求值表达式，并将每个运算符转换为布尔值。如果结果是 false，它将返回值，并终止执行。如果所有运算符都真，它将返回值。

10 && null && false; // returns null
true && 10 && 20; // returns 20

JavaScript Logical OR (||) Operator

逻辑 OR （||）运算符还会从左到右求值运算符。如果第一个运算符可转换为 true，它将返回值，否则它将返回值。

x || y

在上面的表达式中，如果 x 是 true，它将返回值，否则它将返回值。

因为 || 是一个逻辑运算符，但它不仅可用于布尔运算符，也可用于任何类别的运算符。

我们首先讨论布尔运算符。一般来说，对于一组布尔运算符，如果两个运算符都假，它将返回 false，否则返回 true。

true || true; // returns true
true || false; // returns true
false || true; // returns true
false || false; // returns false

对于数字运算符，如果它是 true（除了 0、-0 和 0n），|| 运算符将返回第一个运算符，否则返回第二个运算符。

0 || 10; // returns 10
10 || 20; // returns 10
20 || 0; // returns 20

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

Example

<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; // returns true
undefined || true; // returns true

对于以上所有示例，您都会注意到，如果第一个运算符可转换为 true，则它会返回第一个运算符的值，否则返回第二个运算符的值。

Example

现在我们来看一个表达式示例：

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

Multiple || Operators

表达式中可能有多个 || 运算符。|| 运算符会从左到右求值表达式，并将每个运算符转换为布尔值。如果结果为真，则它将返回该运算符的值，并终止执行。如果所有运算符都假，则它将返回值。

null || 10 || false // returns 10
false || null || undefined // returns undefined

JavaScript Logical NOT (!) Operator

逻辑 NOT (!) 运算符是一个一元运算符。如果运算符可转换为 true，它将返回 false，否则返回 true。

!x

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

与逻辑 AND 和 OR 运算符相同，逻辑 NOT 运算符也可与非布尔运算符一起使用。但它总是返回布尔值。

Example

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

Logical Operators Precedence

一个表达式在 JavaScript 中可以有一个以上的逻辑运算符。在这种情况下，运算符将根据它们的优先级进行求值。NOT (!) 运算符的优先级最高。然后 AND (&&) 运算符的优先级高于 OR (||) 运算符。

  1. Logical NOT (!)

  2. Logical AND (&&)

  3. Logical OR (||)

Example

我们来看以下示例：

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

逻辑 NOT (!) 运算符的优先级最高，所以 !false 被转换为 true。因此表达式现在变为“false || true && true”。&& 优先级高于 ||，所以下一个“true && true”将被求值。现在表达式变为“false || true”。最后“false || true”将被转换为 true。

Short Circuit Evaluation

逻辑表达式从左到右计算。为确保短路计算，对此进行测试。以下是短路计算的规则 −

  1. 假 && 任何值将返回假

  2. 真 || 任何值将返回真

any_value 部分未计算，因此不会对其最终结果产生任何影响。