JS 中 break 與 continue 關鍵詞的使用解析詳情 - while循環,迭代,for循環,Oracle,數據庫長腿大壯博客

JS 中 break 與 continue 關鍵詞的使用解析

在 JavaScript 中，break和continue是專門用於控制循環流程的核心關鍵詞，二者均作用於for、while、do...while循環及switch語句，但核心行為截然不同：break用於終止整個循環 /switch，continue用於跳過當前循環迭代，直接進入下一次。掌握這兩個關鍵詞的用法，能精準控制循環執行邏輯，避免無效迭代，提升代碼效率。

一、break 的基礎用法

break的核心作用是 “中斷”—— 執行到break時，立即終止當前所在的循環或switch語句，程序跳轉到循環 /switch 之後的代碼繼續執行。

1. 終止普通循環（for/while/do...while）

// 1. 終止for循環
for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // 當i=3時，終止整個循環
  }
  console.log("for循環i：", i);
}
// 輸出：
// for循環i： 0
// for循環i： 1
// for循環i： 2

// 2. 終止while循環
let j = 0;
while (j < 5) {
  if (j === 2) {
    break; // 當j=2時，終止循環
  }
  console.log("while循環j：", j);
  j++;
}
// 輸出：
// while循環j： 0
// while循環j： 1

// 3. 終止do...while循環
let k = 0;
do {
  if (k === 1) {
    break; // 當k=1時，終止循環（do...while至少執行一次）
  }
  console.log("do...while循環k：", k);
  k++;
} while (k < 5);
// 輸出：
// do...while循環k： 0

2. 終止 switch 語句

switch語句中，break用於終止當前case分支，避免 “case 穿透”（即執行完當前 case 後繼續執行後續 case）。

const fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("蘋果");
    break; // 終止case，避免執行後續分支
  case "banana":
    console.log("香蕉");
    break;
  default:
    console.log("未知水果");
}
// 輸出：蘋果

// 無break的case穿透示例
const num = 2;
switch (num) {
  case 1:
    console.log("一");
  case 2:
    console.log("二"); // 執行此處
  case 3:
    console.log("三"); // 無break，繼續執行
  default:
    console.log("其他數字");
}
// 輸出：
// 二
// 三
// 其他數字

3. 終止嵌套循環（配合標籤）

默認情況下，break僅終止當前層級的循環；若需終止外層循環，可通過 “標籤（label）” 實現精準控制。

// 定義外層循環標籤
outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // 終止外層循環（outerLoop標籤）
    }
    console.log(`i=${i}, j=${j}`);
  }
}
// 輸出：
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

二、continue 的基礎用法

continue的核心作用是 “跳過”—— 執行到continue時，立即跳過當前循環迭代的剩餘代碼，直接進入下一次循環（先執行循環條件判斷）。

1. 跳過普通循環迭代

// 1. for循環中跳過迭代
for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // 跳過i=2的迭代，直接執行i++
  }
  console.log("for循環i：", i);
}
// 輸出：
// for循環i： 0
// for循環i： 1
// for循環i： 3
// for循環i： 4

// 2. while循環中跳過迭代（注意：需手動遞增變量，避免死循環）
let j = 0;
while (j < 5) {
  j++; // 先遞增，再判斷（避免死循環）
  if (j === 3) {
    continue; // 跳過j=3的迭代
  }
  console.log("while循環j：", j);
}
// 輸出：
// while循環j： 1
// while循環j： 2
// while循環j： 4
// while循環j： 5

// 3. do...while循環中跳過迭代
let k = 0;
do {
  k++;
  if (k === 2) {
    continue; // 跳過k=2的迭代
  }
  console.log("do...while循環k：", k);
} while (k < 5);
// 輸出：
// do...while循環k： 1
// do...while循環k： 3
// do...while循環k： 4
// do...while循環k： 5

2. 跳過嵌套循環的指定層級（配合標籤）

與break類似，continue也可通過標籤跳過外層循環的當前迭代，直接進入外層循環的下一次。

outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (j === 1) {
      continue outerLoop; // 跳過外層循環的當前迭代，i直接+1
    }
    console.log(`i=${i}, j=${j}`);
  }
}
// 輸出：
// i=0, j=0
// i=1, j=0
// i=2, j=0

三、break/continue 的核心應用場景

1. 查找目標值（break）

在數組 / 對象中查找目標值時，找到後立即用break終止循環，避免無效迭代，提升性能。

// 場景：在數組中查找第一個大於10的數
const numbers = [5, 8, 12, 15, 9];
let target = null;
for (const num of numbers) {
  if (num > 10) {
    target = num;
    break; // 找到後立即終止循環
  }
}
console.log("第一個大於10的數：", target); // 輸出：12

2. 過濾循環數據（continue）

遍歷數據時，跳過不符合條件的項，僅處理符合條件的數據，簡化邏輯。

// 場景：遍歷數組，僅輸出偶數
const nums = [1, 2, 3, 4, 5, 6];
for (const n of nums) {
  if (n % 2 !== 0) {
    continue; // 跳過奇數，直接進入下一次迭代
  }
  console.log("偶數：", n);
}
// 輸出：
// 偶數： 2
// 偶數： 4
// 偶數： 6

3. 終止無限循環（break）

在while(true)無限循環中，通過break結合條件判斷，實現 “滿足條件時退出循環” 的邏輯。

// 場景：模擬用户輸入，輸入"exit"時退出
let input;
while (true) {
  input = prompt("請輸入內容（輸入exit退出）"); // 瀏覽器環境
  if (input === "exit") {
    break; // 終止無限循環
  }
  console.log("你輸入了：", input);
}

4. 處理 switch 分支（break）

switch語句中必須配合break使用，避免 case 穿透導致的邏輯錯誤（除非刻意利用穿透）。

// 場景：根據分數等級輸出評語
const grade = "B";
switch (grade) {
  case "A":
    console.log("優秀");
    break;
  case "B":
    console.log("良好");
    break;
  case "C":
    console.log("及格");
    break;
  default:
    console.log("不及格");
}
// 輸出：良好

四、break/continue 的注意事項

1. 避免死循環（continue 在 while/do...while 中的坑）

在while/do...while循環中使用continue時，需確保循環變量在continue前完成遞增 / 遞減，否則會導致死循環。

// 錯誤示例：j的遞增在continue後，導致死循環
let j = 0;
while (j < 5) {
  if (j === 2) {
    continue; // j永遠停留在2，循環無法結束
  }
  console.log(j);
  j++;
}

// 正確示例：先遞增，再判斷
let j = 0;
while (j < 5) {
  j++;
  if (j === 2) {
    continue;
  }
  console.log(j);
}

2. 標籤的使用規範

標籤需定義在循環 /switch 語句前，且標籤名需符合 JS 標識符規則（不能是關鍵字）；標籤僅作用於最近的循環 /switch，避免嵌套標籤導致邏輯混亂。

// 不推薦：嵌套標籤，可讀性差
label1: for (let i = 0; i < 2; i++) {
  label2: for (let j = 0; j < 2; j++) {
    if (i + j === 1) {
      break label1;
    }
    console.log(`i=${i}, j=${j}`);
  }
}

3. 不適用於 forEach 循環

break和continue無法終止 / 跳過Array.prototype.forEach循環（forEach 本質是函數調用，break/continue會報錯），需改用for/for...of循環，或通過return跳過 forEach 的當前迭代。

// 錯誤示例：forEach中使用break
const arr = [1,2,3];
arr.forEach(item => {
  if (item === 2) {
    break; // 報錯：Uncaught SyntaxError: Illegal break statement
  }
  console.log(item);
});

// 正確示例1：改用for...of循環
for (const item of arr) {
  if (item === 2) {
    break;
  }
  console.log(item);
}

// 正確示例2：forEach中用return跳過當前迭代
arr.forEach(item => {
  if (item === 2) {
    return; // 跳過當前迭代，等價於continue
  }
  console.log(item);
});

五、break/continue 與 return 的對比

關鍵詞	作用範圍	核心效果	適用場景
break	循環 /switch	終止當前循環 /switch，無返回值	找到目標值、終止無限循環
continue	循環	跳過當前迭代，繼續下一次	過濾數據、跳過無效項
return	函數	終止整個函數，可返回值	函數提前退出、返回結果

示例對比：

function testControl() {
  // break：終止循環，函數繼續執行
  for (let i = 0; i < 3; i++) {
    if (i === 1) break;
    console.log("break示例：", i);
  }

  // continue：跳過迭代，循環繼續
  for (let j = 0; j < 3; j++) {
    if (j === 1) continue;
    console.log("continue示例：", j);
  }

  // return：終止函數，後續代碼不執行
  return "函數終止";
  console.log("這行代碼不會執行");
}

console.log(testControl());
// 輸出：
// break示例： 0
// continue示例： 0
// continue示例： 2
// 函數終止

break和continue是循環流程控制的 “左右手”——break負責 “及時止損”（終止無效循環），continue負責 “精準過濾”（跳過無效迭代）。掌握二者的區別與用法，結合for/while循環和標籤的使用，能讓循環邏輯更高效、更易讀；同時需注意 forEach 的侷限性，避免語法錯誤，確保代碼健壯性。

長腿大壯博客

長腿大壯博客

博客 / 詳情