全面解析JavaScript中“&&”和“||”操作符(總結(jié)篇)
1、||(邏輯或),
從字面上來說,只有前后都是false的時(shí)候才返回false,否則返回true。
alert(true||false); // true alert(false||true); // true alert(true||true); // true alert(false||false); // false
這個(gè)傻子都知道~~
但是,從深層意義上來說的話,卻有另一番天地,試下面代碼
alert(0||1);//1
顯然,我們知道,前面0意味著false,而后面1意味著true,那么上面的結(jié)果應(yīng)該是true,而事實(shí)返回的結(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,都返回“||”前面的值。
我稱這種為短路原理: 知道了前面第一個(gè)的結(jié)果就知道后的輸出,如果為第一個(gè)為:true,則取第一個(gè)的值,如果第一個(gè)為false,則取第二個(gè)的值。
js必須牢記的6個(gè)蛋蛋: 請你一定要記?。涸趈s邏輯運(yùn)算中,0、”“、null、false、undefined、NaN都會判為false,其他都為true(好像沒有遺漏了吧,請各位確認(rèn)下)。這個(gè)一定要記住,不然應(yīng)用||和&&就會出現(xiàn)問題。
這里順便提下:經(jīng)常有人問我,看到很多代碼if(!!attr),為什么不直接寫if(attr);
其實(shí)這是一種更嚴(yán)謹(jǐn)?shù)膶懛ǎ?
請測試 typeof 5和typeof !!5的區(qū)別。!!的作用是把一個(gè)其他類型的變量轉(zhuǎn)成的bool類型。
2.&&(邏輯與)
從字面上來說,只有前后都是true的時(shí)候才返回true,否則返回false。
alert(true&&false); // false alert(true&&true); // true alert(false&&false); // false alert(false&&true); // false
然后,根據(jù)上面經(jīng)驗(yàn),我們看看“&&”號前后,不單單是布爾類型的情況。
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)用
下面三段代碼等價(jià):
a=a||"defaultValue"; if(!a){ a="defaultValue"; } if(a==null||a==""||a==undefined){ a="defaultValue"; }
你愿意用哪一個(gè)呢?
2、 像var Yahoo = Yahoo || {};這種是非常廣泛應(yīng)用的。 獲得初值的方式是不是很優(yōu)雅?比if。。。。else…好很多,比?:也好不少。
3、 callback&&callback()
在回調(diào)中,經(jīng)常這么寫,更嚴(yán)謹(jǐn),先判斷 callback 是不是存在,如果存在就執(zhí)行,這樣寫的目的是為了防止報(bào)錯(cuò)
如果直接寫 callback(); 當(dāng)callback不存在時(shí)代碼就會報(bào)錯(cuò)。
4、綜合實(shí)例
需求如圖:
這里寫圖片描述
假設(shè)對成長速度顯示規(guī)定如下:
成長速度為5顯示1個(gè)箭頭;
成長速度為10顯示2個(gè)箭頭;
成長速度為12顯示3個(gè)箭頭;
成長速度為15顯示4個(gè)箭頭;
其他都顯示都顯示0各箭頭。
用代碼怎么實(shí)現(xiàn)?
差一點(diǎ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個(gè)箭頭;
成長速度為>10顯示3個(gè)箭頭;
成長速度為>5顯示2個(gè)箭頭;
成長速度為>0顯示1個(gè)箭頭;
成長速度為<=0顯示0個(gè)箭頭。
那么用switch實(shí)現(xiàn)起來也很麻煩了。
那么你有沒有想過用一行就代碼實(shí)現(xiàn)呢?
ok,讓我們來看看js強(qiáng)大的表現(xiàn)力吧:
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
更強(qiáng)大的,也更優(yōu)的:
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;
第二個(gè)需求:
var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
以上所述是小編給大家介紹的全面解析JavaScript中“&&”和“||”操作符(總結(jié)篇),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
基于javascript代碼檢測訪問網(wǎng)頁的瀏覽器呈現(xiàn)引擎、平臺、Windows操作系統(tǒng)、移動(dòng)設(shè)備和游戲系統(tǒng)
這篇文章主要介紹了基于javascript代碼檢測訪問網(wǎng)頁的瀏覽器呈現(xiàn)引擎、平臺、Windows操作系統(tǒng)、移動(dòng)設(shè)備和游戲系統(tǒng) 的相關(guān)資料,需要的朋友可以參考下2015-12-12JavaScript統(tǒng)計(jì)字符串中每個(gè)字符出現(xiàn)次數(shù)完整實(shí)例
這篇文章主要介紹了JavaScript統(tǒng)計(jì)字符串中每個(gè)字符出現(xiàn)次數(shù)的方法,以完整實(shí)例形式分析了JavaScript針對字符串中字符的遍歷操作相關(guān)技巧,需要的朋友可以參考下2016-01-01js判斷是否為數(shù)組的函數(shù): isArray()
像 Ajaxian,StackOverflow 等,搜一下,到處都在討論 isArray() 的實(shí)現(xiàn)。對于一切都是對象的 JavaScript 來說,確實(shí)有點(diǎn)麻煩2011-10-10JS實(shí)現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)
在一些網(wǎng)站上我們經(jīng)常看到交互性很強(qiáng)的功能。一些用戶資料可以直接雙擊出現(xiàn)文本框,并在此輸入新的資料即可修改,無需再按確定按鈕等。怎么實(shí)現(xiàn)的呢?今天小編給大家分享JS實(shí)現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài),需要的的朋友參考下2017-03-03使用JavaScript實(shí)現(xiàn)隨機(jī)顏色生成器
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript+CSS實(shí)現(xiàn)一個(gè)隨機(jī)顏色生成器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手嘗試一下2022-08-08