JavaScript 初學者教學：如何跳出迴圈？用 break 控制迴圈流程
更新日期： 2025 年 7 月 4 日
當我們在撰寫程式時，迴圈（loop） 是一種非常常見的工具，用來重複執行某段程式碼，直到達到某個條件為止。
然而，有時候我們希望在特定情況下提前結束迴圈，而不需要等到迴圈條件變成 false。
在 JavaScript 裡，我們可以使用 break 陳述式來做到這一點。
本文將以簡單範例帶你一步步了解如何使用 break。
為什麼需要 break？
在撰寫程式時，我們經常會用到迴圈來重複執行某段程式碼。
例如：列印數字、尋找資料、處理清單等等。
通常情況下，迴圈會在某個條件不再成立時自動結束，也就是說，當迴圈條件變成 false 時，程式會自然跳出迴圈，不再執行重複的動作。
不過，在一些實務需求中，我們並不總是希望迴圈照既定條件跑完所有次數。
當迴圈執行中遇到某個特定情況時，往往希望立刻結束迴圈、停止後續不必要的運算，以節省效能或避免錯誤。
這時候，break 就成為很重要的工具。
常見情境：提早找到想要的資料
想像以下情境：
✅ 你正在尋找一個清單中第一個符合條件的資料（例如清單中第一個可以被 7 整除的數字）。
✅ 你並不需要把清單裡所有資料都看過，只要找到第一個符合的就好。
如果不使用 break，即使已經找到符合條件的數字，迴圈還是會繼續跑下去，把清單跑完，造成效能浪費。
這在處理大量資料或需要快速反應的程式中，是非常不理想的。
沒有 break 的後果
如果你的程式沒有使用 break，可能會出現以下問題：
- 🔁 效能浪費：迴圈會不必要地檢查更多資料，即便已經找到答案。
- 🌀 無限迴圈風險：如果迴圈條件設計不良，或沒有正確使用
break，可能導致程式一直執行、無法終止，消耗系統資源，甚至讓瀏覽器或應用程式當機。
break 的基本用法
在 JavaScript 中，break 是用來讓程式提前結束一個迴圈的指令。
當程式執行到 break; 時，不會再執行迴圈中剩下的程式碼，也不會繼續進行下一輪的迴圈，而是直接跳出整個迴圈，開始執行迴圈外的程式碼。
語法範例
break;這就是 break 的完整語法，非常簡單易懂。
範例程式：找出第一個大於等於 20 且可以被 7 整除的數字
for (let current = 20; ; current = current + 1) {
if (current % 7 === 0) {
console.log(current);
break;
}
}範例詳解
讓我們一步步拆解這段程式發生了什麼事，幫助你建立完整的執行概念：
1️⃣ 初始化變數
let current = 20我們從數字 20 開始檢查。
2️⃣ 無條件 for 迴圈
for (let current = 20; ; current = current + 1)注意這個 for 迴圈沒有設定條件判斷的部分（中間是空的），代表它會持續無限執行，除非在程式裡用其他方式（像是 break）主動終止。
3️⃣ 每次遞增數字
current = current + 1每執行一次迴圈，current 的值就會增加 1：從 20 → 21 → 22 … 不斷遞增。
4️⃣ 條件檢查
if (current % 7 === 0)每次迴圈都會用 取餘數運算子 % 檢查目前數字是否可以被 7 整除。如果餘數是 0，代表可以整除。
5️⃣ 找到符合條件的數字後執行
console.log(current);
break;當找到第一個可以被 7 整除的數字（例如 21）時，印出該數字，然後執行 break;，立刻跳出迴圈。
執行流程範例
程式實際執行時會這樣運作：
- 第一次：
current = 20→ 20 % 7 = 6（不整除）→ 繼續下一輪 - 第二次：
current = 21→ 21 % 7 = 0（整除！）→ 印出 21 → 跳出迴圈
📝 輸出結果
21因為 21 是第一個大於等於 20 並可以被 7 整除的數字。
注意事項：沒有 break 會怎樣？
如果你忘記寫 break，或者迴圈結束條件設計錯誤，會發生什麼事呢？
來看看下面這段程式：
for (let current = 20; ; current = current + 1) {
if (current % 7 === 0) {
console.log(current);
// 沒有 break
}
}會發生什麼事？
⚠️ 由於迴圈本身沒有設定結束條件，且少了 break，程式會：
✅ 一直遞增數字。
✅ 每次遇到可以被 7 整除的數字都印出來（例如 21、28、35、42…）。
✅ 但因為沒有跳出機制，程式會一直跑下去，無法停止。
為什麼這樣不好？
- 🔋 浪費效能：程式執行無窮無盡，浪費電腦資源。
- 🌀 瀏覽器卡死：在網頁中執行這種程式，可能會讓瀏覽器當機或無回應。
- 😵 無限迴圈陷阱：沒有出口的迴圈是程式開發的常見陷阱之一。
補充：何時該用 break？
以下情境很適合用 break：
✅ 找到第一個符合條件的資料就不需要繼續找的時候。
✅ 需要在某種錯誤或例外狀況時立即結束迴圈。
✅ 控制多層巢狀迴圈時，希望跳出某一層迴圈。
延伸學習：continue 和 break 的差異
在撰寫迴圈程式時，有時候我們需要控制迴圈的流程，決定程式在什麼情況下要停止、跳過或繼續下一輪。除了 break 可以幫助我們提前結束迴圈外，JavaScript 還提供了另一個指令：continue。
雖然 break 和 continue 都會影響迴圈的執行流程，但它們的用途和效果是不同的。
break：完全結束迴圈
當程式執行到 break;，整個迴圈會立刻結束，不再執行任何迴圈內或迴圈後續的程式碼。程式會直接跳出迴圈，繼續執行迴圈外的程式碼。
使用時機：
- 當我們找到需要的資料後，不必再繼續執行後面的迴圈。
- 當遇到特殊條件或錯誤，需要馬上終止迴圈。
continue：略過本輪、繼續下一輪
當程式執行到 continue;，會跳過當前這一輪迴圈剩下的程式碼，直接進入下一輪迴圈的開始。
使用時機：
- 當特定條件發生時，我們希望略過當前的處理邏輯，但仍希望迴圈繼續跑下去。
- 用來「跳過」不需要處理的資料或情況。
範例：使用 continue 跳過特定條件的迴圈執行
for (let i = 0; i < 5; i++) {
if (i === 2) continue;
console.log(i);
}執行流程詳細解析
1️⃣ 第一次迴圈 (i = 0)
條件 i === 2 不成立 → 執行 console.log(0) → 印出 0
2️⃣ 第二次迴圈 (i = 1)
條件 i === 2 不成立 → 執行 console.log(1) → 印出 1
3️⃣ 第三次迴圈 (i = 2)
條件 i === 2 成立 → 執行 continue; →
⚠️ 略過本次 console.log(i)，直接進入下一輪迴圈。
4️⃣ 第四次迴圈 (i = 3)
條件 i === 2 不成立 → 執行 console.log(3) → 印出 3
5️⃣ 第五次迴圈 (i = 4)
條件 i === 2 不成立 → 執行 console.log(4) → 印出 4
輸出結果
0
1
3
4比較：break 和 continue 差異重點整理
| 功能 | break 的行為 | continue 的行為 |
|---|---|---|
| 執行效果 | 完全跳出整個迴圈 | 跳過當前這一輪迴圈剩餘程式碼 |
| 迴圈結束 | 直接停止，程式跳到迴圈外繼續執行 | 不停止，進入下一輪迴圈 |
| 使用時機 | 找到目標或需提早結束迴圈時使用 | 當某條件下不需執行本輪後續程式時使用 |
小結
✅ 你學會了：
- 如何使用
break提前結束迴圈。 - 為什麼
break可以避免無限迴圈。 continue的基本作用，與break的差異。
📝 小提醒：寫迴圈時務必留意結束條件或 break 的使用，避免讓程式掉入無限迴圈喔！