"||"与"&&"详解

记录一下"||"与"&&"的详细用法

我们以前在数学上都学习过"||"与"&&"运算符，但是我们只是简单地记住了这两种运算符的表面特征：

"&&"运算符左右两边都为真，则该表达式为真：

if(3 > 2 || 4 > 3) {
        console.log("大猪佩奇");
}//大猪佩奇

"||"运算符左右两边只要有一个为真，则该表达式为真。

if (2 > 1 || 2 > 5) {
	console.log('小猪佩奇');
}//小猪佩奇

那么如果遇到这样的表达式呢

 var a = "小猪佩奇" && "大猪佩奇" && false && 0 && "野猪佩奇" 
 console.log(a);

以上的语句中有多个表达式，有false，还有0，那么a的值到底是多少呢

这就要说一下"&&"与"||"运算符的内部原理了。

"&&"运算符

"&&"运算符会从前到后的遍历表达式，如果遇到true就继续向后走，遇到false或0就将这个表达式返回，将后面的表达式全部忽略；如果都为true就将最后一个表达式返回。

例1

var a = "小猪佩奇" && "大猪佩奇" && 2<3 && true && "野猪佩奇" 
console.log(a);

因为该语句中表达式全部为true，因此会一直向后遍历，将最后一个表达式返回。

例2

var a = "小猪佩奇" && "大猪佩奇" && 2>3 && true && "野猪佩奇" 
console.log(a);

因为该语句中表达式“2>3”为false，因此会将false返回，后面的表达式直接忽略。

例3

var a = "小猪佩奇" && "大猪佩奇" && 0 && 2 > 3 && true && "野猪佩奇" 
console.log(a);

该语句中既有0又有false（2>3），但是0在false前面，因此将0返回，后面的false和表达式都被忽略。

 

"||"运算符

"||"运算符会从前到后的遍历表达式，如果遇到false就继续向后走，遇到true或1就将这个表达式返回，后面的表达式都被忽略；如果表达式都为false就将最后一个表达式返回。

例1

var a = 2 > 3 || 3 > 4 || 4 > 5 || "野猪佩奇"
console.log(a);

因为前面的表达式都为false，"野猪佩奇"表达式为true，因此将其返回。

例2

var a = 2 < 3 || 3 > 4 || 4 > 5 || "野猪佩奇"
console.log(a);

因为前面表达式中"2<3"为真，因此直接将其返回，后面的表达式被短路

例3

var a = 1 || 2 < 3 || 3 > 4 || 4 > 5 || "野猪佩奇"
console.log(a);

因为语句中第一个表达式的值为1，因此直接将1返回，后面的表达式全部被忽略。

var a = 1 > 2 || 2 > 3 || 3 > 4 || 4 > 5 
console.log(a);

以上的表达式全部为false，因此将最后一个表达式返回，返回false。

最后做几个练习题吧，巩固一下

 

• 1 && 0             答案是？？？
• 0 && 1             答案是？？？
• 1 && 2             答案是？？？
• 0 && false       答案是？？？
• 1 || 0                答案是？？？
• 0 || 1                答案是？？？
• 1 || 2                答案是？？？
• 0 || false          答案是？？？

答案在下：

---

---

---

---

---

---

---

---

---

• 0
• 0
• 2
• 0
• 1
• 1
• 1
• false 

不知道小伙伴们做对了没有呢