JavaScript - 逻辑运算符



JavaScript 逻辑运算符

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

虽然逻辑运算符通常与布尔值一起使用,但它们可以与任何类型一起使用。对于每个非布尔值,运算符将其转换为布尔值。假值被转换为 false,真值被转换为 true。

JavaScript 中有六个假值:false、null、undefined、0(零)、""(空字符串)、NaN。除假值之外的值都被视为真值。因此,非零数字、非空字符串等都是真值

&&|| 运算符根据条件返回操作数之一的值。因此,如果操作数是非布尔值,则它们返回非布尔值。! 运算符始终返回布尔值。

操作数可以是字面量、变量或表达式。在执行逻辑运算之前,它们首先会被评估为布尔等价物。

在下表中,我们给出了逻辑运算符及其描述和示例。假设:x = true,y = false。

运算符 描述 示例
&& 逻辑 AND (x && y) 为 false。
|| 逻辑 OR (x || y) 为 true。
! 逻辑 NOT !(x) 为 false。

JavaScript 逻辑 AND (&&) 运算符

逻辑 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

对于数字操作数,&& 运算符将返回第一个操作数,如果它是假值(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,则它返回第一个操作数的值,否则返回第二个操作数的值。

示例

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

<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

多个 && 运算符

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

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

JavaScript 逻辑或 (||) 运算符

逻辑或 (||) 运算符也从左到右依次计算操作数。如果第一个操作数可以转换为真,则返回第一个操作数的值,否则返回第二个操作数的值。

x || y

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

虽然 || 是一个逻辑运算符,但它可以应用于任何类型的操作数,而不仅仅是布尔值。

让我们首先讨论布尔操作数。一般来说,对于一组布尔操作数,如果两个操作数都为 ,则返回假,否则返回

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

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

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

多个 || 运算符

在一个表达式中,我们可能有多个 || 运算符。|| 运算符会从左到右依次计算表达式,并将每个操作数转换为布尔值。如果结果为真,则返回该操作数的值并终止执行。如果所有操作数都为假,则返回最后一个操作数的值。

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

JavaScript 逻辑非 (!) 运算符

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

!x

如果 x 为真值,则 NOT (!) 运算符返回假。如果 x 为假值,则返回真。

与逻辑 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 中的表达式可能包含多个逻辑运算符。在这种情况下,运算符根据其优先级进行计算。NOT (!) 运算符具有最高优先级。然后 AND (&&) 运算符的优先级高于 OR (||) 运算符。

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

示例

让我们检查以下示例:

<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 部分不会被计算,因此它对最终结果没有任何影响。

广告