這篇文章主要介紹了全面解析JavaScript中“&&”和“||”操作符(總結(jié)篇)的相關(guān)資料,需要的朋友可以參考下

1、||（邏輯或）

從字面上來說，只有前后都是false的時候才返回false，否則返回true。

alert(true||false); // true

alert(false||true); // true

alert(true||true); // true

alert(false||false); // false

這個傻子都知道~~

但是，從深層意義上來說的話，卻有另一番天地，試下面代碼

alert(0||1);//1

顯然，我們知道，前面0意味著false,而后面1意味著true,那么上面的結(jié)果應(yīng)該是true,而事實返回的結(jié)果是1。再看下面代碼：

alert(2||1);//2

我們知道，前面2是true,后面1也是true,那返回結(jié)果又是什么呢？測試結(jié)果是2,繼續(xù)看：

alert('a'||1);//'a'

同樣，前面'a'是true，后面1也是true;測試結(jié)果是'a',下面

alert(''||1);//1

由上，我們知道前面”是false,后面1是true,而返回結(jié)果是1。再看下面

alert('a'||0);//'a'

前面'a'是true，而后面0是false,返回結(jié)果是'a'，繼續(xù)下面

alert(''||0);//0

前面”是false,后面0同樣是false,返回結(jié)果是0

alert(0||'');//''

前面0是false，后面”是false，返回結(jié)果是”

這就意味

1、只要“||”前面為false,不管“||”后面是true還是false，都返回“||”后面的值。

2、只要“||”前面為true,不管“||”后面是true還是false，都返回“||”前面的值。

我稱這種為短路原理： 知道了前面第一個的結(jié)果就知道后的輸出，如果為第一個為：true，則取第一個的值，如果第一個為false，則取第二個的值。

js必須牢記的6個蛋蛋： 請你一定要記?。涸趈s邏輯運算中，0、”“、null、false、undefined、NaN都會判為false，其他都為true（好像沒有遺漏了吧，請各位確認下）。這個一定要記住，不然應(yīng)用||和&&就會出現(xiàn)問題。

這里順便提下：經(jīng)常有人問我，看到很多代碼if(!!attr)，為什么不直接寫if(attr)；

其實這是一種更嚴謹?shù)膶懛ǎ?/P>

請測試 typeof 5和typeof !!5的區(qū)別。!!的作用是把一個其他類型的變量轉(zhuǎn)成的bool類型。

2.&&（邏輯與）

從字面上來說，只有前后都是true的時候才返回true，否則返回false。

alert(true&&false); // false

alert(true&&true); // true

alert(false&&false); // false

alert(false&&true); // false

然后，根據(jù)上面經(jīng)驗，我們看看“&&”號前后，不單單是布爾類型的情況。

alert(''&&1);//''

結(jié)是返回”,“&&”前面”是false,后面是1是true。

alert(''&&0);//''

結(jié)是返回”,“&&”前面”是false,后面是0也是false。

alert('a'&&1);//1

結(jié)是返回1,“&&”前面”a是true,后面是1也是true。

alert('a'&&0);//0

結(jié)是返回0,“&&”前面”a是true,后面是0是false。

alert('a'&&'');//''

結(jié)是返回”,“&&”前面”a是true,后面是”是false。

alert(0&&'a');//0

結(jié)是返回0,“&&”前面”0是false,后面是'a'是true。

alert(0&&''); //0

結(jié)是返回0,“&&”前面”0是false,后面是”也是false。

短路原理

1、只要“&&”前面是false，無論“&&”后面是true還是false，結(jié)果都將返“&&”前面的值;

2、只要“&&”前面是true，無論“&&”后面是true還是false，結(jié)果都將返“&&”后面的值;

3.在開發(fā)中的應(yīng)用

下面三段代碼等價：

a=a||"defaultValue";

if(!a){

a="defaultValue";

}

if(a==null||a==""||a==undefined){

a="defaultValue";

}

你愿意用哪一個呢？

2、 像var Yahoo = Yahoo || {};這種是非常廣泛應(yīng)用的。 獲得初值的方式是不是很優(yōu)雅？比if。。。。else…好很多，比？：也好不少。

3、 callback&&callback()

在回調(diào)中，經(jīng)常這么寫，更嚴謹，先判斷 callback 是不是存在，如果存在就執(zhí)行，這樣寫的目的是為了防止報錯

如果直接寫 callback(); 當callback不存在時代碼就會報錯。

4、綜合實例

需求如圖：

這里寫圖片描述

假設(shè)對成長速度顯示規(guī)定如下：

成長速度為5顯示1個箭頭；

成長速度為10顯示2個箭頭；

成長速度為12顯示3個箭頭；

成長速度為15顯示4個箭頭；

其他都顯示都顯示0各箭頭。

用代碼怎么實現(xiàn)？

差一點的if，else：

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：

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實現(xiàn)起來也很麻煩了。

那么你有沒有想過用一行就代碼實現(xiàn)呢？

ok，讓我們來看看js強大的表現(xiàn)力吧：

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

更強大的，也更優(yōu)的：

var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;

第二個需求：

var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

以上所述是小編給大家介紹的全面解析JavaScript中“&&”和“||”操作符(總結(jié)篇)，希望對大家有所幫助