iT邦幫忙

2025 iThome 鐵人賽

DAY 13
0
Modern Web

Modern Web:從基礎、框架到前端學習系列 第 13

Day 13:JavaScript 迴圈 (Loops) 與迭代

  • 分享至 

  • xImage
  •  

為什麼要用迴圈?

如果要重複做一件事,與其寫十次console.log(),不如用迴圈讓程式自動跑。


1. for 迴圈

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

輸出:

第 1 次迴圈
第 2 次迴圈
第 3 次迴圈
第 4 次迴圈
第 5 次迴圈

2. while 迴圈

let i = 1;
while (i <= 5) {
  console.log("迴圈次數:" + i);
  i++;
}

3. do...while 迴圈(至少會執行一次)

let x = 1;
do {
  console.log("現在的值:" + x);
  x++;
} while (x <= 3);

4. 巢狀迴圈(迴圈裡面有迴圈)

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 2; j++) {
    console.log("i=" + i + ", j=" + j);
  }
}

5. 迴圈控制

  • break → 強制跳出迴圈
  • continue → 跳過當前這一次,繼續下一圈
for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // 跳過 3
  if (i === 5) break;    // 停止在 4
  console.log(i);
}

小練習 💡

  1. 用 for 迴圈印出1~10 的所有數字
  2. 用 while 迴圈計算1~100 的總和
  3. 寫一個九九乘法表(巢狀迴圈)。

👉 明天(Day 14),我們會進入JavaScript 陣列 (Array) 基礎,學會如何儲存多筆資料並操作它們。


上一篇
Day 12:JavaScript 運算子與條件判斷
下一篇
Day14:JavaScript DOM 基礎入門
系列文
Modern Web:從基礎、框架到前端學習15
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言