淺談javascript中的 “ && ” 和 “ || ”

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

一、原理:

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

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

更多淺談javascript中的 “ && ” 和 “ || ”相關文章請關注PHP中文網！