JavaScript 中的分组运算符控制表达式中的求值优先级。它由圆括号 ()
表示,可以在其中放置表达式以改变表达式的求值顺序。它有助于先计算优先级较低的表达式,然后再计算优先级较高的表达式。
语法
你可以按照下面的语法使用分组运算符:
( exp )
在上述语法中,exp
是一个用于改变求值优先级的表达式。
let res1 = 4 + 5 * 6;
let res2 = (4 + 5) * 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
立即执行的函数表达式 (IIFEs)
要定义立即执行的函数,在 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;
然而,如果我们给 ||
运算符加上括号,表达式将如下求值:
false && (false || true);
这是由于分组运算符覆盖了正常的运算符优先级,使得 ||
运算符优先求值。
示例
这个例子展示了分组运算符如何改变 OR
运算符的优先级,使其先于 AND
运算符求值。该表达式使用了逻辑运算符。
<html>
<body>
<div id="output"></div>
<script>
let res1 = false && false || true
let res2 = false && (false || true)
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