iT邦幫忙

0

【30 天JavaScript 實戰 】 Day 4|if/else、switch、for/while、break/continue

2025-10-07 21:50:41150 瀏覽
  • 分享至 

  • xImage
  •  

昨天我們學會了變數和運算子,今天要讓程式「有判斷力」!
去根據不同條件,執行不同動作~


今日的目標:

  • if...else 判斷式
  • switch...case 多重條件判斷
  • for / while 迴圈
  • break & continue

1. if...else 判斷式

if 只會執行第一個「條件為真」的區塊,
多個條件可以用 else if 串起來,
若都不符合,才會執行 else~
(如果不是多個條件用if...else就可以,不一定要用到else if喔)

let score = 85;

if (score >= 90) {
  console.log("太棒了!A等");
} else if (score >= 80) {
  console.log("不錯喔!B等");
} else {
  console.log("再加油~");
} //印出 不錯喔!B等

2. switch...case 多重條件判斷

如果有一堆「相同類型」的判斷,例如菜單或等級,用switch會更清楚:

let fruit = "banana";

switch (fruit) {
  case "apple":
    console.log("蘋果一顆 30 元");
    break;
  case "banana":
    console.log("香蕉一根 20 元");
    break;
  case "orange":
    console.log("橘子一顆 25 元");
    break;
  default:
    console.log("沒有這種水果 😅");
}

case 是條件分支,符合時會執行。
default 是預設情況,當前面都不符合時執行。
而break 是「跳出 switch」,如果沒有打就會繼續往下執行到底喔!

沒加 break 的情況
程式會從case "B"開始,一路往下貫穿。

let grade = "B";

switch (grade) {
  case "A":
    console.log("滿分優秀!");
  case "B":
    console.log("表現不錯!");
  case "C":
    console.log("還行,再努力!");
  default:
    console.log("成績未知");
}

輸出:

表現不錯!
還行,再努力!
成績未知

3. for / while 迴圈

「迴圈」就是讓程式重複執行一段程式碼,直到條件不成立為止。
常見的有:

  • for 適合「知道要重複幾次」的情境
  • while 適合「不知道要重複幾次,但知道什麼時候該停」的情境
  • do...while 適合「先做再判斷」的情境

其實大多數迴圈都能互相改寫(for ↔ while ↔ do…while),只是語意與情境不同、可讀性也會受影響~

用for迴圈印出 1 到 5

for (let i = 1; i <= 5; i++) {
  console.log("第 " + i + " 次");
}

結構拆解:

  • 初始值:let i = 1
  • 條件判斷:i <= 5
  • 每回合結束後做:i++

while 迴圈
這裡我們不知道使用者要嘗試幾次才輸入對,所以用 while 讓程式持續等待正確條件。

let password = "";
while (password !== "1234") {
  password = prompt("請輸入密碼:");
}
console.log("登入成功!");

結構拆解:

  • 初始值: password = ""
  • 條件判斷:password !== "1234"
  • 每回合結束後做:password = prompt("請輸入密碼:")

do...while
至少會執行一次,不論條件一開始對不對:

do {
  // 至少執行一次
} while (條件);

小心無限迴圈!
若條件永遠為真,程式會卡死。

for 與 while 的差別與使用時機

類型 適合情境 特點 範例
for 迴圈 已經知道要重複幾次的情況 「重複次數固定」時最方便。 印出 1 到 10、重複跑陣列元素
while 迴圈 不確定要跑幾次,只知道什麼時候停 「條件成立就繼續」,直到不成立才結束。 讀取使用者輸入、等待伺服器回應、隨機抽數直到符合條件

4. break & continue

有時候,我們想在迴圈中「中途離場」或「跳過某次」。
這時候就可以使用break和continue來控制~

break → 完全離開整個迴圈。
continue → 跳過當前這次,直接進入下一圈。

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // 跳過3
  if (i === 5) break;   // 停在5
  console.log(i);
}
// 輸出:1, 2, 4

/images/emoticon/emoticon07.gif


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言