JavaScript 的 break 與 continue

break 與 continue 用來(lái)控制循環(huán)流程。

1. break

break 用來(lái)中斷循環(huán)，在 for 循環(huán)和 while 循環(huán)中都適用。

如：從列表中尋找 id 為 n 的項(xiàng)（每一項(xiàng)的 id 是唯一的）

var list = [{ id: 1 }, { id: 4 }, { id: 9 }, { id: 2 }];

var n = 9;

var i = 0, len = list.length;
for (; i < len; i++) {
  console.log(i);
  if (list[i].id === n) {
    console.log(list[i]);
    break;
  }
}

其實(shí)即便沒(méi)有 break，上面的語(yǔ)句也可以正常執(zhí)行，因?yàn)?id 是唯一的，即便將整個(gè)數(shù)組遍歷完，也只有一個(gè)目標(biāo)項(xiàng)。

但是如果整個(gè)列表有上萬(wàn)條數(shù)據(jù)，除了獲取 id ，還有一些消耗性能的操作，那 break 就變得很關(guān)鍵。
假如最好的情況，尋找的項(xiàng)就在第一項(xiàng)，這時(shí)候碰到 break ，剩下無(wú)用的尋找操作就都不會(huì)執(zhí)行了，也沒(méi)有必要執(zhí)行。

將 break 應(yīng)用在 while 中也是同理，滿足某些條件的時(shí)候用來(lái)中斷 while 循環(huán)。

如：游戲中的怪物產(chǎn)生了 4 次連擊，傷害由四個(gè)隨機(jī) 100 至 2000 的值累加構(gòu)成，假如在累加的傷害過(guò)程中值達(dá)到 5000，則直接取當(dāng)前累加結(jié)果作為最終傷害。

var total = 0; // 累積傷害
var time = 1; // 累加次數(shù)

while (time <= 4) {
  var one = Math.floor(Math.random() * 2001 + 100);

  console.log(one);

  total += one;

  if (total > 5000) {
    break;
  }

  time++;
}

通過(guò) break，可以很容易的達(dá)到這個(gè)需求。

當(dāng)然不使用 break 也是可以的，可以在達(dá)到條件后，將 time 變量累加到一個(gè)循環(huán)條件不成立的情況，也會(huì)跳出循環(huán)，但是建議使用 break ，否則可能還要去控制 break 之后的邏輯，因?yàn)?break 之后不一定就是循環(huán)結(jié)束了，也許還有其他操作。

在 switch 語(yǔ)句中也有 break 參與，詳細(xì)的作用可以參閱 switch 語(yǔ)句章節(jié)。

2. continue

當(dāng)循環(huán)中碰到 continue ，則會(huì)跳過(guò)這次循環(huán)，進(jìn)入下一次循環(huán)。

如：輸出 0 至 100 之間的奇數(shù)

var i;
for (i = 0; i <= 100; i++) {
  if (i % 2 === 0) {
    continue;
  }

  console.log(i);
}

當(dāng)碰到偶數(shù)的時(shí)候，則跳過(guò)這次循環(huán)，反之則為奇數(shù)的情況，會(huì)輸出值。

這個(gè)例子比較簡(jiǎn)單，當(dāng)一個(gè)邏輯復(fù)雜的循環(huán)體出現(xiàn)的時(shí)候，continue 可以讓代碼塊變得稍微簡(jiǎn)潔。

如：對(duì)用戶列表進(jìn)行批量操作，只操作 id (id 一定是數(shù)字) 末尾為 1 的用戶。

// 這是一份偽代碼
var users = [ ... 很多用戶 ]; //

var i, len;
for (i = 0, len = users.length; i < len; i++) {
  var user = users[i];

  if (user.id % 10 === 1) { // 取到末尾
    continue;
  }

  if (user.edition) { // 如果用戶的版本不是免費(fèi)的 0是免費(fèi) 其他則是收費(fèi)
    // 做一些操作
  }

  if (user.money) { // 如果用戶有余額
    // 做一些操作
  }

  // ...
}

像這樣，通過(guò) continue 就可以讓流程更清晰。

在 while 中的應(yīng)用是一樣的，continue 也可以在 while 中跳過(guò)當(dāng)前循環(huán)。

使用 while 輸出 0 至 100 的奇數(shù)：

var num = -1;
while (num < 100) {
  num++;

  if (num % 2 === 0) {
    continue;
  }

  console.log(num);
}

整個(gè)流程與 for 循環(huán)非常相似。

許多代碼規(guī)范不提倡使用 continue ，因?yàn)殚_(kāi)發(fā)者水平的參差不齊，常有開(kāi)發(fā)者在使用 continue 的時(shí)候，讓整體邏輯產(chǎn)生了跳躍性，這不利于未來(lái)的代碼維護(hù)者來(lái)對(duì)代碼做閱讀理解。

3. 小結(jié)

break 和 continue 適用于 for 循環(huán)和 while 循環(huán)。

continue 的使用沒(méi)有 break 頻繁，使用 continue 的時(shí)候需要注意，盡量不要使程序跳躍幅度過(guò)大，不利于后期維護(hù)。

所有需要使用 continue 的地方，都可以不使用 continue 實(shí)現(xiàn)。

switch 語(yǔ)句中也可以使用 break 來(lái)結(jié)束 switch 語(yǔ)句的執(zhí)行。