淺談javascript中的 “ && ” 和 “ || ”
有時候,我們會在jQuery框架或者其他js插件中發(fā)現(xiàn)里面有很多 “ && ” 和 “ || ”,那么這兩個標識到底是什么含義?怎么使用?我覺得還是有必要稍微深究一下。
一、原理:
&& 操作符特點:邏輯運算表達式中只要一個是false就取false的值,都是true取后面,都是false取前面。
|| 操作符特點:邏輯運算表達式中只要一個是true就取true的值,都是true取前面,都是false取后面。
在js邏輯運算中,我們知道 0、""、null、false、undefined、NaN 這五種數(shù)據(jù)類型是會被判斷為false的。那么,我們在進行js的邏輯運算過程中,就可以根據(jù)上面的原理以及這五種數(shù)據(jù)類型來進行相應(yīng)的判斷處理。直接上DEMO...
二、原始DEMO:
先亮出問題?。?!
如果我們要根據(jù)學(xué)生的成績來判斷等級,比如:90分表示A,80分表示B,60分表示C,其他表示D。
那么我們可以這么做:
JS代碼:
var score = 90;
var grade = '';
if(score === 90){
grade = "A";
}else if(score === 80){
grade = "B";
}else if(score === 60){
grade = "C";
}else{
grade = "D";
}
console.log("當前學(xué)生等級為:" + grade); // 當前學(xué)生等級為:A
或者這樣:
var score = 90;
var grade = '';
switch(score){
case 90:
grade = "A";
break;
case 80:
grade = "B";
break;
case 60:
grade = "C";
break;
default:
grade = "D";
break;
};
console.log("當前學(xué)生等級為:" + grade); // 當前學(xué)生等級為:A
三、優(yōu)化DEMO:
其實,如果我們用 “ && ” 和 “ || ” 的話,大可不必如上面那么麻煩。
var score = 90;
var grade = (score===90 && 'A') || (score===80 && 'B') || (score===60 && 'C') || 'D';
console.log("當前學(xué)生等級為:" + grade); // 當前學(xué)生等級為:A
上面代碼可以這么理解:
如果score的值等于90,那么score===90的邏輯表達式就成立(也即是true),就會執(zhí)行到后面 'A' 的賦值操作,同時后面的“||” 邏輯運算也可以忽略(因為“||”運算符的特點是前面一旦為true,后面就沒有執(zhí)行的必要了)。
如果score的值不等于90,那么score===90的邏輯表達式就不成立(也即是false),根據(jù)“&&”操作符的特點,我們知道“(score===90 && 'A')”這段代碼就不會執(zhí)行到后面 'A' 的賦值操作,同時由于“(score===90 && 'A')”這段代碼整體是false,那么根據(jù)“||”的特點,整個邏輯表達式會繼續(xù)往后執(zhí)行。
以此類推,如果前面所有的邏輯表達式都不成立,那么根據(jù)“||”的特點(全部為false就取最后面的),最后的grade賦值就會是“D”。
我們還可以用JSON形式來處理上面的邏輯運算:
var score = 90;
var grade = {90:"A", 80:"B", 60:"C"}[score] || 'D';
console.log("當前學(xué)生等級為:" + grade); // 當前學(xué)生等級為:A
這里利用了JSON對象的屬性讀取,當“JSON對象.屬性值”存在的時候(為true),就會取得對應(yīng)屬性的key值(A、B或者C)。當score屬性值不存在與JSON對象中的時候,就會執(zhí)行“||”后面的內(nèi)容,也就是把grade賦值為“D”。
當然,我們會發(fā)現(xiàn)上面的數(shù)值比較并沒有太大的實用性,比如當學(xué)生的成績在85分的時候,等級也會變成“D”,這明顯是不合適的!??!
所以我們可以把上面的代碼再優(yōu)化下,把數(shù)值的 “相等比較” 改成 “范圍區(qū)間比較” 。
var score = 85;
var grade = (score>=90 && 'A') || (score>=80 && 'B') || (score>=60 && 'C') || 'D';
console.log("當前學(xué)生等級為:" + grade); // 當前學(xué)生等級為:B
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- Javascript中數(shù)組去重與拍平的方法示例
- 理解javascript中的Function.prototype.bind的方法
- JavaScript數(shù)組復(fù)制詳解
- Javascript基礎(chǔ)回顧之(三) js面向?qū)ο?/a>
- Javascript基礎(chǔ)回顧之(一) 類型
- JavaScript基礎(chǔ)之AJAX簡單的小demo
- JavaScript Date 知識淺析
- JavaScript實現(xiàn)時鐘滴答聲效果
- Javascript中 帶名 匿名 箭頭函數(shù)的重要區(qū)別(推薦)
- javascript判斷回文數(shù)詳解及實現(xiàn)代碼
- Javascript中的 “&” 和 “|” 詳解
相關(guān)文章
ESC之ESC.wsf可以實現(xiàn)javascript的代碼壓縮附使用方法
可以對javascript的大小進行壓縮。使javascript的加載速度變快。2007-05-05
Bootstrap每天必學(xué)之折疊(Collapse)插件
Bootstrap每天必學(xué)之折疊(Collapse)插件,折疊插件可以很容易地讓頁面區(qū)域折疊起來,感興趣的小伙伴們可以參考一下2016-04-04
JS在IE和FF下attachEvent,addEventListener學(xué)習(xí)筆記
今天小弄了一下JS事件,主要說一下FF和IE兼容的問題2009-11-11
微信小程序基于slider組件動態(tài)修改標簽透明度的方法示例
這篇文章主要介紹了微信小程序基于slider組件動態(tài)修改標簽透明度的方法,可通過slider組件拖動實現(xiàn)圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下2017-12-12

