整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
念：通過判斷指定表達(dá)式的值來決定執(zhí)行還是跳過某些語句，用于基于不同條件執(zhí)行不同的動作。
JavaScript的條件語句，在我的理解中可以分為四種情況：
語法：
if(condition){
// 當(dāng)條件為 true 時(shí)執(zhí)行的代碼
}示例：
們在編寫代碼的時(shí)候，使用 if else 是一件非常尋常的事情，但是有些場景過多的if else 反而帶來了代碼理解的成本。
有時(shí)候我們可以使用其他的方式去避免使用大量嵌套的 if else。
本文將以 javascript 語言為例，其他編程語言也是大差不差的
重構(gòu)前：
重構(gòu)后：
通過邏輯與操作，可以將if代碼直接消除，由于原始代碼是單行的，所以重構(gòu)后的代碼直接是一行了。
如果是雙行我們還可以將多行拆成顆粒度更細(xì)的函數(shù)，然后再使用 &&
多行代碼重構(gòu)前：
多行代碼重構(gòu)后：
三目運(yùn)算符可以將 if-else 語句壓縮成一行。特別是在為變量進(jìn)行賦值的時(shí)候，三元運(yùn)算法更加精簡
三元運(yùn)算符重構(gòu)前：
三元運(yùn)算符重構(gòu)后：
在上面的案例中，使用三元運(yùn)算符確保了變量只被賦值了一次，使得代碼更加清晰。
當(dāng)我們在 if-else 語句中有 3 個(gè)或更多分支或者嵌套 if時(shí)，我們也可以使用嵌套的 三元運(yùn)算符實(shí)現(xiàn)嵌套的 if-else 的作用
嵌套的三元運(yùn)算符重構(gòu)前：
嵌套的三元運(yùn)算符重構(gòu)后：
雖然嵌套的三元運(yùn)算符看起來有點(diǎn)怪，不過在不超過 3 個(gè)層級下的嵌套還是可以考慮嵌套三元運(yùn)算符的。因?yàn)橥ㄟ^縮進(jìn)我們還是可以看得出代碼的清晰結(jié)構(gòu)的。
如果要對一個(gè)輸入的變量進(jìn)行相關(guān)的判斷，switch 語句是最好應(yīng)用的場景，類似下面示例：通過switch 語句，根據(jù)用戶傳入的 action 的值進(jìn)行依次判斷并觸發(fā)響應(yīng)的邏輯。
switch 語句特殊的功能就是 break 關(guān)鍵詞可以很好地讓邏輯控制流在一個(gè)case 中執(zhí)行，而不會被流向下一個(gè) case
編程設(shè)計(jì)模式中有一個(gè)策略模式，就是預(yù)先定義一些策略，然后在進(jìn)行判斷的時(shí)候，每次都去策略庫中進(jìn)行判斷執(zhí)行。
一般我們都是使用 對象或者 Map 這樣的數(shù)據(jù)結(jié)構(gòu)去存儲這些策略，通過對象的 [] 訪問方法或 Map 的 get 方法去替代 if-else 分支語句
再次重申并不是說 if-else 語句不好，相反 if-else 在代碼組織上也很直觀，正因?yàn)槿绱耍琲f-else語句在眾多的編程語言中都存在。
不使用if-else 而使用其他的替代方式，是因?yàn)槠渌姆绞娇赡軙勾a更加簡潔，更清晰，在有些場景下更加優(yōu)雅，因此才會使用這些手段去替換 if-else.
------------
如果你有更多的想法或問題，歡迎在評論區(qū)分享你的看法。
如果對你有幫助的話，歡迎點(diǎn)贊、關(guān)注?、轉(zhuǎn)發(fā)。
JavaScript中，對于 if else 的邏輯判斷你肯定非常熟悉，本文羅列了幾種你不一定知道的簡寫方式，僅供參考。
例子：
已知小明考了68分，小于60分為不及格，大于60分為及格，問：小明是否通過了考試？
if(score < 60){
alert('不及格');
}else{
alert('及格');
}
這沒什么好說的，最基本的if else語法。可讀性應(yīng)該是最好的。
score < 60 ? alert('不及格') : alert('及格') ;
這種寫法應(yīng)該還算是比較多見的，而且，如果只有單純的一個(gè)if判斷的話，可讀性也不是很差。
score < 60 && alert('不及格') ;
score >=60 && alert('及格') ;
**&&的用法 **： 如果左邊的結(jié)果為真，那么運(yùn)行右邊的表達(dá)式，如果右邊的也為真，那么就返回真。其中，只要有一個(gè)為假，結(jié)果就是假。并且，一旦左邊的結(jié)果為假，右邊的就不執(zhí)行了。
這里就是取了一個(gè)巧，因?yàn)槲抑皇窍胍獔?zhí)行右邊的表達(dá)式，無所謂返回值是什么。
那么，如果score < 60 為真，我不管三七二十一，都去執(zhí)行一下右邊的代碼。我們的目的已經(jīng)達(dá)到了。
這不就相當(dāng)于這樣嗎：
if(score < 60==true){
alert('不及格') ;
}
if(score >=60==true){
alert('及格') ;
}
簡寫：
if(score < 60){
alert('不及格') ;
}
if(score >=60){
alert('及格') ;
}
就是說，一旦 ( ) 里面的表達(dá)式為真，就執(zhí)行 { } 里面的內(nèi)容。否則就不執(zhí)行。
score < 60 || alert('及格') ;
score >=60 || alert('不及格') ;
**|| 的用法 **： 如果左邊的結(jié)果為真，那么直接返回true，右邊的就忽略了！
如果左邊為假，那么就運(yùn)行右邊的，看看右邊的結(jié)果如何？如果右邊為真，就返回真，否則返回假。
也就是說，不管右邊的結(jié)果怎樣，只要左邊為假了，右邊就無論如何會被執(zhí)行一次的。這邊也就是利用這個(gè)原理，相當(dāng)于這樣：
if(score < 60==false){
alert('及格') ;
}
if(score >=60==false){
alert('不及格') ;
}
如果分?jǐn)?shù) < 60 是假的，是騙你的，不就是說分?jǐn)?shù) > 60 才是真相嗎?哦，超過60分就是及格了，所以alert出來的是及格。
如果分?jǐn)?shù) >=60 是假的，是騙你的，不就是說分?jǐn)?shù) < 60 才是真相嗎?哦，不滿60分就是不及格了，所以alert出來的是不及格。
這樣應(yīng)該說的比較清楚了吧。
再說得白一點(diǎn)，就是：
你要么給我 < 60 ,要么給我 alert('及格') ;
你要么給我 >=60 ,要么給我 alert('不及格') ;
我們來一個(gè)小案例，看看可以怎么運(yùn)用這些知識點(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)在希望自己來編寫一個(gè)toggelClass，如何實(shí)現(xiàn)呢？
當(dāng)我們點(diǎn)擊這個(gè)div的時(shí)候，就自動將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對toggleClass的實(shí)現(xiàn)應(yīng)該也差不多是這個(gè)意思。現(xiàn)在，我們考慮做如下簡化：
第一種方式，用三目運(yù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)繞，而且我也不是很推薦這種方式，一般來說，這種方式用于一些給變量賦值的場合。
我大概解釋一下：
!dom.hasClass(className) && dom.addClass(className)
這表示如果dom元素不包含你指定的className，那么 !dom.hasClass(className) 是真，于是無論如何我都要執(zhí)行右邊的代碼： dom.addClass(className) ，也就是說，給dom元素添加這個(gè)class。
這樣一來，
!dom.hasClass(className) && dom.addClass(className)
這句話是不是已經(jīng)成立了，OK，那么因?yàn)橛疫吺?|| ， 左邊都已經(jīng)成立了，那么我右邊的代碼是不是可以不執(zhí)行了呀？
好的，第二次點(diǎn)擊：
!dom.hasClass(className)的意思是說，你這個(gè)dom元素是不是沒有指定的class啊，不，我們剛才已經(jīng)添加了，所以是有的。
那么，這句話就不成立了，&& 左邊的是假，那么右邊的就不執(zhí)行了、
就是說：
dom.addClass(className)
這句話不執(zhí)行了。
綜合來看：
!dom.hasClass(className) && dom.addClass(className)
這個(gè)條件就是不成立的。
好的， || 左邊的不成立，是不是說，我們無論如何都要執(zhí)行一下||右邊的代碼呢？
恩， dom.removeClass(className) 就被執(zhí)行了。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
