JavaScript - 逻辑运算符

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

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

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

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

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

在下表中，我们给出了逻辑运算符及其描述和示例。我们假设：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; // 返回 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); // 返回 '' empty string
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，则返回该操作数的值并终止执行。如果所有操作数都是 true，则返回最后一个操作数的值。


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

JavaScript 逻辑 OR （||）运算符

逻辑 OR （||）运算符还从左到右计算操作数。如果第一个操作数可以转换为 true，它将返回第一个操作数的值，否则将返回第二个操作数的值。


 x || y

在上面的表达式中，如果 x 是一个真值，那么它将返回 x 的值，否则它将返回 y 的值。

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

让我们首先讨论布尔操作数。通常，对于一组布尔操作数，如果两个操作数均为 false，它将返回 flase，否则返回 true。


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

对于数字操作数， || 如果第一个操作数是真值（0、-0 和 0n 除外），则 operator 将返回第一个操作数，否则返回第二个操作数。


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，则它返回第一个操作数的值，否则返回第二个操作数的值。

例

现在让我们看一个带有 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>

多个 || 运算符

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


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

JavaScript 逻辑 NOT （！）运算符

逻辑 NOT （！）运算符是一元运算符。如果操作数可以转换为 true，则返回 false，否则返回 true。

!x

如果 x 为 true，则 NOT （！）运算符返回 false。如果 x 是假的，则返回 true。

与逻辑 AND 和 OR 运算符相同，此逻辑 NOT 运算符也可以与非布尔操作数一起使用。但它将始终返回一个 Boolean 值。

例


<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 （||）运算符。

逻辑 NOT （！）
逻辑 AND （&&）
逻辑 OR （||）

例

让我们检查以下示例 -


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

逻辑 NOT （！）运算符具有最高优先级，因此！false 的计算结果为 true。因此，表达式现在看起来像 “false || true & ture”。&&的优先级高于||所以接下来将评估 “true & & true”。现在表达式看起来像 “false || true“的最后 “false || true“将被评估为 true。

短路评估

逻辑表达式从左到右计算。这些都经过短路评估测试。以下是短路评估的规则 -

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

any_value 部分不会被评估，因此它不会对最终结果产生任何影响。

<< JavaScript - 比较运算符 JavaScript - 按位运算符 >>

JavaScript 逻辑 AND （&&） 运算符