JavaScript中&&与||运算符的短路机制及优先级详解

压缩代码中的逻辑运算符示例

在分析一段由YUI Compressor压缩后的JavaScript代码时，我们可能会遇到令人困惑的写法。

userNum && (ind += index, ind >= userNum && (ind -= userNum), ind < 0 && (ind === -2 && (ind = -1), ind += userNum), selLi.removeClass("on"), $(selLi[ind]).addClass("on"));

这种紧凑的写法确实增加了阅读难度，通常只有少数人能立即理解。为了澄清其逻辑，我们需要对其进行“反编译”或详细解析。

逻辑与（&&）运算符的短路机制

首先关注逻辑与运算符（&&）。

理解该运算符的关键在于掌握其短路求值特性，我们可以通过一个简单示例来观察：

1 var a = 1 && 2 && 3; // 结果为 3

2 var b = 0 && 1 && 2; // 结果为 0

3 var c = 1 && 0 && 2; // 结果为 0

4 alert(a), alert(b), alert(c);

上述代码的执行结果分别为3、0和0。这种写法在if语句中较为常见。逻辑与（&&）运算遵循“遇到假值即返回”的原则，这与逻辑或（||）的行为相反。

具体而言，对于表达式 a && b：如果 a 为真值（truthy），则直接返回 b 的值，无论 b 是真值还是假值；如果 a 为假值（falsy），则直接返回 a 的值。在第一个示例 var a = 1 && 2 && 3 中，1 为真，返回 2；接着 2 为真，返回 3。

理解了逻辑与（&&）的基本行为后，我们可以重新审视之前提到的YUI Compressor压缩代码，并将其还原为更易读的格式。

if(userNum){
	ind+=index;
	if(ind>=userNum){
	 	ind-=userNum;
	}
     if(ind < 0){
		if(ind === -2){
			ind = -1;
		}
  		ind += userNum;
	}
	selLi.removeClass("on");
	$(selLi[ind]).addClass("on");
  }

坦白说，由于代码嵌套较深，即使有同事协助，解析这段代码也花费了相当长的时间。

逻辑或（||）运算符的短路机制

接下来探讨逻辑或运算符（||）。

通过以下示例观察逻辑或（||）的运算行为：

1 var a = 0 || 1 || 2; // 结果为 1

2 var b = 1 || 0 || 3; // 结果为 1

3 alert(a), alert(b);

逻辑或（||）运算遵循“遇到真值即返回”的原则。对于表达式 a || b：如果 a 为假值，则直接返回 b 的值，无论 b 是真值还是假值；如果 a 为真值，则直接返回 a 的值，不再继续执行后续操作。

混合运算中的优先级规则

当&&（逻辑与）和||（逻辑或）混合使用时，必须注意它们的优先级差异。

逻辑与（&&）的优先级高于逻辑或（||）。

考虑表达式 return a && b || c，

其返回值取决于 a 的状态。如果 a 为假值，则整个表达式肯定返回 c；如果 b 和 c 均为真值，则根据 a 的真假决定返回 b 还是 c。具体而言，若 a 为假值，返回 c；若 a 为真值，返回 b。

再考虑表达式 return a || b && c

由于优先级关系，该表达式等价于先计算 b && c，然后再与 a 进行或运算。如果 a 为真值，则直接返回 a，忽略 b 和 c 的结果；如果 a 为假值，则进一步判断：若 b 为假值，返回 b；若 b 为真值，则返回 c。

1 var a = 3 && 0 || 2; // 结果为 2

3 var b = 3 || 0 && 2; // 结果为 3

5 var c = 0 || 2 && 3; // 结果为 3

6 alert(a), alert(b), alert(c);

JavaScript运算符优先级总览

此外，附上JavaScript运算符的完整优先级列表（从高到低排列）。

以上关于JavaScript中&&和||运算符及其优先级的解析即为全部内容，希望能为读者提供有价值的参考。