javascript中 “ && ” 和 “ || ”有什么用

小編給大家分享一下javascript中 “ && ” 和 “ || ”有什么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

一、原理:

&& 操作符特點：邏輯運算表達式中只要一個是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

三、優化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），就會執行到后面 'A' 的賦值操作，同時后面的“||” 邏輯運算也可以忽略（因為“||”運算符的特點是前面一旦為true，后面就沒有執行的必要了）。

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

以此類推，如果前面所有的邏輯表達式都不成立，那么根據“||”的特點（全部為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對象中的時候，就會執行“||”后面的內容，也就是把grade賦值為“D”。

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

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

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

看完了這篇文章，相信你對“javascript中 “ && ” 和 “ || ”有什么用”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！