JavaScript判斷if/else 語句
if (條件 1) { 當(dāng)條件 1 為 true 時(shí)執(zhí)行的代碼; } else if (條件 2) { 當(dāng)條件 2 為 true 時(shí)執(zhí)行的代碼; } else { 當(dāng)條件 1 和 條件 2 都不為 true 時(shí)執(zhí)行的代碼; }
JavaScript使用if () { ... } else { ... }來進(jìn)行條件判斷。例如,根據(jù)年齡顯示不同內(nèi)容,可以用if語句實(shí)現(xiàn)如下:
var age = 20; if (age >= 18) { // 如果age >= 18為true,則執(zhí)行if語句塊 alert('adult'); } else { // 否則執(zhí)行else語句塊 alert('teenager'); }
其中else語句是可選的。如果語句塊只包含一條語句,那么可以省略{}:
var age = 20; if (age >= 18) alert('adult'); else alert('teenager');
省略{}的危險(xiǎn)之處在于,如果后來想添加一些語句,卻忘了寫{},就改變了if...else...的語義,例如:
var age = 20; if (age >= 18) alert('adult'); else console.log('age < 18'); // 添加一行日志 alert('teenager'); // <- 這行語句已經(jīng)不在else的控制范圍了
上述代碼的else子句實(shí)際上只負(fù)責(zé)執(zhí)行console.log('age < 18');,原有的alert('teenager');已經(jīng)不屬于if...else...的控制范圍了,它每次都會(huì)執(zhí)行。
相反地,有{}的語句就不會(huì)出錯(cuò):
var age = 20; if (age >= 18) { alert('adult'); } else { console.log('age < 18'); alert('teenager'); }
這就是為什么我們建議永遠(yuǎn)都要寫上{}。
多行條件判斷
如果還要更細(xì)致地判斷條件,可以使用多個(gè)if...else...的組合:
var age = 3; if (age >= 18) { alert('adult'); } else if (age >= 6) { alert('teenager'); } else { alert('kid'); }
上述多個(gè)if...else...的組合實(shí)際上相當(dāng)于兩層if...else...:
var age = 3; if (age >= 18) { alert('adult'); } else { if (age >= 6) { alert('teenager'); } else { alert('kid'); }
但是我們通常把else if連寫在一起,來增加可讀性。這里的else略掉了{(lán)}是沒有問題的,因?yàn)樗话粋€(gè)if語句。注意最后一個(gè)單獨(dú)的else不要略掉{}。
請注意,if...else...語句的執(zhí)行特點(diǎn)是二選一,在多個(gè)if...else...語句中,如果某個(gè)條件成立,則后續(xù)就不再繼續(xù)判斷了。
試解釋為什么下面的代碼顯示的是teenager:
'use strict'; var age = 20; if (age >= 6) { alert('teenager'); } else if (age >= 18) { alert('adult'); } else { alert('kid'); }
由于age的值為20,它實(shí)際上同時(shí)滿足條件age >= 6和age >= 18,這說明條件判斷的順序非常重要。請修復(fù)后讓其顯示adult。
如果if的條件判斷語句結(jié)果不是true或false怎么辦?例如:
var s = '123'; if (s.length) { // 條件計(jì)算結(jié)果為3 // }
JavaScript把null、undefined、0、NaN和空字符串''視為false,其他值一概視為true,因此上述代碼條件判斷的結(jié)果是true。