2022 年 12 月 7 日

條件分支：if、'?'

有時候，我們需要根據不同的條件執行不同的動作。

為此，我們可以使用 if 陳述式和條件運算子 ?，它也稱為「問號」運算子。

「if」陳述式

if(...) 陳述式會評估括號中的條件，如果結果為 true，則執行一段程式碼區塊。

例如

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

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

在上面的範例中，條件是一個簡單的相等性檢查 (year == 2015)，但它可以更複雜。

如果我們想要執行多個陳述式，我們必須將程式碼區塊包在花括號中

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

我們建議你每次使用 if 陳述式時，都將程式碼區塊用花括號 {} 包起來，即使只有一個陳述式要執行。這樣做可以提高可讀性。

布林轉換

if (…) 陳述式會評估其括號中的表達式，並將結果轉換為布林值。

讓我們回顧一下章節類型轉換中的轉換規則

數字 0、空字串 ""、null、undefined 和 NaN 都會變成 false。因此它們被稱為「偽」值。
其他值會變成 true，因此它們被稱為「真」值。

因此，此條件下的程式碼永遠不會執行

          if (0) { // 0 is falsy
  ...
}
        

…而在此條件內，它總是會執行

          if (1) { // 1 is truthy
  ...
}
        

我們也可以將預先評估的布林值傳遞給 if，如下所示

          let cond = (year == 2015); // equality evaluates to true or false

if (cond) {
  ...
}
        

「else」子句

if 敘述可以包含一個選擇性的 else 區塊。當條件為偽時，它會執行。

例如

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

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // any value except 2015
}

多個條件：「else if」

有時，我們想要測試條件的幾個變體。else if 子句讓我們可以這樣做。

例如

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

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

在上面的程式碼中，JavaScript 首先檢查 year < 2015。如果為偽，它會進入下一個條件 year > 2015。如果也為偽，它會顯示最後一個 alert。

可以有更多 else if 區塊。最後一個 else 是選擇性的。

條件運算子「?」

有時，我們需要根據條件來指定變數。

例如

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

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

alert(accessAllowed);

所謂的「條件」或「問號」運算子讓我們可以用更簡短、更簡單的方式做到這一點。

運算子用問號 ? 表示。有時它被稱為「三元運算子」，因為該運算子有三個運算元。它實際上是 JavaScript 中唯一具有這麼多運算元的運算子。

語法如下

let result = condition ? value1 : value2;

評估 condition：如果為真，則傳回 value1，否則傳回 value2。

例如

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

技術上來說，我們可以省略 age > 18 周圍的括號。問號運算子的優先順序較低，因此它會在比較 > 之後執行。

此範例將執行與前一個範例相同的工作

          // the comparison operator "age > 18" executes first anyway
// (no need to wrap it into parentheses)
let accessAllowed = age > 18 ? true : false;
        

但是括號使程式碼更具可讀性，因此我們建議使用它們。

在上面的範例中，你可以避免使用問號運算子，因為比較本身會傳回 true/false

          // the same
let accessAllowed = age > 18;
        

多個「?」

一連串問號運算子 ? 可以傳回一個取決於多個條件的值。

例如

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

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

alert( message );

一開始可能會難以理解發生了什麼事。但仔細一看，我們可以看出這只是一個普通的測試序列

第一個問號檢查 age < 3。
如果是真 - 它會傳回 'Hi, baby!'。否則，它會繼續執行冒號「:」後的表達式，檢查 age < 18。
如果是真 - 它會傳回 'Hello!'。否則，它會繼續執行下一個冒號「:」後的表達式，檢查 age < 100。
如果是真 - 它會傳回 'Greetings!'。否則，它會繼續執行最後一個冒號「:」後的表達式，傳回 'What an unusual age!'。

以下是使用 if..else 的寫法

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

問號的非傳統用法

有時問號 ? 會用來取代 if

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

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

根據條件 company == 'Netscape'，問號 ? 後的第一個或第二個表達式會被執行並顯示警告。

我們沒有將結果指定給變數。相反地，我們根據條件執行不同的程式碼。

不建議以這種方式使用問號運算子。

這種表示法比等效的 if 陳述式短，這吸引了一些程式設計師。但它的可讀性較差。

以下是使用 if 進行比較相同的程式碼

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

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

我們的眼睛會垂直掃描程式碼。跨越多行的程式碼區塊比長而橫向的指令集更容易理解。

問號運算子 ? 的目的是根據其條件傳回一個或另一個值。請只用於此目的。當您需要執行不同的程式碼分支時，請使用 if。

作業

if (包含零的字串)

會顯示 alert 嗎？

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

會。

任何字串，除了空字串（且 "0" 不為空）在邏輯語境中都會變成 true。

我們可以執行並檢查

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

JavaScript 的名稱

使用 if..else 結構，撰寫詢問：「JavaScript 的「官方」名稱是什麼？」的程式碼

如果訪客輸入「ECMAScript」，則輸出「答對了！」，否則輸出：「你不知道嗎？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>

顯示符號

使用 if..else，撰寫透過 prompt 取得數字，然後在 alert 中顯示的程式碼

1，如果該值大於零，
-1，如果小於零，
0，如果等於零。

在此任務中，我們假設輸入值始終為數字。

在新視窗中示範

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

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

將「if」改寫成「？」

使用條件運算子 '?' 改寫此 if

          let result;

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

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

將「if..else」改寫成「？」

使用多個三元運算子 '?' 改寫 if..else。

為了可讀性，建議將程式碼分成多行。

          let message;

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

          let message = (login == 'Employee') ? 'Hello' :
  (login == 'Director') ? 'Greetings' :
  (login == '') ? 'No login' :
  '';
        

教學課程地圖

留言

留言前請先閱讀此內容…

章節

課程導覽