在JavaScript中，對于 if else 的邏輯判斷你肯定非常熟悉，本文羅列了幾種你不一定知道的簡寫方式，僅供參考。
例子：
已知小明考了68分，小于60分為不及格，大于60分為及格，問：小明是否通過了考試？
1.傳統的寫法
if(score < 60){ alert('不及格');}else{ alert('及格');}
這沒什麼好說的，最基本的if else文法。可讀性應該是最好的。
2.利用三目運算符來進行判斷
score < 60 ? alert('不及格') : alert('及格') ;
這種寫法應該還算是比較多見的，而且，如果隻有單純的一個if判斷的話，可讀性也不是很差。
3.利用&& 來判斷
score < 60 && alert('不及格') ;score >= 60 && alert('及格') ;
**&&的用法 **： 如果左邊的結果為真，那麼運作右邊的表達式，如果右邊的也為真，那麼就傳回真。其中，隻要有一個為假，結果就是假。并且，一旦左邊的結果為假，右邊的就不執行了。
這裡就是取了一個巧，因為我隻是想要執行右邊的表達式，無所謂傳回值是什麼。
那麼，如果score < 60 為真，我不管三七二十一，都去執行一下右邊的代碼。我們的目的已經達到了。
這不就相當于這樣嗎：
if(score < 60 == true){ alert('不及格') ;}if(score >= 60 == true){ alert('及格') ;}
簡寫：
if(score < 60){ alert('不及格') ;}if(score >= 60){ alert('及格') ;}
就是說，一旦 ( ) 裡面的表達式為真，就執行 { } 裡面的内容。否則就不執行。
4.利用 || 來判斷
score < 60 || alert('及格') ;score >= 60 || alert('不及格') ;
**|| 的用法 **： 如果左邊的結果為真，那麼直接傳回true，右邊的就忽略了！
如果左邊為假，那麼就運作右邊的，看看右邊的結果如何？如果右邊為真，就傳回真，否則傳回假。
也就是說，不管右邊的結果怎樣，隻要左邊為假了，右邊就無論如何會被執行一次的。這邊也就是利用這個原理，相當于這樣：
if(score < 60 == false){ alert('及格') ;}if(score >= 60 == false){ alert('不及格') ;}
如果分數 < 60 是假的，是騙你的，不就是說分數 > 60 才是真相嗎?哦，超過60分就是及格了，是以alert出來的是及格。
如果分數 >= 60 是假的，是騙你的，不就是說分數 < 60 才是真相嗎?哦，不滿60分就是不及格了，是以alert出來的是不及格。
這樣應該說的比較清楚了吧。
再說得白一點，就是：
你要麼給我 < 60 ,要麼給我 alert('及格') ;
你要麼給我 >= 60 ,要麼給我 alert('不及格') ;
5.實戰演練
我們來一個小案例，看看可以怎麼運用這些知識點？
我們引入了jQuery，現在希望自己來編寫一個toggelClass，如何實作呢？
當我們點選這個div的時候，就自動将class換成box2。再次點選的時候，就把box2的樣式去掉，依此循環。
上代碼：
$('document').ready(function(){ function toggleClass(dom , className){ //判斷該class是否已經存在 if(dom.hasClass(className)){ //如果存在，就去掉這個class dom.removeClass(className); }else{ //如果不存在，就加上這個class dom.addClass(className); } } $('#myBox').click(function(){ toggleClass($(this),'box2'); });});
我猜想，jQuery對toggleClass的實作應該也差不多是這個意思。現在，我們考慮做如下簡化：
第一種方式，用三目運算符簡化：
function toggleClass(dom , className){ dom.hasClass(className) ? dom.removeClass(className) : dom.addClass(className);}
第二種方式，用&& 和 ||：
!dom.hasClass(className) && dom.addClass(className) || dom.removeClass(className);
可能有點繞，而且我也不是很推薦這種方式，一般來說，這種方式用于一些給變量指派的場合。
我大概解釋一下：
!dom.hasClass(className) && dom.addClass(className)
這表示如果dom元素不包含你指定的className，那麼 !dom.hasClass(className) 是真，于是無論如何我都要執行右邊的代碼： dom.addClass(className) ，也就是說，給dom元素添加這個class。
這樣一來，
!dom.hasClass(className) && dom.addClass(className)
這句話是不是已經成立了，OK，那麼因為右邊是 || ， 左邊都已經成立了，那麼我右邊的代碼是不是可以不執行了呀？
好的，第二次點選：
!dom.hasClass(className)的意思是說，你這個dom元素是不是沒有指定的class啊，不，我們剛才已經添加了，是以是有的。
那麼，這句話就不成立了，&& 左邊的是假，那麼右邊的就不執行了、
就是說：
dom.addClass(className)
這句話不執行了。
綜合來看：
!dom.hasClass(className) && dom.addClass(className)
這個條件就是不成立的。
好的， || 左邊的不成立，是不是說，我們無論如何都要執行一下||右邊的代碼呢？
恩， dom.removeClass(className) 就被執行了。