JavaScript 逻辑运算符

JavaScript 中的逻辑运算符一般用于布尔操作数，并返回布尔值。JavaScript 中主要有三种逻辑运算符：&&（AND）、||（OR）以及 !（NOT）。这些运算符用来控制程序的流程。

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

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

&& 和 || 运算符根据条件返回操作数中的一个值。所以如果操作数是非布尔值，它们会返回一个非布尔值。而 ! 运算符总是返回一个布尔值。

操作数可以是字面量、变量或者表达式。在执行逻辑运算之前，这些操作数首先会被评估成其布尔等价形式。

下表列出了逻辑运算符及其描述和示例。假设：x = true, y = false。

运算符	描述	示例
&&	逻辑 AND	(x && y) 是 false。

!	逻辑 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); // 返回 '' 空字符串
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 逻辑 OR (||) 运算符

逻辑 OR (||) 运算符也从左至右评估操作数。如果第一个操作数可以转换为 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，则返回那个操作数的值并终止执行。如果所有操作数都是假值，则返回最后一个操作数的值。

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

JavaScript 逻辑 NOT (!) 运算符

逻辑 NOT (!) 运算符是一个单目运算符。如果操作数可以转换为 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 中的一个表达式可能含有多个逻辑运算符。在这种情况下，根据运算符的优先级来评估运算符。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 && true"。&& 拥有比 || 更高的优先级，所以下一步 "true && true" 将被评估。现在表达式看起来像 "false || true"。最后 "false || true" 将被评估为 true。

短路评估

逻辑表达式从左至右评估。这些表达式被测试是否适合短路评估。以下是短路评估的规则：

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

any_value 部分不会被评估，因此它不会影响最终结果。