在程式碼中做決策 — 條件語句

在任何程式語言中，程式碼都需要根據不同的輸入做出決策並相應地執行操作。例如，在遊戲中，如果玩家的生命值為 0，則遊戲結束。在天氣應用程式中，如果是在早上檢視，則顯示日出圖形；如果是在晚上，則顯示星星和月亮。在本文中，我們將探討所謂的條件語句在 JavaScript 中是如何工作的。

先決條件 對 HTML、CSS 和 JavaScript 入門 的基本瞭解。
目標 瞭解如何在 JavaScript 中使用條件結構。

你可以在一個條件下擁有它！

人類（和其他動物）一直在做出影響他們生活的決定，從小的（“我應該吃一個餅乾還是兩個？”）到大的（“我應該留在我的祖國並在父親的農場工作，還是應該搬到美國學習天體物理學？”）

條件語句允許我們在 JavaScript 中表示這種決策過程，從必須做出的選擇（例如，“一個餅乾還是兩個”），到這些選擇的最終結果（也許“吃了 一個餅乾”的結果可能是“仍然感到飢餓”，而“吃了兩個餅乾”的結果可能是“感到飽了，但媽媽因為我吃了所有的餅乾而責怪我”。）

A cartoon character resembling a person holding a cookie jar labeled 'Cookies'. There is a question mark above the head of the character. There are two speech bubbles. The left speech bubble has one cookie. The right speech bubble has two cookies. Together it implies the character is trying to decide if it wants to one cookie or two cookies.

if...else 語句

讓我們看看在 JavaScript 中你將使用的最常見的條件語句型別——不起眼的 if...else 語句。

基本的 if...else 語法

基本的 if...else 語法如下所示

js
if (condition) {
  /* code to run if condition is true */
} else {
  /* run some other code instead */
}

這裡我們有

  1. 關鍵字 if 後跟一些括號。
  2. 要測試的條件，放在括號內（通常是“此值是否大於此其他值？”或“此值是否存在？”）。該條件使用了我們在上一模組中討論過的 比較運算子 並返回 true 或 false。
  3. 一對花括號，在其中我們有一些程式碼——這可以是我們喜歡的任何程式碼，並且只有在條件返回 true 時才會執行。
  4. 關鍵字 else。
  5. 另一對花括號，在其中我們有更多程式碼——這可以是我們喜歡的任何程式碼，並且只有在條件不是 true 時才會執行——或者換句話說，條件為 false。

這段程式碼非常易於閱讀——它表示“如果條件返回 true，則執行程式碼 A，否則執行程式碼 B”

您應該注意，您不必包含 else 和第二個花括號塊——以下也是完全合法的程式碼

js
if (condition) {
  /* code to run if condition is true */
}

/* run some other code */

但是，您需要在這裡小心——在這種情況下，第二個程式碼塊不受條件語句控制，因此它始終執行，無論條件返回 true 還是 false。這並非一定是壞事，但它可能不是您想要的——通常您希望執行一個程式碼塊或另一個程式碼塊，而不是兩者都執行。

最後一點，雖然不推薦，但您有時可能會看到 if...else 語句在沒有花括號的情況下編寫

js
if (condition) /* code to run if condition is true */
else /* run some other code instead */

此語法完全有效，但是如果您使用花括號來分隔程式碼塊，並使用多行和縮排，則更容易理解程式碼。

一個真實的例子

為了更好地理解此語法，讓我們考慮一個真實的例子。想象一個孩子被他們的母親或父親要求幫忙做家務。父母可能會說：“嘿，親愛的！如果你幫我購物，我會給你一些額外的零花錢，這樣你就可以買到你想要的那件玩具了。”在 JavaScript 中，我們可以這樣表示

js
let shoppingDone = false;
let childsAllowance;

if (shoppingDone === true) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

如所示，此程式碼始終導致 shoppingDone 變數返回 false，這意味著我們可憐的孩子感到失望。我們需要提供一種機制，讓父母在孩子購物後將 shoppingDone 變數設定為 true。

注意：您可以在 GitHub 上檢視此示例的完整版本（也可以在 此處檢視其執行情況）。

else if

最後一個示例為我們提供了兩個選擇或結果——但如果我們想要超過兩個怎麼辦？

有一種方法可以將額外的選擇/結果連結到您的 if...else——使用 else if。每個額外的選擇都需要一個額外的塊放在 if () { } 和 else { } 之間——檢視以下更復雜的示例，它可能是簡單天氣預報應用程式的一部分

html
<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
js
const select = document.querySelector("select");
const para = document.querySelector("p");

select.addEventListener("change", setWeather);

function setWeather() {
  const choice = select.value;

  if (choice === "sunny") {
    para.textContent =
      "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.";
  } else if (choice === "rainy") {
    para.textContent =
      "Rain is falling outside; take a rain coat and an umbrella, and don't stay out for too long.";
  } else if (choice === "snowing") {
    para.textContent =
      "The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.";
  } else if (choice === "overcast") {
    para.textContent =
      "It isn't raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.";
  } else {
    para.textContent = "";
  }
}
  1. 這裡我們有一個 HTML <select> 元素，允許我們做出不同的天氣選擇，以及一個簡單的段落。
  2. 在 JavaScript 中，我們同時儲存了對 <select> 和 <p> 元素的引用，並在 <select> 元素上添加了一個事件偵聽器，以便當其值更改時，執行 setWeather() 函式。
  3. 當此函式執行時，我們首先將一個名為 choice 的變數設定為 <select> 元素中當前選擇的值。然後，我們使用條件語句根據 choice 的值在段落中顯示不同的文字。請注意，除了第一個條件在 if () { } 塊中測試之外，所有其他條件都在 else if () { } 塊中測試。
  4. else { } 塊中的最後一個選擇基本上是一個“最後手段”選項——如果沒有任何條件為 true，則將執行其中的程式碼。在本例中，如果未選擇任何內容，例如，如果使用者決定重新選擇開頭顯示的“--做出選擇--”佔位符選項，它用於清空段落中的文字。

注意：您也可以在 GitHub 上找到此示例（也可以在 此處檢視其執行情況）。

關於比較運算子的說明

比較運算子用於測試條件語句中的條件。我們之前在 JavaScript 中的基本數學——數字和運算子 文章中首次介紹了比較運算子。我們的選擇是

  • === 和 !==——測試一個值是否與另一個值相同或不相同。
  • < 和 >——測試一個值是否小於或大於另一個值。
  • <= 和 >=——測試一個值是否小於或等於，或大於或等於另一個值。

我們想特別提到測試布林值 (true/false) 以及您會一遍又一遍遇到的常見模式。任何不是 false、undefined、null、0、NaN 或空字串 ('') 的值在作為條件語句進行測試時實際上都會返回 true，因此您可以單獨使用變數名來測試它是否為 true，甚至它是否存在（即它不是未定義的）。例如

js
let cheese = "Cheddar";

if (cheese) {
  console.log("Yay! Cheese available for making cheese on toast.");
} else {
  console.log("No cheese on toast for you today.");
}

並且，回到我們之前關於孩子為父母做家務的例子，你可以這樣寫

js
let shoppingDone = false;
let childsAllowance;

// We don't need to explicitly specify 'shoppingDone === true'
if (shoppingDone) {
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

巢狀 if...else

將一個 if...else 語句放在另一個語句中（巢狀它們）是完全可以的。例如，我們可以更新我們的天氣預報應用程式，以根據溫度顯示另一組選擇

js
if (choice === "sunny") {
  if (temperature < 86) {
    para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
  } else if (temperature >= 86) {
    para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
  }
}

即使程式碼全部一起工作，每個 if...else 語句也完全獨立於另一個語句。

邏輯運算子：AND、OR 和 NOT

如果您想在不編寫巢狀 if...else 語句的情況下測試多個條件，邏輯運算子 可以幫助您。當在條件中使用時，前兩個執行以下操作

  • &&——AND；允許您將兩個或多個表示式連結在一起，以便所有表示式都必須單獨計算為 true，整個表示式才能返回 true。
  • ||——OR；允許您將兩個或多個表示式連結在一起，以便其中一個或多個表示式必須單獨計算為 true，整個表示式才能返回 true。

為了給您一個 AND 示例，前面的示例程式碼段可以重寫為

js
if (choice === "sunny" && temperature < 86) {
  para.textContent = `It is ${temperature} degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.`;
} else if (choice === "sunny" && temperature >= 86) {
  para.textContent = `It is ${temperature} degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.`;
}

例如，只有當 choice === 'sunny'和temperature < 86 都返回 true 時，才會執行第一個程式碼塊。

讓我們看一個快速的 OR 示例

js
if (iceCreamVanOutside || houseStatus === "on fire") {
  console.log("You should leave the house quickly.");
} else {
  console.log("Probably should just stay in then.");
}

最後一種邏輯運算子 NOT，由 ! 運算子表示，可用於否定表示式。讓我們在上面的示例中將其與 OR 結合起來

js
if (!(iceCreamVanOutside || houseStatus === "on fire")) {
  console.log("Probably should just stay in then.");
} else {
  console.log("You should leave the house quickly.");
}

在此程式碼段中，如果 OR 語句返回 true，則 NOT 運算子將對其取反，以便整個表示式返回 false。

您可以根據需要將任意多個邏輯語句組合在一起，並以任何結構組合。以下示例僅在兩個 OR 語句都返回 true 時執行內部程式碼，這意味著整個 AND 語句將返回 true

js
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === "Steve")) {
  // run the code
}

在條件語句中使用邏輯 OR 運算子時的一個常見錯誤是嘗試宣告一次要檢查其值的變數，然後給出它可能返回 true 的值的列表，並用 || (OR) 運算子分隔。例如

js
if (x === 5 || 7 || 10 || 20) {
  // run my code
}

在這種情況下，if () 內的條件將始終計算為 true，因為 7（或任何其他非零值）始終計算為 true。此條件實際上表示“如果 x 等於 5，或者 7 為 true——它始終為 true”。從邏輯上講，這不是我們想要的！要使此工作正常進行，您必須在每個 OR 運算子的兩側指定一個完整的測試

js
if (x === 5 || x === 7 || x === 10 || x === 20) {
  // run my code
}

switch 語句

if...else 語句可以很好地完成啟用條件程式碼的任務，但它們並非沒有缺點。它們主要適用於您有幾個選擇並且每個選擇都需要執行相當數量的程式碼和/或條件很複雜（例如，多個邏輯運算子）的情況。對於您只想根據條件將變數設定為特定選擇的值或列印特定語句的情況，語法可能有點繁瑣，尤其是在您有很多選擇的情況下。

在這種情況下，switch 語句 是您的朋友——它們將單個表示式/值作為輸入，然後檢視多個選擇，直到找到與該值匹配的一個，並執行與其一起使用的相應程式碼。以下是一些虛擬碼，讓您瞭解一下

js
switch (expression) {
  case choice1:
    // run this code
    break;

  case choice2:
    // run this code instead
    break;

  // include as many cases as you like

  default:
    // actually, just run this code
    break;
}

這裡我們有

  1. 關鍵字 switch，後跟一組括號。
  2. 括號內的表示式或值。
  3. 關鍵字 case，後跟表示式/值可能具有的選擇，後跟冒號。
  4. 如果選擇與表示式匹配，則執行一些程式碼。
  5. break 語句，後跟分號。如果前面的選擇與表示式/值匹配，則瀏覽器在此處停止執行程式碼塊，並繼續執行 switch 語句下方出現的任何程式碼。
  6. 儘可能多的其他情況（第 3-5 點）。

  7. 關鍵字default後跟著與其中一個 case（第 3-5 點）完全相同的程式碼模式，不同之處在於default後面沒有選擇項，並且您不需要break語句，因為無論如何程式碼塊中後面都沒有其他內容需要執行。這是在沒有任何選擇匹配的情況下執行的預設選項。

注意：您不必包含default部分——如果表示式不可能等於未知值，則可以安全地省略它。但是，如果存在這種可能性，則需要包含它來處理未知情況。

switch 示例

讓我們來看一個真實的例子——我們將重寫我們的天氣預報應用程式以使用switch語句。

html
<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
js
const select = document.querySelector("select");
const para = document.querySelector("p");

select.addEventListener("change", setWeather);

function setWeather() {
  const choice = select.value;

  switch (choice) {
    case "sunny":
      para.textContent =
        "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.";
      break;
    case "rainy":
      para.textContent =
        "Rain is falling outside; take a rain coat and an umbrella, and don't stay out for too long.";
      break;
    case "snowing":
      para.textContent =
        "The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.";
      break;
    case "overcast":
      para.textContent =
        "It isn't raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.";
      break;
    default:
      para.textContent = "";
  }
}

注意：您也可以在GitHub 上找到此示例（也可以在此處檢視其執行情況）。

三元運算子

在我們讓您嘗試一些示例之前，我們想向您介紹最後一個語法片段。三元運算子或條件運算子是一個小的語法片段，它測試一個條件，如果條件為true則返回一個值/表示式，如果為false則返回另一個值/表示式——這在某些情況下很有用，並且如果透過true/false條件在兩個選擇之間進行選擇，則可以佔用比if...else塊少得多的程式碼。虛擬碼如下所示

js
condition ? run this code : run this code instead

所以讓我們看一個簡單的例子

js
const greeting = isBirthday
  ? "Happy birthday Mrs. Smith — we hope you have a great day!"
  : "Good morning Mrs. Smith.";

這裡我們有一個名為isBirthday的變數——如果此變數為true，我們將向我們的客人傳送生日快樂資訊；如果不是，我們將向她傳送標準的每日問候。

三元運算子示例

三元運算子不僅用於設定變數值；您還可以執行函式或程式碼行——任何您喜歡的操作。以下即時示例顯示了一個簡單的主題選擇器，其中使用三元運算子應用網站的樣式。

html
<label for="theme">Select theme: </label>
<select id="theme">
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

<h1>This is my website</h1>
js
const select = document.querySelector("select");
const html = document.querySelector("html");
document.body.style.padding = "10px";

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.addEventListener("change", () =>
  select.value === "black"
    ? update("black", "white")
    : update("white", "black"),
);

這裡我們有一個<select>元素來選擇主題（黑色或白色），以及一個簡單的h1來顯示網站標題。我們還有一個名為update()的函式，它以兩種顏色作為引數（輸入）。網站的背景顏色設定為提供的第一個顏色，文字顏色設定為提供的第二個顏色。

最後，我們還有一個onchange事件監聽器，用於執行包含三元運算子的函式。它以一個測試條件開頭——select.value === 'black'。如果此條件返回true，我們將使用黑色和白色的引數執行update()函式，這意味著我們最終將獲得黑色背景顏色和白色文字顏色。如果它返回false，我們將使用白色和黑色的引數執行update()函式，這意味著網站顏色將反轉。

注意：您也可以在GitHub 上找到此示例（也可以在此處檢視其執行情況）。

主動學習：一個簡單的日曆

在這個示例中，您將幫助我們完成一個簡單的日曆應用程式。在程式碼中，您有

  • 一個<select>元素，允許使用者在不同的月份之間進行選擇。
  • 一個onchange事件處理程式，用於檢測<select>選單中選擇的值何時發生更改。
  • 一個名為createCalendar()的函式，用於繪製日曆並在h1元素中顯示正確的月份。

我們需要您在onchange處理程式函式內的// ADD CONDITIONAL HERE註釋下方編寫一個條件語句。它應該

  1. 檢視選定的月份（儲存在choice變數中。這將是值更改後<select>元素的值，例如“January”）。
  2. 將一個名為days的變數設定為等於所選月份的天數。為此，您必須查詢一年中每個月的天數。出於本示例的目的，您可以忽略閏年。

提示

  • 建議您使用邏輯或將多個月組合到一個條件中；其中許多月份共享相同的天數。
  • 考慮一下哪種天數最常見，並將其用作預設值。

如果您犯了錯誤，您可以隨時使用“重置”按鈕重置示例。如果您真的卡住了，請按“顯示解決方案”以檢視解決方案。

主動學習：更多顏色選擇

在本示例中，您將獲取我們之前看到的那個三元運算子示例，並將三元運算子轉換為switch語句，以便我們可以為簡單網站應用更多選擇。檢視<select>——這次您會發現它有兩個主題選項，而不是兩個。您需要在// ADD SWITCH STATEMENT註釋下方新增一個switch語句

  • 它應該接受choice變數作為其輸入表示式。
  • 對於每個case，選擇應該等於可以選擇的一個可能的<option>值，即white、black、purple、yellow或psychedelic。請注意，選項值是小寫的，而選項標籤（如在即時輸出中顯示的那樣）是大寫的。您應該在程式碼中使用小寫值。
  • 對於每個case，都應該執行update()函式，並傳遞兩個顏色值，第一個用於背景顏色，第二個用於文字顏色。請記住，顏色值是字串，因此需要用引號括起來。

如果您犯了錯誤，您可以隨時使用“重置”按鈕重置示例。如果您真的卡住了，請按“顯示解決方案”以檢視解決方案。

測試你的技能！

您已經到達本文的結尾，但您能記住最重要的資訊嗎？在繼續之前，您可以找到一些進一步的測試來驗證您是否保留了這些資訊——請參閱測試您的技能：條件語句。

結論

這就是您現在需要了解的關於 JavaScript 中條件結構的所有內容！如果您有任何不明白的地方，請隨時重新閱讀本文，或聯絡我們尋求幫助。

另請參閱