Javascript 简明教程

JavaScript - Logical Operators

JavaScript Logical Operators

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

The logical operators in JavaScript are generally used with Boolean operands and return a boolean value. There are mainly three types on logical operators in JavaScript - && (AND), || (OR), and ! (NOT). These operators are used to control the flow the program.

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

Although the logical operators are typically used with Boolean values, they can be used with any type. For each non-boolean value, the operator converts to a boolean. The falsy values are converted to false and truthy values to true.

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

There are six falsy values in JavaScript: false, null, undefined, 0 (zero), "" (empty string), NaN. The value other than falsy values are treated as truthy values. So non zero numbers, non-empty strings, etc., are truthy values.

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

The && and || operators return the value of one of the operands based on condition. So if the operands are non-boolean, they return a non-boolean value. The ! operator always returns a Boolean value.

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

The operands may be literals, variables or expressions. These are first evaluated to boolean equivalent before performing the logical operation.

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

In the below table, we have given the logical operators with its description and example. Let’s assume: x = true, y = false.

Operator

Description

Example

&&

Logical AND

(x && y) is false.

Logical OR

(x

y) is true.

!

Logical NOT

JavaScript Logical AND (&&) Operator

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

The logical AND (&&) operator evaluates the operands from left to right. If the first operand can be converted to false, it will return the value of first operand, otherwise it will return the value of the second operand.

x && y

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

In the above expression if x is a falsy value then it will return the value of x otherwise it will return the value of y.

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

The above rule is followed for all types of operands, whether they are Boolean values, numbers or strings, etc.

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

Let’s first discuss with Boolean operands. In general, for a set of Boolean operands, it will return true if both operands are true else it returns false.

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

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

For number operands, the && operator will return the first operand if it is flasy values (0, -0, and 0n), otherwise second operand.

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

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

For string values, empty string is converted to false and non-empty string to true. Look at the below example.

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

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

Let’s look how && operator works for null and undefined −

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

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

For all above examples, you have noticed that if the first operand can be converted to false then it returns the value of first operand otherwise the value of second operand.

Example

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

Now let’s look at an example of a logical expression.

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

Here x > 0 is evaluated to true and y > 2 is evaluated to false. And the final expression becomes true && false which is evaluated as false.

Multiple && Operators

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

If we have multiple && operators in an expression, the && operator evaluates the expression from left to right and it converts each operand to a boolean value. If the result is false, then it returns the value of that operand and terminates the execution. If all the operands are truthy then it returns the value of the last operand.

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

JavaScript Logical OR (||) Operator

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

The *logical OR *(||) operator also evaluates the operands from left to right. If the first operand can be converted to true, it will return the value of first operand, otherwise it will return the value of the second operand.

x || y

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

In the above expression if x is a truthy value then it will return the value of x otherwise it will return the value of y.

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

As || is a logical operator but it can be applied to any type of operand not only boolean.

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

Let’s first discuss with Boolean operands. In general, for a set of Boolean operands, it will return flase if both operands are false else it returns true.

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

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

For number operands, the || operator will return the first operand if it is truthy values (other than 0, -0, and 0n), otherwise second operand.

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

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

For string values, empty string is converted to false and non-empty string to true. Look at the below example.

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：

Let’s look how && operator works for null and undefined −

null || true; // returns true
undefined || true; // returns true

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

For all above examples, you have noticed that if the first operand can be converted to true then it returns the value of first operand otherwise the value of second operand.

Example

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

Now let’s look at an example with expression −

<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

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

We may have multiple || operators in an expression. The || operator evaluates the expression from left to right and it converts each operand to a boolean value. If the result is true, then it returns the value of that operand and terminates the execution. If all the operands are falsy then it returns the value of the last operand.

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

JavaScript Logical NOT (!) Operator

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

The logical NOT (!) Operator is a unary operator. It returns false if the operand can be converted to true, otherwise it returns true.

!x

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

If x is truthy, the NOT (!) operator returns false. If the x is falsy then it returns true.

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

Same as Logical AND, and OR operators, this logical NOT operator can also be used with non-boolean operands. But it will always return a Boolean value.

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 (||) 运算符。

An expression may have more than one logical operators in JavaScript. In such situation, the operators are evaluated on the basis of their precedence. The NOT (!) operator has the highest precedence. Then AND (&&) operator has the higher precedence than OR (||) operator.

  1. Logical NOT (!)

  2. Logical AND (&&)

  3. Logical OR (||)

Example

我们来看以下示例：

Let’s check the following 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。

The logical NOT (!) operator has the highest precedence so !false is evaluated to true. Hence the expression now looks like "false || true && true". The && has higher precedence than || so next "true && true" will be evaluated. Now the expression looks like "false || true". Finally "false || true" will be evaluated to true.

Short Circuit Evaluation

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

Logical expressions are evaluated from left to right. These are tested for short-circuit evaluation. Following is the rule of short circuit evaluation −

  1. false && any_value returns false

  2. true || any_value retuns true

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

The any_value part is not evaluated so it doesn’t have any effect on final result.