JavaScript中“&&”和“||”操作符

||(邏輯或)

從字面上來說,只有前后都是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é)果應該是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個蛋蛋: 請你一定要記住:在js邏輯運算中涣觉,0痴荐、”“、null官册、false生兆、undefined、NaN都會判為false膝宁,其他都為true(好像沒有遺漏了吧鸦难,請各位確認下)。這個一定要記住员淫,不然應用||和&&就會出現(xiàn)問題合蔽。
這里順便提下:經(jīng)常有人問我,看到很多代碼if(!!attr)介返,為什么不直接寫if(attr)拴事;
其實這是一種更嚴謹?shù)膶懛ǎ?br> 請測試 typeof 5和typeof !!5的區(qū)別。!!的作用是把一個其他類型的變量轉(zhuǎn)成的bool類型圣蝎。

&&(邏輯與)

從字面上來說刃宵,只有前后都是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é)果都將返“&&”后面的值;

在開發(fā)中的應用

1.下面三段代碼等價:

a=a||"defaultValue"; 

if(!a){ 
a="defaultValue"; 
} 

if(a==null||a==""||a==undefined){ 
a="defaultValue"; 
}

你愿意用哪一個呢嘴高?

2.像var Yahoo = Yahoo || {};這種是非常廣泛應用的。 獲得初值的方式是不是很優(yōu)雅辉巡?比if...else…好很多谎砾,比aaa惑灵?bbb:ccc也好不少。
3.callback&&callback()
在回調(diào)中套啤,經(jīng)常這么寫,更嚴謹随常,先判斷 callback 是不是存在潜沦,如果存在就執(zhí)行,這樣寫的目的是為了防止報錯
如果直接寫 callback(); 當callback不存在時代碼就會報錯绪氛。

4唆鸡、綜合實例
需求如圖:
這里寫圖片描述
假設對成長速度顯示規(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)||(add_step<=0&& 0 );

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末昙读,一起剝皮案震驚了整個濱河市召调,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖唠叛,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件只嚣,死亡現(xiàn)場離奇詭異,居然都是意外死亡艺沼,警方通過查閱死者的電腦和手機册舞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來障般,“玉大人调鲸,你說我怎么就攤上這事⊥斓矗” “怎么了线得?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長徐伐。 經(jīng)常有香客問我贯钩,道長,這世上最難降的妖魔是什么办素? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任角雷,我火速辦了婚禮,結(jié)果婚禮上性穿,老公的妹妹穿的比我還像新娘勺三。我一直安慰自己,他們只是感情好需曾,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布吗坚。 她就那樣靜靜地躺著,像睡著了一般呆万。 火紅的嫁衣襯著肌膚如雪商源。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天谋减,我揣著相機與錄音牡彻,去河邊找鬼。 笑死出爹,一個胖子當著我的面吹牛庄吼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播严就,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼总寻,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了梢为?” 一聲冷哼從身側(cè)響起渐行,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤技矮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后殊轴,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡袒炉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年旁理,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片我磁。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡孽文,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出夺艰,到底是詐尸還是另有隱情芋哭,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布郁副,位于F島的核電站减牺,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏存谎。R本人自食惡果不足惜拔疚,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望既荚。 院中可真熱鬧稚失,春花似錦、人聲如沸恰聘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晴叨。三九已至凿宾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間兼蕊,已是汗流浹背菌湃。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留遍略,地道東北人惧所。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像绪杏,于是被迫代替她去往敵國和親下愈。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 背景 一年多以前我在知乎上答了有關LeetCode的問題, 分享了一些自己做題目的經(jīng)驗蕾久。 張土汪:刷leetcod...
    土汪閱讀 12,744評論 0 33
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理势似,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,654評論 18 139
  • 單例模式 適用場景:可能會在場景中使用到對象履因,但只有一個實例障簿,加載時并不主動創(chuàng)建,需要時才創(chuàng)建 最常見的單例模式栅迄,...
    Obeing閱讀 2,065評論 1 10
  • 1. Java基礎部分 基礎部分的順序:基本語法站故,類相關的語法,內(nèi)部類的語法毅舆,繼承相關的語法西篓,異常的語法,線程的語...
    子非魚_t_閱讀 31,625評論 18 399
  • 曾聽過一個故事吮成,一家人在夫妻結(jié)婚紀念日時,去一個樹林野餐辜梳,吃完的時候在千年古樹下拍了一張全家福赁豆。照片沖洗出來時,全...
    不想聽故事的人閱讀 19,405評論 0 3