有時(shí)候，我們會(huì)在jQuery框架或者其他js插件中發(fā)現(xiàn)里面有很多 “ && ” 和 “ || ”，那么這兩個(gè)標(biāo)識(shí)到底是什么含義？怎么使用？我覺(jué)得還是有必要稍微深究一下。

一、原理:

&& 操作符特點(diǎn)：邏輯運(yùn)算表達(dá)式中只要一個(gè)是false就取false的值，都是true取后面，都是false取前面。

|| 操作符特點(diǎn)：邏輯運(yùn)算表達(dá)式中只要一個(gè)是true就取true的值，都是true取前面，都是false取后面。

在js邏輯運(yùn)算中，我們知道 0、""、null、false、undefined、NaN 這五種數(shù)據(jù)類(lèi)型是會(huì)被判斷為false的。那么，我們?cè)谶M(jìn)行js的邏輯運(yùn)算過(guò)程中，就可以根據(jù)上面的原理以及這五種數(shù)據(jù)類(lèi)型來(lái)進(jìn)行相應(yīng)的判斷處理。直接上DEMO...

二、原始DEMO：

先亮出問(wèn)題?。?！

如果我們要根據(jù)學(xué)生的成績(jī)來(lái)判斷等級(jí)，比如：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("當(dāng)前學(xué)生等級(jí)為：" + grade); // 當(dāng)前學(xué)生等級(jí)為：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("當(dāng)前學(xué)生等級(jí)為：" + grade); // 當(dāng)前學(xué)生等級(jí)為：A

三、優(yōu)化DEMO：

其實(shí)，如果我們用 “ && ” 和 “ || ” 的話(huà)，大可不必如上面那么麻煩。

var score = 90;
var grade = (score===90 && 'A') || (score===80 && 'B') || (score===60 && 'C') || 'D';
console.log("當(dāng)前學(xué)生等級(jí)為：" + grade); // 當(dāng)前學(xué)生等級(jí)為：A

上面代碼可以這么理解：

如果score的值等于90，那么score===90的邏輯表達(dá)式就成立（也即是true），就會(huì)執(zhí)行到后面 'A' 的賦值操作，同時(shí)后面的“||” 邏輯運(yùn)算也可以忽略（因?yàn)椤皘|”運(yùn)算符的特點(diǎn)是前面一旦為true，后面就沒(méi)有執(zhí)行的必要了）。

如果score的值不等于90，那么score===90的邏輯表達(dá)式就不成立（也即是false），根據(jù)“&&”操作符的特點(diǎn)，我們知道“(score===90 && 'A')”這段代碼就不會(huì)執(zhí)行到后面 'A' 的賦值操作，同時(shí)由于“(score===90 && 'A')”這段代碼整體是false，那么根據(jù)“||”的特點(diǎn)，整個(gè)邏輯表達(dá)式會(huì)繼續(xù)往后執(zhí)行。

以此類(lèi)推，如果前面所有的邏輯表達(dá)式都不成立，那么根據(jù)“||”的特點(diǎn)（全部為false就取最后面的），最后的grade賦值就會(huì)是“D”。

我們還可以用JSON形式來(lái)處理上面的邏輯運(yùn)算：

var score = 90;
var grade = {90:"A", 80:"B", 60:"C"}[score] || 'D';
console.log("當(dāng)前學(xué)生等級(jí)為：" + grade); // 當(dāng)前學(xué)生等級(jí)為：A

這里利用了JSON對(duì)象的屬性讀取，當(dāng)“JSON對(duì)象.屬性值”存在的時(shí)候（為true），就會(huì)取得對(duì)應(yīng)屬性的key值（A、B或者C）。當(dāng)score屬性值不存在與JSON對(duì)象中的時(shí)候，就會(huì)執(zhí)行“||”后面的內(nèi)容，也就是把grade賦值為“D”。

當(dāng)然，我們會(huì)發(fā)現(xiàn)上面的數(shù)值比較并沒(méi)有太大的實(shí)用性，比如當(dāng)學(xué)生的成績(jī)?cè)?5分的時(shí)候，等級(jí)也會(huì)變成“D”，這明顯是不合適的?。?！

所以我們可以把上面的代碼再優(yōu)化下，把數(shù)值的 “相等比較” 改成 “范圍區(qū)間比較” 。

var score = 85;
var grade = (score>=90 && 'A') || (score>=80 && 'B') || (score>=60 && 'C') || 'D';
console.log("當(dāng)前學(xué)生等級(jí)為：" + grade); // 當(dāng)前學(xué)生等級(jí)為：B

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論