JavaScript - 运算符优先级
在 JavaScript 中，运算符优先级确保当单个表达式包含多个运算符时，运算符的执行优先级。因此，无论哪个表达式具有较高的优先级，编译器都会优先执行它，然后再执行优先级较低的运算符。
当您编写仅包含 1 个或 2 个运算符的 JavaScript 表达式时，您可以轻松地理解表达式的输出。但是，当表达式包含多个运算符时，您应该了解运算符优先级的概念，以便正确地计算表达式的值。
运算符优先级的最佳示例是，在传统数学中，乘法运算符的优先级高于加法或减法运算符。因此，如果任何数学表达式包含两个运算符的乘法和加法，则需要先执行乘法。
结合性
术语"结合性"是指编译器在计算表达式时应遵循的方向。在许多情况下，运算符具有相同的优先级。在这种情况下，编译器就会出现歧义，不知道应该先执行哪个操作。因此，编译器会利用结合律。结合律可以是从左到右，也可以是从右到左。
例如，我们需要执行以下表达式。
let res = 50/5*2;
将上述表达式视为 (50/5) * 2，则输出为 20。
计算 50/ (5*2) 这样的表达式，结果为 5。
为了解决上述歧义，编译器会使用结合律。除法和乘法运算符的结合律是从左到右的。因此，它将表达式求值为 (50 / 5) * 2。
赋值运算符具有从右到左的结合性。请考虑以下赋值表达式。
P = q = 90;
在上面的表达式中，90 被赋值给 q，而 q 变量的值被赋值给 p。
简而言之，JavaScript 编译器根据运算符优先级对表达式进行求值，当多个运算符的优先级相同时，编译器将使用结合性规则。
运算符优先级表
下表包含运算符、其描述、结合性方向和一个简短示例。
| 运算符优先级 | 运算符 | 描述 | 结合性 | 示例 |
|---|---|---|---|---|
| 1 | () | 分组 | L -> R | (表达式) |
| 2 | . | 对象成员 | L -> R | 对象名称.属性 |
| 2 | () | 函数调用 | L -> R | Demo() |
| 2 | new | 创建对象 | R -> L | New test() |
| 2 | [] | 对象的成员 | L -> R | Object["property"] |
| 3 | -- | 后缀递减 | - | p--; |
| 3 | ++ | 后缀递增 | - | p++ |
| 4 | -- | 前缀递减 | R -> L | --p; |
| 4 | ++ | 前缀递增 | R -> L | ++p; |
| 4 | typeof | 获取变量类型 | R -> L | typeof a; |
| 4 | ! | 逻辑非 | R -> L | !a; |
| 4 | ~ | 按位非 | R -> L | ~p |
| 4 | - | 一元减 | R -> L | -p |
| 4 | + | 一元加 | R -> L | +p |
| 4 | delete | 删除对象属性 | R -> L | 删除 arr[0] |
| 4 | void | 计算 void 值 | R -> L | Void(1) |
| 5 | ** | 指数运算符 | R -> L | p ** q |
| 6 | * | 乘法 | L -> R | p * q |
| 6 | / | 除法 | L -> R | p / q |
| 6 | % | 模 | L -> R | p % q |
| 7 | + | 加法或加号运算符 | L -> R | p + q |
| 7 | - | 减法运算符 | L -> R | p - q |
| 8 | << | 左移 | L -> R | p << 2 |
| 8 | >> | 有符号右移 | L -> R | p >> 2 |
| 8 | >>> | 无符号右移 | L -> R | p >>> 2 |
| 9 | in | 对象中的属性 | L -> R | x in y |
| 9 | instanceof | 对象实例 | L -> R | p instanceof Object |
| 9 | < | 小于 | L -> R | p < q |
| 9 | <= | 小于或等于 | L -> R | p <= q |
| 9 | > | 大于 | L -> R | p > q |
| 9 | >= | 大于或等于 | L -> R | p >= q |
| 10 | == | 等于 | L -> R | p == q |
| 10 | != | 不等于 | L -> R | p != q |
| 10 | === | 严格相等 | L -> R | p === q |
| 10 | !== | 严格不等 | L -> R | p !== q |
| 11 | & | 按位与 | L -> R | p & q |
| 12 | ^ | 按位异或 | L -> R | p ^ q |
| 13 | | | 按位或 | L -> R | p | q |
| 14 | && | 逻辑与 | L -> R | p && q |
| 15 | || | 逻辑或 | L -> R | p || q |
| 16 | ?? | 空值合并 | R -> L | p ?? q |
| 17 | = | 赋值 | R -> L | p = q |
| 17 | : | 冒号赋值 | R -> L | p : q |
| 17 | += | 加法赋值 | R -> L | p += q |
| 17 | -= | 减法赋值 | R -> L | p -= q |
| 17 | *= | 乘法赋值 | R -> L | p *= q |
| 17 | /= | 除法赋值 | R -> L | p /= q |
| 17 | %= | 模赋值 | R -> L | p %= q |
| 17 | **= | 指数赋值 | R -> L | p **= q |
| 17 | <<= | 左移赋值 | R -> L | p <<= q |
| 17 | >>= | 右移赋值 | R -> L | p >>= q |
| 17 | >>>= | 无符号右移赋值 | R -> L | p >>>= q |
| 17 | &= | 按位与赋值 | R -> L | p &= q |
| 17 | ^= | 按位异或赋值 | R -> L | p ^= q |
| 17 | |= | 按位或赋值 | R -> L | p |= q |
| 17 | &&= | 逻辑与赋值 | R -> L | p &&= q |
| 17 | ||= | 逻辑或赋值 | R -> L | p ||= q |
| 17 | =-> | 箭头运算符 | - | (a, b)=-> { // 函数代码} |
| 17 | 展开运算符 | - | [ arr] | |
| 18 | yield | 暂停/恢复 | R -> L | yield p; |
| 19 | , | 逗号运算符 | L -> R | (10, 20, 30) |
示例
让我们通过简单的例子来理解运算符的优先级。
示例
在下面的示例中，第一个表达式包含优先级相同的除法、取模和乘法运算符。因此，编译器将使用结合性规则，即乘法、除法和取模运算符的结合性都是从左到右。
因此，它将 30 除以 15，用 3 对 (30/15) 取模，然后将 ((30/15)%3) 乘以 2。
在第二个表达式中，幂运算符的结合性是从右到左的。因此，它对表达式的求值与 (2 *8 (3 ** 2)) 相同。
<html>
<body>
<div id = "output"></div>
<script>
const first = 30 / 15 % 3 * 2;
const second = 2 ** 3 ** 2;
document.getElementById("output").innerHTML =
"第一个表达式的值为 : " + first + "<br>" +
"第二个表达式的值为 : " + second;
</script>
</body>
</html>
输出
结果如下:
第一个表达式的值为:4 第二个表达式的值为:512
示例
此代码演示了如何使用分组运算符 () 更改运算符优先级。在下面的代码中，我们采用了与上述代码相同的表达式，但更改了运算符优先级。
在第一个表达式中，首先，我们取模并将结果乘以 2。因此，我们得到 0，然后将 30 除以 0，返回无穷大。
在第二个表达式中，第一个表达式计算 (2 ** 3) 和 (8 ** 2)，结果等于 64。
<html>
<body>
<div id = "output"></div>
<script>
const first = 30 / ((15 % 3) * 2);
const second = (2 ** 3) ** 2;
document.getElementById("output").innerHTML =
"第一个表达式的值为 : " + first + "<br>" +
"第二个表达式的值为 : " + second;
</script>
</body>
</html>
输出
第一个表达式的值为:Infinity 第二个表达式的值为:64
分组运算符可以更改任何运算符的运算符优先级，因为它具有最高的运算符优先级。
