JavaScript條件判斷及高級用法總結

條件判斷常用

一、if/else語句

語句用于基于不同的條件來執(zhí)行不同的動作

代碼

if ('條件語句1') {
    // 如果 條件語句1 為 true 執(zhí)行該代碼塊
} else if ('條件語句2') {
    // 如果 條件語句1 為 false 且 條件語句2 為 true 執(zhí)行該代碼塊
} else {
    // 如果 條件語句1 為 false 且 條件語句2 為 false 執(zhí)行該代碼塊
}

當 if 語句后面只執(zhí)行一句代碼的時候，可以省略花括號。換句話說，如果 if 語句沒有花括號，則 if 語句只會考慮下一個語句

二、三元表達式

形式簡寫 ====》條件?真結果:假結果
等同于其====》 if(條件){真結果}else{假結果}
三元表達式語句表達更簡潔，但多條件會顯的冗余

?var ?isShow = true;
?isShow ? console.log(isShow ):console.log(isShow )
?// ?true

三元表達式在使用過程中不能使用break,continue等語句

三、或（||）與 (&&)語句

此用法高級而優(yōu)雅

1. ||（邏輯或）

短路表達式： 第一個為：true，則取第一個的值，如果第一個為false，則取第二個的值。
默認轉譯： 0 , ”“ , nul , false , undefined , NaN 都會判為false

console.log (2||1);  //2
console.log ('a'||1);//'a'
console.log (''||1); //1

2. &&（邏輯與）

短路表達式： 第一個為：true，則執(zhí)行&&后的語句，如果第一個為false，則執(zhí)行“&&”前面的值。

console.log (2 && 1);? //1
console.log ('a' && 1);//1
console.log ('' && 1); // ''

四、switch/case語句

語句 只能有一個表達式（expression）

語句 case 后面只能是常量，不能是表達式，也就是說 switch 語句的判斷條件只能跟一個常量進行比較。

用break的作用就是跳出switch

// add_step 與 case設定的常量值進行比較賦值 
var change_level = 0; 
switch(change_step){ 
case 5 : change_level = 1; 
    break; 
case 10 : change_level = 2; 
    break; 
case 12 : change_level = 3; 
    break; 
case 15 : change_level = 4; 
    break; 
default : change_level = 0; 
    break;
}

優(yōu)雅升級 A

此方法是利用對象屬性值的方式

var change_level={'5':1,'10':2,'12':3,'15':4}[change_step] || 0;?

優(yōu)雅升級 B

此方法也可以按著數值區(qū)間進行判斷

var change_step = 15;
var change_level =
? ? ? (change_step == 15 && 4) ||
? ? ? (change_step == 12 && 3) ||
? ? ? (change_step == 10 && 2) ||
? ? ? (change_step == 5 && 1) ||
 ? ? ? 0;
console.log(change_level);

五、null與undefined

我們已經知道，null 沒有任何的屬性值，并且無法獲取其實體（existence）值。所以 null.property 返回的是錯誤（error）而不是 undefined 。

考慮下面的代碼

if (node.nextSibling.className == ...) {
...
}

在 node 或者 node.nextSibling 為空（null）的情況下，會返回錯誤（error）。所以，通常情況下的解決方案的代碼為

if ((node) && (next = node.nextSibling) && ... ) {
...
}

那么，當條件判斷一多的情況下，代碼會形成下面的情況

if (
(node) &&
(node.nextSibling) &&
(node.nextSibling.className == ...)
... ) {
...
}

隨著判斷條件的不斷的增加，代碼會變得非常的“丑陋”。
有個小的“伎倆”，可以簡化條件判斷表達式。我們可以增加個空對象（{}）或者零（0）作為替代

if ( next = (node || 0).nextSibling) ) {
...
}

那么，上述的代碼就可以這樣寫

if (((node || 0).nextSibling || 0).className == ...) {
...
}

就個人而言，上述的從某種角度而言，代碼會非常的精簡。但日常實際的編碼過程中，尤其是多人配合的情況下，這些代碼可能會給其他開發(fā)人員造成一定的困擾。

正如 小馬 所言，如果已經在使用某些框架，需要具體問題具體分析。比如上述的條件判斷代碼，使用 YUI 編碼就可以使用

YAHOO.util.Dom.hasClass(el, className)

顯得更加的精簡，并且相比上述的代碼更容易理解。

總結

執(zhí)行效率：

• switch case會生成一個跳轉表來指示實際的case分支的地址，應用多分分支條件中
• switch case 缺點只能處理字符或者數字類型的變量【可用以上升級方案】
• 而if…else卻需要遍歷條件分支直到命中條件，（可用于少量判斷條件）

最新評論