JavaScript运算符：优先级与结合性讲座
欢迎来到JavaScript运算符的世界！
大家好，欢迎来到今天的讲座！今天我们要聊的是JavaScript中一个非常重要的概念——运算符的优先级和结合性。如果你曾经在写代码时遇到过类似 3 + 4 * 2 这样的表达式，并且不知道结果是14还是11，那么你绝对不能错过今天的讲座。
什么是运算符？
在编程语言中，运算符是用来执行特定操作的符号。比如加号 +、减号 -、乘号 * 等等。JavaScript中有许多不同类型的运算符，包括算术运算符、比较运算符、逻辑运算符、赋值运算符等等。
但是，当你在一个表达式中使用多个运算符时，JavaScript是如何决定先执行哪个运算符的呢？这就引出了我们今天的主题——运算符的优先级和结合性。
一、运算符的优先级
1. 什么是优先级？
运算符的优先级决定了在同一表达式中，哪些运算符会先被计算。简单来说，优先级高的运算符会先于优先级低的运算符执行。
举个例子：
let result = 3 + 4 * 2;在这个表达式中，* 的优先级高于 +，所以 4 * 2 会先计算，结果是8，然后再与3相加，最终结果是11。
2. 优先级表
为了帮助大家更好地理解运算符的优先级，我们可以参考以下表格（摘自MDN文档）。这个表格列出了JavaScript中常见的运算符及其优先级，从高到低排列：
| 优先级 | 运算符类型 | 运算符 |
|---|---|---|
| 19 | 后置递增/递减 | a++, a-- |
| 18 | 前置递增/递减 | ++a, --a |
| 17 | 一元运算符 | +a, -a, !a, ~a, typeof a |
| 16 | 成员访问 | a.b, a[b] |
| 15 | 函数调用 | a() |
| 14 | 新建对象 | new a() |
| 13 | 乘法/除法/取模 | *, /, % |
| 12 | 加法/减法 | +, - |
| 11 | 位移 | <<, >>, >>> |
| 10 | 关系运算符 | <, >, <=, >= |
| 9 | 相等运算符 | ==, !=, ===, !== |
| 8 | 位与 | & |
| 7 | 位异或 | ^ |
| 6 | 位或 | | |
| 5 | 逻辑与 | && |
| 4 | 逻辑或 | || |
| 3 | 条件运算符 | a ? b : c |
| 2 | 赋值运算符 | =, +=, -=, *=, /=, %=, … |
| 1 | 逗号运算符 | , |
3. 优先级的应用
让我们来看一些实际的例子，看看优先级是如何影响表达式的计算顺序的。
示例1：算术运算符
let result = 3 + 4 * 2; // 11根据优先级表，* 的优先级为13，而 + 的优先级为12，因此 4 * 2 会先计算，结果是8，然后再加上3，得到11。
示例2：逻辑运算符
let result = true || false && false; // true在这个表达式中，&& 的优先级高于 ||，因此 false && false 会先计算，结果是 false，然后与 true 进行逻辑或运算，最终结果是 true。
示例3：关系运算符
let result = 5 > 3 && 2 < 4; // true在这个表达式中，> 和 < 的优先级相同，都是10，因此它们会从左到右依次计算。5 > 3 为 true，2 < 4 也为 true，最后 true && true 结果是 true。
4. 使用括号改变优先级
有时候，我们希望改变运算符的默认优先级。这时可以使用括号 () 来强制某些部分先计算。例如：
let result = (3 + 4) * 2; // 14在这里，括号改变了运算符的优先级，使得 3 + 4 先计算，结果是7，然后再乘以2，得到14。
二、运算符的结合性
1. 什么是结合性？
结合性决定了当多个相同优先级的运算符出现在同一表达式中时，它们是从左到右还是从右到左进行计算。简单来说，结合性决定了运算符的“方向”。
2. 左结合性 vs 右结合性
- 左结合性：表示从左到右计算。大多数运算符都是左结合的，比如加法
+、减法-、乘法*等。 - 右结合性：表示从右到左计算。赋值运算符
=和条件运算符? :是右结合的。
3. 结合性表
以下是一些常见运算符的结合性（摘自MDN文档）：
| 运算符类型 | 结合性 |
|---|---|
| 后置递增/递减 | 无 |
| 前置递增/递减 | 无 |
| 一元运算符 | 右结合 |
| 成员访问 | 左结合 |
| 函数调用 | 左结合 |
| 乘法/除法/取模 | 左结合 |
| 加法/减法 | 左结合 |
| 位移 | 左结合 |
| 关系运算符 | 左结合 |
| 相等运算符 | 左结合 |
| 位与 | 左结合 |
| 位异或 | 左结合 |
| 位或 | 左结合 |
| 逻辑与 | 左结合 |
| 逻辑或 | 左结合 |
| 条件运算符 | 右结合 |
| 赋值运算符 | 右结合 |
| 逗号运算符 | 左结合 |
4. 结合性的应用
示例1：左结合性
let result = 5 - 2 - 1; // 2在这个表达式中，- 是左结合的，因此 5 - 2 会先计算，结果是3，然后再减去1，最终结果是2。
示例2：右结合性
let a = 1, b = 2, c = 3;
a = b = c; // a = 3, b = 3, c = 3在这个表达式中，赋值运算符 = 是右结合的，因此 b = c 会先计算，结果是3，然后将3赋值给 a，最终 a、b 和 c 都等于3。
示例3：条件运算符
let result = true ? 1 : false ? 2 : 3; // 1在这个表达式中，条件运算符 ? : 是右结合的，因此 false ? 2 : 3 会先计算，结果是3，然后 true ? 1 : 3 最终结果是1。
三、总结
今天我们学习了JavaScript中运算符的优先级和结合性。通过理解这些概念，你可以更清楚地知道表达式是如何被计算的，从而避免一些常见的错误。记住，优先级决定了运算符的先后顺序，而结合性则决定了相同优先级的运算符是从左到右还是从右到左计算。
当然，最好的做法是使用括号来明确表达式的计算顺序，这样不仅可以避免优先级和结合性带来的困惑，还能让代码更具可读性。
如果你觉得今天的讲座对你有帮助，别忘了点赞和分享哦！下次再见，编码愉快！ 😊
