js 與或運(yùn)算符 || && 妙用
更新時(shí)間:2009年12月09日 22:43:27 作者:
js 與或運(yùn)算符 || && 妙用,可用于精簡代碼,降低程序的可讀性。
首先出個(gè)題:

如圖:
假設(shè)對成長速度顯示規(guī)定如下:
成長速度為5顯示1個(gè)箭頭;
成長速度為10顯示2個(gè)箭頭;
成長速度為12顯示3個(gè)箭頭;
成長速度為15顯示4個(gè)箭頭;
其他都顯示都顯示0各箭頭。
用代碼怎么實(shí)現(xiàn)?
差一點(diǎn)的if,else:
Js代碼
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:
Js代碼
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)力吧:
Js代碼
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
更強(qiáng)大的,也更優(yōu)的:
Js代碼
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;
第二個(gè)需求:
Js代碼
var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
首先我們來梳理一下一個(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類型。
下面主要討論下邏輯運(yùn)算符&&和||。
幾乎所有語言中||和&&都遵循“短路”原理,如&&中第一個(gè)表達(dá)式為假就不會去處理第二個(gè)表達(dá)式,而||正好相反。
js也遵循上述原則。但是比較有意思的是它們返回的值。
代碼:var attr = true && 4 && “aaa”;
那么運(yùn)行的結(jié)果attr就不是簡單的true或這false,而是”aaa”
再來看看||:
代碼:var attr = attr || “”;這個(gè)運(yùn)算經(jīng)常用來判斷一個(gè)變量是否已定義,如果沒有定義就給他一個(gè)初始值,這在給函數(shù)的參數(shù)定義一個(gè)默認(rèn)值的時(shí)候比較有用。因?yàn)閖s不像php可以直接在型參數(shù)上定義func($attr=5)。再次提醒你記住上面的原則:如果實(shí)參需要是0、""、null、false、undefined、NaN的時(shí)候也會當(dāng)false來處理。
if(a >=5){
alert("你好");
}
可以寫成:
a >= 5 && alert("你好");
這樣只需一行代碼就搞定。但是需要注意的一點(diǎn)就是:js中||和&&的特性幫我們精簡了代碼的同時(shí),也帶來了代碼可讀性的降低。這就需要我們自己來權(quán)衡了。
一方面精簡js代碼,能實(shí)質(zhì)性的減少網(wǎng)絡(luò)流量,尤其是大量應(yīng)用的js公用庫。個(gè)人比較推薦的做法是:如果是相對復(fù)雜的應(yīng)用,請適當(dāng)?shù)貙懸恍┳⑨尅_@個(gè)和正在表達(dá)式一樣,能夠精簡代碼,但是可讀性會降低,對讀代碼的人要求會高些,最好的辦法就是寫注釋。
我們可以不使用這些技巧,但是我們一定要能看懂,因?yàn)檫@些技巧已經(jīng)廣泛應(yīng)用,尤其是像JQuery等js框里的代碼,不理解這些你就很難看懂別人的代碼。
像var Yahoo = Yahoo || {};這種是非常廣泛應(yīng)用的。
ok,最后讓我們來看一段jQuery中的代碼吧:
Js代碼
var wrap =
// option or optgroup
!tags.indexOf("<opt") &&
[ 1, "<select multiple='multiple'>", "</select>" ] ||
!tags.indexOf("<leg") &&
[ 1, "<fieldset>", "</fieldset>" ] ||
tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
[ 1, "<table>", "</table>" ] ||
!tags.indexOf("<tr") &&
[ 2, "<table><tbody>", "</tbody></table>" ] ||
// <thead> matched above
(!tags.indexOf("<td") || !tags.indexOf("<th")) &&
[ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] ||
!tags.indexOf("<col") &&
[ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] ||
// IE can't serialize <link> and <script> tags normally
!jQuery.support.htmlSerialize &&
[ 1, "div<div>", "</div>" ] ||
[ 0, "", "" ];
// Go to html and back, then peel off extra wrappers
div.innerHTML = wrap[1] + elem + wrap[2];
// Move to the right depth
while ( wrap[0]-- )
div = div.lastChild;
這段代碼是作者用來處理 $(html) 時(shí),有些標(biāo)簽必須要約束的,如<option>必須在<select></select>之內(nèi)的。
可能你也發(fā)現(xiàn)了作者還有一個(gè)很巧的地方就是 !tags.indexOf("<opt") ,作者很巧很簡單的就實(shí)現(xiàn)了startWith的功能了,沒有一點(diǎn)多余的代碼。jquery源代碼中還有很多如此精妙的代碼,大家可以去學(xué)習(xí)學(xué)習(xí)。

如圖:
假設(shè)對成長速度顯示規(guī)定如下:
成長速度為5顯示1個(gè)箭頭;
成長速度為10顯示2個(gè)箭頭;
成長速度為12顯示3個(gè)箭頭;
成長速度為15顯示4個(gè)箭頭;
其他都顯示都顯示0各箭頭。
用代碼怎么實(shí)現(xiàn)?
差一點(diǎn)的if,else:
Js代碼
復(fù)制代碼 代碼如下:
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:
Js代碼
復(fù)制代碼 代碼如下:
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)力吧:
Js代碼
復(fù)制代碼 代碼如下:
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
更強(qiáng)大的,也更優(yōu)的:
Js代碼
復(fù)制代碼 代碼如下:
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;
第二個(gè)需求:
Js代碼
復(fù)制代碼 代碼如下:
var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
首先我們來梳理一下一個(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類型。
下面主要討論下邏輯運(yùn)算符&&和||。
幾乎所有語言中||和&&都遵循“短路”原理,如&&中第一個(gè)表達(dá)式為假就不會去處理第二個(gè)表達(dá)式,而||正好相反。
js也遵循上述原則。但是比較有意思的是它們返回的值。
代碼:var attr = true && 4 && “aaa”;
那么運(yùn)行的結(jié)果attr就不是簡單的true或這false,而是”aaa”
再來看看||:
代碼:var attr = attr || “”;這個(gè)運(yùn)算經(jīng)常用來判斷一個(gè)變量是否已定義,如果沒有定義就給他一個(gè)初始值,這在給函數(shù)的參數(shù)定義一個(gè)默認(rèn)值的時(shí)候比較有用。因?yàn)閖s不像php可以直接在型參數(shù)上定義func($attr=5)。再次提醒你記住上面的原則:如果實(shí)參需要是0、""、null、false、undefined、NaN的時(shí)候也會當(dāng)false來處理。
if(a >=5){
alert("你好");
}
可以寫成:
a >= 5 && alert("你好");
這樣只需一行代碼就搞定。但是需要注意的一點(diǎn)就是:js中||和&&的特性幫我們精簡了代碼的同時(shí),也帶來了代碼可讀性的降低。這就需要我們自己來權(quán)衡了。
一方面精簡js代碼,能實(shí)質(zhì)性的減少網(wǎng)絡(luò)流量,尤其是大量應(yīng)用的js公用庫。個(gè)人比較推薦的做法是:如果是相對復(fù)雜的應(yīng)用,請適當(dāng)?shù)貙懸恍┳⑨尅_@個(gè)和正在表達(dá)式一樣,能夠精簡代碼,但是可讀性會降低,對讀代碼的人要求會高些,最好的辦法就是寫注釋。
我們可以不使用這些技巧,但是我們一定要能看懂,因?yàn)檫@些技巧已經(jīng)廣泛應(yīng)用,尤其是像JQuery等js框里的代碼,不理解這些你就很難看懂別人的代碼。
像var Yahoo = Yahoo || {};這種是非常廣泛應(yīng)用的。
ok,最后讓我們來看一段jQuery中的代碼吧:
Js代碼
復(fù)制代碼 代碼如下:
var wrap =
// option or optgroup
!tags.indexOf("<opt") &&
[ 1, "<select multiple='multiple'>", "</select>" ] ||
!tags.indexOf("<leg") &&
[ 1, "<fieldset>", "</fieldset>" ] ||
tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
[ 1, "<table>", "</table>" ] ||
!tags.indexOf("<tr") &&
[ 2, "<table><tbody>", "</tbody></table>" ] ||
// <thead> matched above
(!tags.indexOf("<td") || !tags.indexOf("<th")) &&
[ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] ||
!tags.indexOf("<col") &&
[ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] ||
// IE can't serialize <link> and <script> tags normally
!jQuery.support.htmlSerialize &&
[ 1, "div<div>", "</div>" ] ||
[ 0, "", "" ];
// Go to html and back, then peel off extra wrappers
div.innerHTML = wrap[1] + elem + wrap[2];
// Move to the right depth
while ( wrap[0]-- )
div = div.lastChild;
這段代碼是作者用來處理 $(html) 時(shí),有些標(biāo)簽必須要約束的,如<option>必須在<select></select>之內(nèi)的。
可能你也發(fā)現(xiàn)了作者還有一個(gè)很巧的地方就是 !tags.indexOf("<opt") ,作者很巧很簡單的就實(shí)現(xiàn)了startWith的功能了,沒有一點(diǎn)多余的代碼。jquery源代碼中還有很多如此精妙的代碼,大家可以去學(xué)習(xí)學(xué)習(xí)。
您可能感興趣的文章:
- js中的 || 與 && 運(yùn)算符詳解
- javascript三元運(yùn)算符用法實(shí)例
- javascript typeof的用法與typeof運(yùn)算符介紹[詳細(xì)]
- Javascript 按位取反運(yùn)算符 (~)
- JS按位非(~)運(yùn)算符與~~運(yùn)算符的理解分析
- JS中三目運(yùn)算符和if else的區(qū)別分析與示例
- 詳解js運(yùn)算符單豎杠“|”與“||”的用法和作用介紹
- 教你JS中的運(yùn)算符乘方、開方及變量格式轉(zhuǎn)換
- Javascript 按位左移運(yùn)算符使用介紹(<<)
- 一起盤點(diǎn)JavaScript中一些強(qiáng)大的運(yùn)算符
相關(guān)文章
JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過顯示大圖標(biāo)功能,涉及javascript鼠標(biāo)事件及頁面元素遍歷并修改屬性的技巧,需要的朋友可以參考下2015-08-08
微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解
這篇文章主要介紹了微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家,讓大家掌握這部分內(nèi)容,需要的朋友可以參考下2017-09-09
JS中超越現(xiàn)實(shí)的匿名函數(shù)用法實(shí)例分析
這篇文章主要介紹了JS中超越現(xiàn)實(shí)的匿名函數(shù)用法,結(jié)合實(shí)例形式分析了javascript匿名函數(shù)定義、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
JavaScript 語句之常用 for 循環(huán)詳解
這篇文章主要介紹了JavaScript 語句之常用 for 循環(huán),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03

