Javascript 简明教程

JavaScript - Grouping Operator

JavaScript Grouping Operator

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

The grouping operator in JavaScript controls the precedence of the evaluation in expressions. It is denoted by parenthesis (), and you can put the expression inside that to change the expression evaluation order. It helps to evaluate an expression with lower precedence before an expression with higher precedence.

Syntax

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

You can follow the syntax below to use the grouping operator –

( exp )

在上面的语法中，“exp”是一个用于更改求值优先级的表达式。

In the above syntax, the 'exp' is an expression to change the precedence of evaluation.

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

JavaScript 中的乘法（*）运算符优先级高于加法（+）运算符。因此，当上述代码计算第一个表达式时，它将把 5 乘以 6，并将结果值加到 4。

The multiplication (*) operator in JavaScript has higher precedence than the addition (+) operator. So, when the above code evaluates the first expression, it will multiply 5 and 6 and add the resultant value to 4.

在第二个表达式中，我们使用分组运算符对 (4 + 5) 表达式进行分组，以使其优先级高于普通运算符。因此，它先把 4 和 5 相加，再把结果值乘以 6。

In the second expression, we grouped the (4 + 5) expression using the grouping operator to provide it with higher precedence than the normal operator. So, it adds 4 and 5 first and multiplies the resultant value with 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>

它将产生以下结果 −

It will produce the following result −

Result 1: 34
Result 2: 54

Immediately Invoked Function Expressions (IIFEs)

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

To define an immediately invoked function in JavaScript, we use the grouping operator. The anonymous function definition is put inside the grouping operator. These functions are also called self-executing functions.

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

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

In the above example, the function definition "function () { return 5;}" in put inside the grouping operator.

Example

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

In the example below, we have defined the self-executing function statement using the grouping operator.

第一个表达式将 10 除以 5（从函数返回的值），然后将其结果值 2 加到 5。

The first expression divides 10 by 5 (returned value from the function) and adds the resultant value, which is 2 to 5.

第二个表达式先将 5 和 10 相加，然后将结果值除以从该函数返回的值。

The second expression adds 5 and 10 first and divides the resultant value with the value returned from the function.

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

它将产生以下结果 −

It will produce the following result −

Result 1: 7
Result 2: 3

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

In simple terms, the grouping operator is used to group the sub-expressions to change its evaluation precedence over the normal precedence.

Grouping Operator with Logical Operators

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

The grouping operator in JavaScript can also be used to group expressions with logical operators. For example, in the following expression, the && operator has a higher precedence than the ||operator. So, the expression will be evaluated as follows:

false && false || true; // true

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

However, if we add parentheses around the ||operator, the expression will be evaluated as follows:

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

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

This is because the grouping operator overrides the normal operator precedence, so that the ||operator is evaluated first.

Example

此示例演示了分组运算符如何将 OR 运算符的优先级更改为在 AND 运算符之前求值。该表达式使用逻辑运算符。

This example demonstrates that how a grouping operator changes the precedence of OR operator to be evaluated before AND operator. The expression uses the logical operators.

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

它将产生以下结果 −

It will produce the following result −

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