Javascript 简明教程

JavaScript - Grouping Operator

JavaScript Grouping Operator

JavaScript 中的 grouping 运算符控制表达式中求值的优先级。它用括号（）表示，你可以在其中放置表达式以更改表达式求值顺序。它有助于在较高优先级的表达式之前求值具有较低优先级的表达式。

Syntax

你可以遵循以下语法使用分组运算符 -

( 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。

Example

<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

Immediately Invoked Function Expressions (IIFEs)

要在 JavaScript 中定义 immediately invoked function ，我们使用 grouping 运算符。匿名函数定义放在分组运算符内。这些函数也称为自执行函数。

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

在上面的示例中，函数定义“function () { return 5; }”放在分组运算符内。

Example

在下面的示例中，我们使用分组运算符定义了自执行函数语句。

第一个表达式将 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

简单来说，分组运算符用于对子表达式分组，以更改其对正常优先级的求值优先级。

Grouping Operator with Logical Operators

JavaScript 中的 grouping 运算符也可用于对表达式进行分组，并使用逻辑运算符。例如，在以下表达式中，&& 运算符的优先级高于 || 运算符。所以，该表达式将按照如下方式求值：

false && false || true; // true

但是，如果我们在 || 运算符周围添加圆括号，则将按照如下方式对该表达式求值：

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

这是因为分组运算符会覆盖正常的运算符优先级，以便先对 || 运算符求值。

Example

此示例演示了分组运算符如何将 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