JavaScript运算符优先级与结合性解析

深入探讨Javascript运算符的优先级与结合性

相关资源链接：MDN Web Docs - 运算符优先级，jingxian - 浅析JS运算符&&和||及其优先级

本文灵感来源于知乎的一个问题：关于Javascript中运算符优先级的探讨。

以下是知乎用户乐己生悲提供的一个示例代码及解析：

var a = 0;
console.log(
5 > 3 && 8 <4 + (a = 5)
);

在这个表达式“5 > 3 && 8 <4 + (a = 5)”中，首先根据运算符优先级规则，从左向右解析。“5 > 3”由于关系运算符“>”的优先级高于逻辑运算符“&&”，因此先计算这部分，结果为true。接下来处理“true && 8 <4 + (a = 5)”，因为“&&”左侧为true，所以继续计算右侧的表达式。根据优先级，先计算“8 <4 + (a = 5)”。这里，由于圆括号“()”的优先级最高，先执行“a = 5”，得到5。然后进行“4 + 5”的加法运算，结果为9，最后计算“8 <9”，结果为true。最终整个表达式的结果为“true && true”，即true。

作者：乐己生悲
链接：[知乎原文链接](https://www.zhihu.com/question...)
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

下面我将通过几个额外的表达式进一步探讨运算符优先级和结合性的影响。

5 > 3 && 8 <4 + (a = 5);

false && 8 <4 + 3 // 结果为false，因为AND操作符左侧的运算结果为false，触发短路效应，直接返回false。

5 > 2 || 2 > 4 && 3 > 2
// 结果为true，从左至右依次计算，5 > 2的结果为true，触发OR操作符的短路效应，直接返回OR左侧的值true，右侧表达式被忽略。

1 > 2 || 0 && 3 > 2
// 结果为0，从左至右计算，1 > 2的结果为false，因此计算“false || 0 && 3 > 2”。接着计算“0 && 3 > 2”，由于“>”的优先级高于“&&”，先计算“3 > 2”，结果为true。然后计算“0 && true”，结果为0。最后计算“false || 0”，结果为0。

var a = 5;
0 || 6 > a++ && 50 > (3 + 2) * 2
console.log(a); // 结果为6
// 从左至右计算，遇到OR操作符，左侧为0，继续计算右侧“6 > a++ && 50 > (3 + 2) * 2”。由于“a++”是后缀自增，先使用a的当前值5，然后自增。计算“6 > 5”结果为true，继续计算“50 > (3 + 2) * 2”。由于圆括号“()”优先级最高，先计算“3 + 2”，结果为5，再计算“5 * 2”，结果为10。最后计算“50 > 10”，结果为true。因此，整个表达式的结果为true，a的值在表达式执行完毕后变为6。

var x = 5;
var y = 3 + 2 * x++;
alert(y + " | " + x); // y的值为13，x的值为6
// 计算过程中遇到的运算符有“+”、“*”和后缀自增“++”。根据优先级，“*”的优先级高于“+”，因此先计算“2 * x”，结果为10（x的当前值为5）。然后计算“3 + 10”，结果为13，赋值给y。最后x自增，变为6。