在JavaScript中，對(duì)于 if else 的邏輯判斷你肯定非常熟悉，本文羅列了幾種你不一定知道的簡(jiǎn)寫方式，僅供參考。
例子：
已知小明考了68分，小于60分為不及格，大于60分為及格，問(wèn)：小明是否通過(guò)了考試？
1.傳統(tǒng)的寫法
if(score < 60){
alert('不及格');
}else{
alert('及格');
}
這沒什么好說(shuō)的，最基本的if else語(yǔ)法?？勺x性應(yīng)該是最好的。
2.利用三目運(yùn)算符來(lái)進(jìn)行判斷
score < 60 ? alert('不及格') : alert('及格') ;
這種寫法應(yīng)該還算是比較多見的，而且，如果只有單純的一個(gè)if判斷的話，可讀性也不是很差。
3.利用&& 來(lái)判斷
score < 60 && alert('不及格') ;
score >= 60 && alert('及格') ;
**&&的用法 **： 如果左邊的結(jié)果為真，那么運(yùn)行右邊的表達(dá)式，如果右邊的也為真，那么就返回真。其中，只要有一個(gè)為假，結(jié)果就是假。并且，一旦左邊的結(jié)果為假，右邊的就不執(zhí)行了。
這里就是取了一個(gè)巧，因?yàn)槲抑皇窍胍獔?zhí)行右邊的表達(dá)式，無(wú)所謂返回值是什么。
那么，如果score < 60 為真，我不管三七二十一，都去執(zhí)行一下右邊的代碼。我們的目的已經(jīng)達(dá)到了。
這不就相當(dāng)于這樣嗎：
if(score < 60 == true){
alert('不及格') ;
}
if(score >= 60 == true){
alert('及格') ;
}
簡(jiǎn)寫：
if(score < 60){
alert('不及格') ;
}
if(score >= 60){
alert('及格') ;
}
就是說(shuō)，一旦 ( ) 里面的表達(dá)式為真，就執(zhí)行 { } 里面的內(nèi)容。否則就不執(zhí)行。
4.利用 || 來(lái)判斷
score < 60 || alert('及格') ;
score >= 60 || alert('不及格') ;
**|| 的用法 **： 如果左邊的結(jié)果為真，那么直接返回true，右邊的就忽略了！
如果左邊為假，那么就運(yùn)行右邊的，看看右邊的結(jié)果如何？如果右邊為真，就返回真，否則返回假。
也就是說(shuō)，不管右邊的結(jié)果怎樣，只要左邊為假了，右邊就無(wú)論如何會(huì)被執(zhí)行一次的。這邊也就是利用這個(gè)原理，相當(dāng)于這樣：
if(score < 60 == false){
alert('及格') ;
}
if(score >= 60 == false){
alert('不及格') ;
}
如果分?jǐn)?shù) < 60 是假的，是騙你的，不就是說(shuō)分?jǐn)?shù) > 60 才是真相嗎?哦，超過(guò)60分就是及格了，所以alert出來(lái)的是及格。
如果分?jǐn)?shù) >= 60 是假的，是騙你的，不就是說(shuō)分?jǐn)?shù) < 60 才是真相嗎?哦，不滿60分就是不及格了，所以alert出來(lái)的是不及格。
這樣應(yīng)該說(shuō)的比較清楚了吧。
再說(shuō)得白一點(diǎn)，就是：
你要么給我 < 60 ,要么給我 alert('及格') ;
你要么給我 >= 60 ,要么給我 alert('不及格') ;
5.實(shí)戰(zhàn)演練
我們來(lái)一個(gè)小案例，看看可以怎么運(yùn)用這些知識(shí)點(diǎn)？
<!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，現(xiàn)在希望自己來(lái)編寫一個(gè)toggelClass，如何實(shí)現(xiàn)呢？
當(dāng)我們點(diǎn)擊這個(gè)div的時(shí)候，就自動(dòng)將class換成box2。再次點(diǎn)擊的時(shí)候，就把box2的樣式去掉，依此循環(huán)。
上代碼：
$('document').ready(function(){
function toggleClass(dom , className){
//判斷該class是否已經(jīng)存在
if(dom.hasClass(className)){
//如果存在，就去掉這個(gè)class
dom.removeClass(className);
}else{
//如果不存在，就加上這個(gè)class
dom.addClass(className);
}
}
$('#myBox').click(function(){
toggleClass($(this),'box2');
});
});
我猜想，jQuery對(duì)toggleClass的實(shí)現(xiàn)應(yīng)該也差不多是這個(gè)意思?，F(xiàn)在，我們考慮做如下簡(jiǎn)化：
第一種方式，用三目運(yùn)算符簡(jiǎn)化：
function toggleClass(dom , className){
dom.hasClass(className) ? dom.removeClass(className) : dom.addClass(className);
}
第二種方式，用&& 和 ||：
!dom.hasClass(className) && dom.addClass(className) || dom.removeClass(className);
可能有點(diǎn)繞，而且我也不是很推薦這種方式，一般來(lái)說(shuō)，這種方式用于一些給變量賦值的場(chǎng)合。
我大概解釋一下：
!dom.hasClass(className) && dom.addClass(className)
這表示如果dom元素不包含你指定的className，那么 !dom.hasClass(className) 是真，于是無(wú)論如何我都要執(zhí)行右邊的代碼： dom.addClass(className) ，也就是說(shuō)，給dom元素添加這個(gè)class。
這樣一來(lái)，
!dom.hasClass(className) && dom.addClass(className)
這句話是不是已經(jīng)成立了，OK，那么因?yàn)橛疫吺?|| ， 左邊都已經(jīng)成立了，那么我右邊的代碼是不是可以不執(zhí)行了呀？
好的，第二次點(diǎn)擊：
!dom.hasClass(className)的意思是說(shuō)，你這個(gè)dom元素是不是沒有指定的class啊，不，我們剛才已經(jīng)添加了，所以是有的。
那么，這句話就不成立了，&& 左邊的是假，那么右邊的就不執(zhí)行了、
就是說(shuō)：
dom.addClass(className)
這句話不執(zhí)行了。
綜合來(lái)看：
!dom.hasClass(className) && dom.addClass(className)
這個(gè)條件就是不成立的。
好的， || 左邊的不成立，是不是說(shuō)，我們無(wú)論如何都要執(zhí)行一下||右邊的代碼呢？
恩， dom.removeClass(className) 就被執(zhí)行了。
