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

一、原理:

&& 操作符特點：邏輯運算表達式中只要一個是false就取false的值，都是true取后面，都是false取前面。

|| 操作符特點：邏輯運算表達式中只要一個是true就取true的值，都是true取前面，都是false取后面。

在js邏輯運算中，我們知道 0、""、null、false、undefined、NaN 這五種數據類型是會被判斷為false的。那么，我們在進行js的邏輯運算過程中，就可以根據上面的原理以及這五種數據類型來進行相應的判斷處理。直接上DEMO...

二、原始DEMO：

先亮出問題！！！

如果我們要根據學生的成績來判斷等級，比如：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("當前學生等級為：" + grade); // 當前學生等級為：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("當前學生等級為：" + grade); // 當前學生等級為：A

三、優(yōu)化DEMO：

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

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

上面代碼可以這么理解：

如果score的值等于90，那么score===90的邏輯表達式就成立（也即是true），就會執(zhí)行到后面 'A' 的賦值操作，同時后面的“||” 邏輯運算也可以忽略（因為“||”運算符的特點是前面一旦為true，后面就沒有執(zhí)行的必要了）。

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

以此類推，如果前面所有的邏輯表達式都不成立，那么根據“||”的特點（全部為false就取最后面的），最后的grade賦值就會是“D”。

我們還可以用JSON形式來處理上面的邏輯運算：

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

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

當然，我們會發(fā)現上面的數值比較并沒有太大的實用性，比如當學生的成績在85分的時候，等級也會變成“D”，這明顯是不合適的！！！

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

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！