在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.實戰演練
我們來一個小案例，看看可以怎么運用這些知識點？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.box1 {
height:200px;
width:300px;
border: 1px solid #666;
}
.box2 {
background: green;
}
</style>
<script>
</script>
</head>
<body>
<div id='myBox' class='box1'></div>
</body>
</html>
我們引入了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) 就被執行了。
本章結束 ...
剽悍一小兔，電氣自動化畢業。
參加工作后對計算機感興趣，深知初學編程之艱辛。
希望將自己所學記錄下來，給初學者一點幫助。
我的個人博客：http://s-335245.gotocdn.com:8080/index.html
簡書地址：http://www.jianshu.com/users/8875b36caaec/latest_articles
免責聲明： 博客中所有的圖片素材均來自百度搜索，僅供學習交流，如有問題請聯系我，侵立刪，謝謝。