初學者指南：深入了解 JavaScript 的 continue 與 break 語句

最後更新：2024年10月16日
JavaScript

在學習 JavaScript 的過程中，控制流程是非常重要的一部分。

continue 和 break 是兩個常用的控制語句，能夠改變循環（如 for、while）的執行流程。

本文將為新手詳細介紹這兩個語句的用法和差異，並通過示例幫助你更好地理解它們。

break 語句

功能說明

break 語句用於立即終止最內層的循環或 switch 語句，程式將跳出該結構並繼續執行後續代碼。

使用範例

範例 1：在循環中使用 break

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

輸出：

1
2
3
4

解釋：

當 i 等於 5 時，break 語句被觸發，循環立即終止，因此只輸出了 1 到 4。

範例 2：在 switch 語句中使用 break

let day = 3;

switch (day) {
    case 1:
        console.log('星期一');
        break;
    case 2:
        console.log('星期二');
        break;
    case 3:
        console.log('星期三');
        break;
    default:
        console.log('未知的日期');
}

輸出：

星期三

解釋：

break 語句在每個 case 後，用於防止執行落入下一個 case。

continue 語句

功能說明

continue 語句用於跳過本次迭代的剩餘代碼，直接開始下一次迭代。

循環不會終止，只是跳過當前的一次執行。

使用範例

範例 1：在循環中使用 continue

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);
}

輸出：

1
2
4
5

解釋：

當 i 等於 3 時，continue 語句被觸發，跳過當前迭代，所以沒有輸出 3。

break 與 continue 的區別

  • 作用範圍：
    • break：終止整個循環或 switch 語句。
    • continue：僅跳過當前迭代，循環會繼續進行。
  • 使用情境：
    • 使用 break 當需要在某個條件滿足時，立即退出循環。
    • 使用 continue 當需要在某個條件滿足時，跳過本次迭代的後續代碼。

實際應用示例

範例：篩選數組中的奇數

let numbers = [1, 2, 3, 4, 5, 6];

for (let num of numbers) {
    if (num % 2 === 0) {
        continue; // 偶數，跳過
    }
    console.log(num); // 只輸出奇數
}

輸出：

1
3
5

範例：尋找數組中的特定值

let fruits = ['蘋果', '香蕉', '櫻桃', '橙子'];

for (let fruit of fruits) {
    if (fruit === '櫻桃') {
        console.log('找到櫻桃，停止搜尋。');
        break;
    }
    console.log('正在檢查：' + fruit);
}

輸出：

正在檢查：蘋果
正在檢查：香蕉
找到櫻桃，停止搜尋。

注意事項

  • 嵌套循環中的使用： break 和 continue 只會影響到它們所在的最內層循環。要退出多層循環，可以使用標籤（label）語句，但不推薦，因為會降低代碼可讀性。
  • 避免過度使用： 雖然 break 和 continue 很方便，但過度使用可能使代碼難以理解。建議在確有必要時才使用，並保持代碼的清晰度。

總結

break 和 continue 是 JavaScript 中強大的控制流程工具。

break 用於終止循環或 switch 語句，而 continue 用於跳過當前迭代並進入下一次循環。

理解它們的用法有助於你更有效地控制程式的執行流程。

希望這篇文章能幫助你更好地理解 break 和 continue，在實際開發中靈活運用它們，提升程式的效率和可讀性。

參考資料