1、||（邏輯或）,
從字面上來說，只有前后都是false的時候才返回false，否則返回true。
|
1
2
3
4
|
alert(
true
||
false
);
// true
alert(
false
||
true
);
// true
alert(
true
||
true
);
// true
alert(
false
||
false
);
// false
|
這個傻子都知道~~
但是，從深層意義上來說的話，卻有另一番天地，試下面代碼
|
1
|
alert(0||1);
//1
|
顯然，我們知道，前面0意味着false,而后面1意味着true,那么上面的結果應該是true,而事實返回的結果是1。再看下面代碼：
|
1
|
alert(2||1);
//2
|
我們知道，前面2是true,后面1也是true,那返回結果又是什么呢？測試結果是2,繼續看：
|
1
|
alert(
'a'
||1);
//'a'
|
同樣，前面'a'是true，后面1也是true;測試結果是'a',下面
|
1
|
alert(
''
||1);
//1
|
由上，我們知道前面”是false,后面1是true,而返回結果是1。再看下面
|
1
|
alert(
'a'
||0);
//'a'
|
前面'a'是true，而后面0是false,返回結果是'a'，繼續下面
|
1
|
alert(
''
||0);
//0
|
前面”是false,后面0同樣是false,返回結果是0
|
1
|
alert(0||
''
);
//''
|
前面0是false，后面”是false，返回結果是”
這就意味
1、只要“||”前面為false,不管“||”后面是true還是false，都返回“||”后面的值。
2、只要“||”前面為true,不管“||”后面是true還是false，都返回“||”前面的值。
我稱這種為短路原理： 知道了前面第一個的結果就知道后的輸出，如果為第一個為：true，則取第一個的值，如果第一個為false，則取第二個的值。
js必須牢記的6個蛋蛋： 請你一定要記住：在js邏輯運算中，0、”“、null、false、undefined、NaN都會判為false，其他都為true（好像沒有遺漏了吧，請各位確認下）。這個一定要記住，不然應用||和&&就會出現問題。
這里順便提下：經常有人問我，看到很多代碼if(!!attr)，為什么不直接寫if(attr)；
其實這是一種更嚴謹的寫法：
請測試 typeof 5和typeof !!5的區別。!!的作用是把一個其他類型的變量轉成的bool類型。
2.&&（邏輯與）
從字面上來說，只有前后都是true的時候才返回true，否則返回false。
|
1
2
3
4
|
alert(
true
&&
false
);
// false
alert(
true
&&
true
);
// true
alert(
false
&&
false
);
// false
alert(
false
&&
true
);
// false
|
然后，根據上面經驗，我們看看“&&”號前后，不單單是布爾類型的情況。
|
1
|
alert(
''
&&1);
//''
|
結是返回”,“&&”前面”是false,后面是1是true。
|
1
|
alert(
''
&&0);
//''
|
結是返回”,“&&”前面”是false,后面是0也是false。
|
1
|
alert(
'a'
&&1);
//1
|
結是返回1,“&&”前面”a是true,后面是1也是true。
|
1
|
alert(
'a'
&&0);
//0
|
結是返回0,“&&”前面”a是true,后面是0是false。
|
1
|
alert(
'a'
&&
''
);
//''
|
結是返回”,“&&”前面”a是true,后面是”是false。
|
1
|
alert(0&&
'a'
);
//0
|
結是返回0,“&&”前面”0是false,后面是'a'是true。
|
1
|
alert(0&&
''
);
//0
|
結是返回0,“&&”前面”0是false,后面是”也是false。
短路原理
1、只要“&&”前面是false，無論“&&”后面是true還是false，結果都將返“&&”前面的值;
2、只要“&&”前面是true，無論“&&”后面是true還是false，結果都將返“&&”后面的值;
3.在開發中的應用
下面三段代碼等價：
|
1
2
3
4
5
6
7
|
a=a||
"defaultValue"
;
if
(!a){
a=
"defaultValue"
;
}
if
(a==
null
||a==
""
||a==undefined){
a=
"defaultValue"
;
}
|
你願意用哪一個呢？
2、 像var Yahoo = Yahoo || {};這種是非常廣泛應用的。 獲得初值的方式是不是很優雅？比if。。。。else…好很多，比？：也好不少。
3、 callback&&callback()
在回調中，經常這么寫，更嚴謹，先判斷 callback 是不是存在，如果存在就執行，這樣寫的目的是為了防止報錯
如果直接寫 callback(); 當callback不存在時代碼就會報錯。
4、綜合實例
需求如圖：
這里寫圖片描述
假設對成長速度顯示規定如下：
成長速度為5顯示1個箭頭；
成長速度為10顯示2個箭頭；
成長速度為12顯示3個箭頭；
成長速度為15顯示4個箭頭；
其他都顯示都顯示0各箭頭。
用代碼怎么實現？
差一點的if，else：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var
add_level = 0;
if
(add_step == 5){
add_level = 1;
}
else
if
(add_step == 10){
add_level = 2;
}
else
if
(add_step == 12){
add_level = 3;
}
else
if
(add_step == 15){
add_level = 4;
}
else
{
add_level = 0;
}
|
稍好些的switch：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
add_level = 0;
switch
(add_step){
case
5 : add_level = 1;
break
;
case
10 : add_level = 2;
break
;
case
12 : add_level = 3;
break
;
case
15 : add_level = 4;
break
;
default
: add_level = 0;
break
;
}
|
如果需求改成：
成長速度為>12顯示4個箭頭；
成長速度為>10顯示3個箭頭；
成長速度為>5顯示2個箭頭；
成長速度為>0顯示1個箭頭；
成長速度為<=0顯示0個箭頭。
那么用switch實現起來也很麻煩了。
那么你有沒有想過用一行就代碼實現呢？
ok，讓我們來看看js強大的表現力吧：
|
1
|
var
add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
|
更強大的，也更優的：
|
1
|
var
add_level={
'5'
:1,
'10'
:2,
'12'
:3,
'15'
:4}[add_step] || 0;
|
第二個需求：
|
1
|
var
add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
|
以上所述是小編給大家介紹的全面解析JavaScript中“&&”和“||”操作符(總結篇)，希望對大家有所幫助