Articles
JavaScript 簡介
JavaScript中的條件分支

JavaScript中的條件分支

本文介紹了JavaScript中的條件分支。

YouTube Video

JavaScript中的if語句

基本語法 

1if (condition) {
2    // Code that executes if the condition is true
3}

if語句是JavaScript中的一個基本控制結構，用於根據特定條件是真還是假來控制代碼的執行。如果條件為真，則執行代碼塊；如果為假，則跳過。

範例 

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

在此範例中，由於 x 的值大於 5，因此在控制台中顯示 x 大於 5。

else語句

基本語法 

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

通過在if語句後使用else語句，可以指定當條件為假時執行的代碼。

範例 

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

在此情況下，因為 x 小於 5，所以顯示 "x 是 5 或更小"。

else if語句

基本語法 

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

如果需要檢查多個條件，可以使用else if。如果初始if條件為假，則檢查下一個條件。

範例 

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

在此情況下，由於x等於5，顯示"x是5"。

三元運算符 (條件運算符)

語法 

1condition ? valueIfTrue : valueIfFalse

如果想以更簡潔的方式編寫if語句，可以使用三元運算符。

範例 

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

在此情況下，由於 number 是 7，所以顯示 Odd。

總結

  • if語句根據條件是真還是假控制執行哪段代碼。
  • 可以使用else指定條件為假時的行為。
  • 可以使用else if檢查多個條件。
  • 還可以使用三元運算符以簡潔的方式編寫條件分支。

JavaScript中的switch語句

基本語法 

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

JavaScript中的switch語句用於比較一個表達式 (通常是變量) 與多個值 (案例) 並執行相應的代碼。與if語句類似，它執行條件分支，但在存在多個條件時通常更易讀。

範例 

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

在此示例中，因為 fruit 是 "apple"，所以在控制台中顯示 "This is an apple"。

break の役割

在每個 case 的結尾插入 break，可於完成該 case 後退出 switch 語句。如果未編寫 break，則下一個 case 也會被執行（這稱為 fall-through）。

Fall-Through 的示例 

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

在此情況下，由於 color 是 "red"，且在 "This is red" 之後沒有 break，因此 "This is blue" 和 "Unknown color" 也會被顯示。

使用 default

default 是當所有 case 都無法匹配時執行的部分。這相當於 if 語句中的 else。

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

在此情況下，由於 animal 是 "dog"，它符合 default，因此顯示 "Unknown animal"。

處理具有相同 case 的多個值

如果希望對多個 case 執行相同的操作，可以將它們連續編寫。

範例 

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

在此示例中，如果 day 是 1，則顯示 "Weekday"。

switch vs. if

  • if 語句適合檢查複雜條件或範圍。例如，像變量 x 大於等於 10 並且小於等於 20 這樣的複雜條件無法用 switch 表達。
  • 當檢查值是否與特定值匹配時，使用 switch 語句有時能讓程式碼更具可讀性。

總結

  • switch 語句用於簡潔地撰寫多值的條件分支。
  • 如果在每個 case 的結尾沒有使用 break，則下一個 case 也可能會被執行（連續執行）。
  • 當所有 case 都無法匹配時，將執行 default。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

在 JavaScript 中的可變性與不可變性JavaScript 條件語句的最佳實踐