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 部分不會被計算，因此它對最終結果沒有任何影響。

列印頁面