JavaScript - 分組運算子

JavaScript 分組運算子

JavaScript 中的分組運算子控制表示式中求值的優先順序。它由括號 () 表示，您可以將表示式放在其中以更改表示式求值的順序。它有助於在優先順序較高的表示式之前求值優先順序較低的表示式。

語法

您可以按照以下語法使用分組運算子：

( exp )

在以上語法中，'exp' 是要更改求值優先順序的表示式。

let res1 = 4 + 5 * 6; // 4 + 30
let res2 = (4 + 5) * 6; // 9 + 6

JavaScript 中的乘法 (*) 運算子優先順序高於加法 (+) 運算子。因此，當上述程式碼求值第一個表示式時，它將先計算 5 和 6 的乘積，然後將結果值加到 4 上。

在第二個表示式中，我們使用分組運算子將 (4 + 5) 表示式括起來，以使其優先順序高於普通運算子。因此，它先將 4 和 5 相加，然後將結果值乘以 6。

示例

<html>
<body>
<div id="output"></div>
<script>
   let res1 = 4 + 5 * 6;
   let res2 = (4 + 5) * 6;
   document.getElementById("output").innerHTML =
   "Result 1: " + res1 + "<br>" +
   "Result 2: " + res2;
</script>
</body>
</html>

它將產生以下結果：

Result 1: 34
Result 2: 54

立即呼叫函式表示式 (IIFE)

要在 JavaScript 中定義一個立即呼叫函式，我們使用分組運算子。匿名函式定義放在分組運算子內。這些函式也稱為自執行函式。

(function () { return 5; })();

在上面的示例中，函式定義 "function () { return 5;}" 被放在分組運算子內。

示例

在下面的示例中，我們使用分組運算子定義了自執行函式語句。

第一個表示式將 10 除以 5（函式的返回值），並將結果值 2 加到 5 上。

第二個表示式先將 5 和 10 相加，然後將結果值除以函式的返回值。

<html>
<body>
<div id="output"></div>
<script>
   let ans1 = 5 + 10 / (function () { return 5; })();
   let ans2 = (5 + 10) / (function () { return 5; })();
   document.getElementById("output").innerHTML =
   "Result 1: " + ans1 + "<br>" +
   "Result 2: " + ans2;
</script>
</body>
</html>

它將產生以下結果：

Result 1: 7
Result 2: 3

簡單來說，分組運算子用於對子表示式進行分組，以更改其相對於普通優先順序的求值優先順序。

分組運算子與邏輯運算子

JavaScript 中的分組運算子也可用於對包含邏輯運算子的表示式進行分組。例如，在以下表達式中，&& 運算子的優先順序高於 || 運算子。因此，表示式將按以下方式求值

false && false || true; // true

但是，如果我們在 || 運算子周圍新增括號，則表示式將按以下方式求值

false && (false || true); //false

這是因為分組運算子覆蓋了正常的運算子優先順序，以便 || 運算子首先被求值。

示例

此示例演示了分組運算子如何更改 OR 運算子的優先順序，使其在 AND 運算子之前被求值。該表示式使用邏輯運算子。

<html>
<body>
<div id="output"></div>
<script>
   let res1 =  false && false || true // true
   let res2 = false && (false || true) //false
   document.getElementById("output").innerHTML =
   "Result without grouping operator: " + res1 + "<br>" +
   "Result with grouping operator: " + res2;
</script>
</body>
</html>

它將產生以下結果：

Result without grouping operator: true
Result with grouping operator: false

列印頁面