Javascript 條件分支：if 和 '?'

有時(shí)我們需要根據(jù)不同條件執(zhí)行不同的操作。

我們可以使用 if 語(yǔ)句和條件運(yùn)算符 ?（也稱(chēng)為“問(wèn)號(hào)”運(yùn)算符）來(lái)實(shí)現(xiàn)。

“if” 語(yǔ)句

if(...) 語(yǔ)句計(jì)算括號(hào)里的條件表達(dá)式，如果計(jì)算結(jié)果是 true，就會(huì)執(zhí)行對(duì)應(yīng)的代碼塊。

例如：

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) alert( 'You are right!' );

在上面這個(gè)例子中，條件是一個(gè)簡(jiǎn)單的相等性檢查（year == 2015），但它還可以更復(fù)雜。

如果有多個(gè)語(yǔ)句要執(zhí)行，我們必須將要執(zhí)行的代碼塊封裝在大括號(hào)內(nèi)：

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

建議每次使用 if 語(yǔ)句都用大括號(hào) {} 來(lái)包裝代碼塊，即使只有一條語(yǔ)句。這樣可以提高代碼可讀性。

布爾轉(zhuǎn)換

if (…) 語(yǔ)句會(huì)計(jì)算圓括號(hào)內(nèi)的表達(dá)式，并將計(jì)算結(jié)果轉(zhuǎn)換為布爾型。

讓我們回顧一下 類(lèi)型轉(zhuǎn)換 一章中的轉(zhuǎn)換規(guī)則：

• 數(shù)字 ?0?、空字符串 ?""?、?null?、?undefined ?和 ?NaN ?都會(huì)被轉(zhuǎn)換成 ?false?。因?yàn)樗鼈儽环Q(chēng)為“假值（falsy）”。
• 其他值被轉(zhuǎn)換為 ?true?，所以它們被稱(chēng)為“真值（truthy）”。

所以，下面這個(gè)條件下的代碼永遠(yuǎn)不會(huì)執(zhí)行：

if (0) { // 0 是假值（falsy）
  ...
}

……但下面的條件 —— 始終有效：

if (1) { // 1 是真值（truthy）
  ...
}

我們也可以將預(yù)先計(jì)算的布爾值傳入 if 語(yǔ)句，像這樣：

let cond = (year == 2015); // 相等運(yùn)算符的結(jié)果是 true 或 false

if (cond) {
  ...
}

“else” 語(yǔ)句

if 語(yǔ)句有時(shí)會(huì)包含一個(gè)可選的 “else” 塊。如果判斷條件不成立，就會(huì)執(zhí)行它內(nèi)部的代碼。

例如：

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // 2015 以外的任何值
}

多個(gè)條件：“else if”

有時(shí)我們需要測(cè)試一個(gè)條件的幾個(gè)變體。我們可以通過(guò)使用 else if 子句實(shí)現(xiàn)。

例如：

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

在上面的代碼中，JavaScript 先檢查 year < 2015。如果條件不符合，就會(huì)轉(zhuǎn)到下一個(gè)條件 year > 2015。如果這個(gè)條件也不符合，則會(huì)顯示最后一個(gè) alert。

可以有更多的 else if 塊。結(jié)尾的 else 是可選的。

條件運(yùn)算符 ‘?’

有時(shí)我們需要根據(jù)一個(gè)條件去賦值一個(gè)變量。

如下所示：

let accessAllowed;
let age = prompt('How old are you?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

所謂的“條件”或“問(wèn)號(hào)”運(yùn)算符讓我們可以更簡(jiǎn)短地達(dá)到目的。

這個(gè)運(yùn)算符通過(guò)問(wèn)號(hào) ? 表示。有時(shí)它被稱(chēng)為三元運(yùn)算符，被稱(chēng)為“三元”是因?yàn)樵撨\(yùn)算符中有三個(gè)操作數(shù)。實(shí)際上它是 JavaScript 中唯一一個(gè)有這么多操作數(shù)的運(yùn)算符。

語(yǔ)法：

let result = condition ? value1 : value2;

計(jì)算條件結(jié)果，如果結(jié)果為真，則返回 value1，否則返回 value2。

例如：

let accessAllowed = (age > 18) ? true : false;

技術(shù)上講，我們可以省略 age > 18 外面的括號(hào)。問(wèn)號(hào)運(yùn)算符的優(yōu)先級(jí)較低，所以它會(huì)在比較運(yùn)算符 > 后執(zhí)行。

下面這個(gè)示例會(huì)執(zhí)行和前面那個(gè)示例相同的操作：

// 比較運(yùn)算符 "age > 18" 首先執(zhí)行
//（不需要將其包含在括號(hào)中）
let accessAllowed = age > 18 ? true : false;

但括號(hào)可以使代碼可讀性更強(qiáng)，所以我們建議使用它們。

請(qǐng)注意：

在上面的例子中，你可以不使用問(wèn)號(hào)運(yùn)算符，因?yàn)楸容^本身就返回 true/false：

// 下面代碼同樣可以實(shí)現(xiàn)
let accessAllowed = age > 18;

多個(gè) ‘?’

使用一系列問(wèn)號(hào) ? 運(yùn)算符可以返回一個(gè)取決于多個(gè)條件的值。

例如：

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

可能很難一下子看出發(fā)生了什么。但經(jīng)過(guò)仔細(xì)觀察，我們可以看到它只是一個(gè)普通的檢查序列。

1. 第一個(gè)問(wèn)號(hào)檢查 ?age < 3?。
2. 如果為真 — 返回 ?'Hi, baby!'?。否則，會(huì)繼續(xù)執(zhí)行冒號(hào) ?":"? 后的表達(dá)式，檢查 ?age < 18?。
3. 如果為真 — 返回 ?'Hello!'?。否則，會(huì)繼續(xù)執(zhí)行下一個(gè)冒號(hào) ?":"? 后的表達(dá)式，檢查 ?age < 100?。
4. 如果為真 — 返回 ?'Greetings!'?。否則，會(huì)繼續(xù)執(zhí)行最后一個(gè)冒號(hào) ?":"? 后面的表達(dá)式，返回 ?'What an unusual age!'?。

這是使用 if..else 實(shí)現(xiàn)上面的邏輯的寫(xiě)法：

if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 18) {
  message = 'Hello!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'What an unusual age!';
}

‘?’ 的非常規(guī)使用

有時(shí)可以使用問(wèn)號(hào) ? 來(lái)代替 if 語(yǔ)句：

let company = prompt('Which company created JavaScript?', '');

(company == 'Netscape') ?
   alert('Right!') : alert('Wrong.');

根據(jù)條件 company =='Netscape'，要么執(zhí)行 ? 后面的第一個(gè)表達(dá)式并顯示對(duì)應(yīng)內(nèi)容，要么執(zhí)行第二個(gè)表達(dá)式并顯示對(duì)應(yīng)內(nèi)容。

在這里我們不是把結(jié)果賦值給變量。而是根據(jù)條件執(zhí)行不同的代碼。

不建議這樣使用問(wèn)號(hào)運(yùn)算符。

這種寫(xiě)法比 if 語(yǔ)句更短，對(duì)一些程序員很有吸引力。但它的可讀性差。

下面是使用 if 語(yǔ)句實(shí)現(xiàn)相同功能的代碼，進(jìn)行下比較：

let company = prompt('Which company created JavaScript?', '');

if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}

因?yàn)槲覀兊难劬Υ怪睊呙璐a。所以，跨越幾行的代碼塊比長(zhǎng)而水平的代碼更易于理解。

問(wèn)號(hào) ? 的作用是根據(jù)條件返回其中一個(gè)值。請(qǐng)正確使用它。當(dāng)需要執(zhí)行不同的代碼分支時(shí)，請(qǐng)使用 if。

任務(wù)

if（值為 0 的字符串）

重要程度: 5

alert 彈窗會(huì)出來(lái)嗎？

if ("0") {
  alert( 'Hello' );
}

解決方案

是的，它會(huì)

任何非空字符串（"0" 不是空字符串）的邏輯值都是 true。

我們可以執(zhí)行下面的代碼來(lái)進(jìn)行驗(yàn)證：

if ("0") {
  alert( 'Hello' );
}

JavaScript 的名字

重要程度: 2

使用 if..else 結(jié)構(gòu)，實(shí)現(xiàn)提問(wèn) “What’s the “official” name of JavaScript?” 的代碼。

如果訪問(wèn)者輸入了 “ECMAScript”，輸出就提示 “Right!”，否則 —— 輸出：“You don’t know? “ECMAScript”!”

解決方案

<!DOCTYPE html>
<html>

<body>
  <script>
    'use strict';

    let value = prompt('What is the "official" name of JavaScript?', '');

    if (value == 'ECMAScript') {
      alert('Right!');
    } else {
      alert("You don't know? ECMAScript!");
    }
  </script>


</body>

</html>

顯示符號(hào)

重要程度: 2

使用 if..else 語(yǔ)句，編寫(xiě)代碼實(shí)現(xiàn)通過(guò) prompt 獲取一個(gè)數(shù)字并用 alert 顯示結(jié)果：

• 如果這個(gè)數(shù)字大于 0，就顯示 ?1?，
• 如果這個(gè)數(shù)字小于 0，就顯示 ?-1?，
• 如果這個(gè)數(shù)字等于 0，就顯示 ?0?。

在這個(gè)任務(wù)中，我們假設(shè)輸入永遠(yuǎn)是一個(gè)數(shù)字。

解決方案

let value = prompt('Type a number', 0);

if (value > 0) {
  alert( 1 );
} else if (value < 0) {
  alert( -1 );
} else {
  alert( 0 );
}

使用 '?' 重寫(xiě) 'if' 語(yǔ)句

重要程度: 5

使用條件運(yùn)算符 '?' 重寫(xiě)下面的 if 語(yǔ)句：

let result;

if (a + b < 4) {
  result = 'Below';
} else {
  result = 'Over';
}

解決方案

let result = (a + b < 4) ? 'Below' : 'Over';

使用 '?' 重寫(xiě) 'if..else' 語(yǔ)句

重要程度: 5

使用多個(gè)三元運(yùn)算符 '?' 重寫(xiě)下面的 if..else 語(yǔ)句。

為了增強(qiáng)代碼可讀性，建議將代碼分成多行。

let message;

if (login == 'Employee') {
  message = 'Hello';
} else if (login == 'Director') {
  message = 'Greetings';
} else if (login == '') {
  message = 'No login';
} else {
  message = '';
}