JavaScript-快速入門（七）條件判斷

原文出處 ：https://www.liaoxuefeng.com/

JavaScript使用if () { ... } else { ... }來進行條件判斷。例如，根據年齡顯示不同內容，可以用if語句實現如下：

var age = 20;
if (age >= 18) { // 如果age >= 18爲true，則執行if語句塊
    alert('adult');
} else { // 否則執行else語句塊
    alert('teenager');
}

其中else語句是可選的。如果語句塊只包含一條語句，那麼可以省略{}：

var age = 20;
if (age >= 18)
    alert('adult');
else
    alert('teenager');

省略{}的危險之處在於，如果後來想添加一些語句，卻忘了寫{}，就改變了if...else...的語義，例如：

var age = 20;
if (age >= 18)
    alert('adult');
else
    console.log('age < 18'); // 添加一行日誌
    alert('teenager'); // <- 這行語句已經不在else的控制範圍了

上述代碼的else子句實際上只負責執行console.log('age < 18');，原有的alert('teenager');已經不屬於if...else...的控制範圍了，它每次都會執行。

相反地，有{}的語句就不會出錯：

var age = 20;
if (age >= 18) {
    alert('adult');
} else {
    console.log('age < 18');
    alert('teenager');
}

這就是爲什麼我們建議永遠都要寫上{}。

多行條件判斷

如果還要更細緻地判斷條件，可以使用多個if...else...的組合：

var age = 3;
if (age >= 18) {
    alert('adult');
} else if (age >= 6) {
    alert('teenager');
} else {
    alert('kid');
}

上述多個if...else...的組合實際上相當於兩層if...else...：

var age = 3;
if (age >= 18) {
    alert('adult');
} else {
    if (age >= 6) {
        alert('teenager');
    } else {
        alert('kid');
    }
}

但是我們通常把else if連寫在一起，來增加可讀性。這裏的else略掉了{}是沒有問題的，因爲它只包含一個if語句。注意最後一個單獨的else不要略掉{}。

請注意，if...else...語句的執行特點是二選一，在多個if...else...語句中，如果某個條件成立，則後續就不再繼續判斷了。

如果if的條件判斷語句結果不是true或false怎麼辦？例如：

var s = '123';
if (s.length) { // 條件計算結果爲3
    //
}

JavaScript把null、undefined、0、NaN和空字符串''視爲false，其他值一概視爲true，因此上述代碼條件判斷的結果是true。