Javascript 條件分支：if 和 '?'

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

我們可以使用 if 語句和條件運(yùn)算符 ?（也稱為“問號”運(yùn)算符）來實(shí)現(xiàn)。

“if” 語句

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

例如：

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

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

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

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

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

建議每次使用 if 語句都用大括號 {} 來包裝代碼塊，即使只有一條語句。這樣可以提高代碼可讀性。

布爾轉(zhuǎn)換

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

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

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

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

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

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

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

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

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

if (cond) {
  ...
}

“else” 語句

if 語句有時會包含一個可選的 “else” 塊。如果判斷條件不成立，就會執(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 以外的任何值
}

多個條件：“else if”

有時我們需要測試一個條件的幾個變體。我們可以通過使用 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。如果條件不符合，就會轉(zhuǎn)到下一個條件 year > 2015。如果這個條件也不符合，則會顯示最后一個 alert。

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

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

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

如下所示：

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

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

alert(accessAllowed);

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

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

語法：

let result = condition ? value1 : value2;

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

例如：

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

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

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

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

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

請注意：

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

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

多個 ‘?’

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

例如：

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)過仔細(xì)觀察，我們可以看到它只是一個普通的檢查序列。

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

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

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ī)使用

有時可以使用問號 ? 來代替 if 語句：

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

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

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

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

不建議這樣使用問號運(yùn)算符。

這種寫法比 if 語句更短，對一些程序員很有吸引力。但它的可讀性差。

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

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

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

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

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

任務(wù)

if（值為 0 的字符串）

重要程度: 5

alert 彈窗會出來嗎？

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

解決方案

是的，它會

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

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

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

JavaScript 的名字

重要程度: 2

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

如果訪問者輸入了 “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>

顯示符號

重要程度: 2

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

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

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

解決方案

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

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

使用 '?' 重寫 'if' 語句

重要程度: 5

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

let result;

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

解決方案

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

使用 '?' 重寫 'if..else' 語句

重要程度: 5

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

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

let message;

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