JavaScript - 运算符优先级

你好，有抱负的程序员们！今天，我们将深入探讨一个一开始可能听起来有点吓人的话题，但我向你保证，它并没有听起来那么可怕。我们要讨论的是JavaScript运算符优先级。把它想象成编程中数学的“优先顺序”。让我们一起分析一下！

什么是运算符优先级？

在我们跳入深水区之前，让我们从基础开始。运算符优先级就像你在数学课上学到的运算顺序。记得PEMDAS（括号、指数、乘法、除法、加法、减法）吗？JavaScript有它自己的版本！

运算符优先级决定了运算符之间的解析顺序。具有较高优先级的运算符将成为具有较低优先级的运算符的操作数。

让我们来看一个简单的例子：

let result = 5 + 3 * 2;
console.log(result); // 输出: 11

你可能认为答案应该是16（5 + 3 = 8，然后8 2 = 16），但实际上是11。为什么？因为乘法的优先级高于加法。所以，3 2先计算（得到6），然后5加上它。

结合性

现在，让我们来谈谈一个听起来很高级的词：结合性。别担心，它听起来比实际上要简单！

结合性决定了相同优先级的运算符的处理顺序。它可以是左到右，也可以是右到左。

左结合性

大多数运算符遵循左结合性。这意味着它们从左到右进行评估。让我们看一个例子：

let a = 10 - 5 - 2;
console.log(a); // 输出: 3

JavaScript是如何处理这个的：

1. 10 - 5 = 5
2. 5 - 2 = 3

右结合性

一些运算符，如赋值运算符（=），具有右结合性。让我们看看这是如何工作的：

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // 输出: 5 5 5

JavaScript从右到左处理这个：

1. c = 5
2. b = c（也就是5）
3. a = b（也就是5）

运算符优先级表

现在，让我们来看看JavaScript中的运算符优先级“菜单”。别担心如果你现在不理解所有这些——我们会通过一些例子来讲解！

优先级	运算符类型	结合性	运算符
19	分组	不适用	( ... )
18	成员访问	左结合	. []
17	函数调用	左结合	... ( )
16	新建（带参数列表）	不适用	new ... ( )
15	后置递增/递减	不适用	... ++ ... --
14	逻辑非、位运算非、一元加减、前缀递增/递减、typeof、void、delete、await	右结合	! ~ + - ++ -- typeof void delete await
13	幂运算	右结合	**
12	乘法、除法、余数	左结合	* / %
11	加法、减法	左结合	+ -
10	位运算移位	左结合	<< >> >>>
9	关系运算	左结合	< <= > >= in instanceof
8	等价运算	左结合	== != === !==
7	位运算与	左结合	&
6	位运算异或	左结合	^
5	位运算或	左结合	|
4	逻辑与	左结合	&&
3	逻辑或	左结合	||
2	三元	右结合	?:
1	赋值	右结合	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	逗号	左结合	,

示例

现在，让我们通过一些例子来将这些知识付诸实践！

示例 1：算术运算

let result = 2 + 3 * 4 - 1;
console.log(result); // 输出: 13

JavaScript是如何评估这个的：

1. 3 * 4 = 12（乘法有更高的优先级）
2. 2 + 12 = 14
3. 14 - 1 = 13

示例 2：逻辑运算

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // 输出: true

让我们分解这个：

1. x < y 是 true
2. y < z 是 true
3. true && true 是 true
4. x > z 是 false
5. true || false 是 true

记住，&&（与）的优先级高于||（或）。

示例 3：混合运算

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // 输出: false

这看起来很复杂，但让我们一步步来：

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35 是 false
5. a < b 是 true
6. false && true 是 false

示例 4：赋值和比较

let x, y, z;
x = y = z = 5;
console.log(x, y, z); // 输出: 5 5 5

let result = x == y === z;
console.log(result); // 输出: true

记住，赋值（=）具有右结合性，而等价比较（==，===）具有左结合性。

1. z = 5
2. y = z（也就是5）
3. x = y（也就是5）
4. x == y 是 true
5. true === z 是 true（因为z是5，这是真值）

结论

恭喜你！你已经迈出了理解JavaScript运算符优先级的第一步。记住，熟能生巧。不要害怕尝试不同的运算符组合——这样你才能真正理解这些概念。

还有一个小贴士：当你不确定时，使用括号！它们具有最高的优先级，并可以使你的代码更具可读性。例如：

let result = (2 + 3) * 4 - 1;
console.log(result); // 输出: 19

这样，你就可以明确告诉JavaScript你希望如何评估表达式。

继续编码，继续学习，最重要的是，享受乐趣！JavaScript是一种强大的语言，理解这些基础将为你的编程之旅奠定成功的基础。

Credits: Image by storyset