JavaScript 中的操作数优先级是我们在编写代码时常常需要关注的问题。在 ES2020 中，操作数优先级的规则得到了更新和完善，本文将详细讲解这些变化，并给出一些示例代码，帮助读者深入理解。
优先级的基础知识
在 JavaScript 中，操作数包括变量、函数、字面量、运算符等。这些操作数可以用运算符组合成表达式，表达式的求值顺序就是操作数优先级所要考虑的问题。
JavaScript 中，操作数的优先级由运算符的种类来决定，具有相同优先级的运算符之间，求值顺序由其在表达式中的位置来决定。具体来说，优先级高的运算符先求值，优先级低的运算符后求值。为了保证表达式的求值顺序符合预期，我们有时需要使用括号来明确优先级。
下表列出了常见的运算符按照优先级从高到低的顺序：
| 运算符 | 描述 |
|---|---|
| () | 分组 |
| ++, -- | 前置加加、前置减减 |
| !, ~ | 逻辑非、按位取反 |
| *, /, % | 乘法、除法、求余 |
| +, - | 加法、减法 |
| <<, >>, >>> | 左移、带符号的右移、无符号的右移 |
| <, <=, >, >= | 小于、小于等于、大于、大于等于 |
| ==, !=, ===, !== | 等于、不等于、严格等于、严格不等于 |
| & | 按位与 |
| ^ | 按位异或 |
| | | 按位或 |
| && | 逻辑与 |
| || | 逻辑或 |
| ?: | 三元条件运算符（if-else 简化版） |
| =, +=, -=, *=… | 赋值、加等于、减等于、乘等于等等各种赋值运算符 |
优先级的变化
在 ES2020 中，有两个运算符的优先级发生了变化。
幂运算符（**）
在 ES2020 之前，幂运算符的优先级比正负号高，但比乘除法低。这意味着，在执行 2 ** 3 * 4 这样的表达式时，先计算了幂运算 2 ** 3，再乘以 4，结果为 8。而在 ES2020 中，幂运算符的优先级更高，与乘除法相同。因此，2 ** 3 * 4 的结果为 24。这个变化提高了幂运算符的使用方便性。
示例代码如下：
console.log(2 ** 3 * 4); // 24 console.log(2 * 3 ** 2); // 18 console.log(-3 ** 2); // -9（平方优先计算） console.log((-3) ** 2); // 9
可选链运算符（?.）
在 ES2020 中引入了一种新的运算符——可选链运算符（?.），用来简化访问对象属性的代码。在访问对象属性时，如果属性不存在，则会抛出 TypeError 错误。为了避免这种错误，我们需要使用 if 语句或者 && 运算符判断对象和属性是否存在。
在 ES2020 中，可选链运算符可以在某个属性不存在时，直接返回 undefined，避免抛出错误。现在，我们可以用更简洁的代码来处理对象属性的访问。
示例代码如下：
-- -------------------- ---- ------- ----- --- - - -- - -- -- ------ - -- ---- -- ----- -- ------- -- ---------- - ----------------------- - -- -------- -------------------------- -- --------- -- ---------------- --------------------------- -- ---------
总结
在 ES2020 中，操作数优先级的规则得到了更加完善的更新，其中幂运算符的优先级与乘除法相同，可选链运算符代替了 if 语句和 && 运算符进行属性访问的判断，代码运行效率和可读性都得到了提升。
在编写代码时，我们需要根据运算符优先级的规则，使用括号明确表达式的求值顺序，并尽可能地使用可选链运算符简化代码，提高代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ee5c8ff6b2d6eab3866811