對比JavaScript中的Continue和Break

Fundebug發表於2019-01-23
JavaScript

譯者按： 最好是不用，不過基礎知識要掌握。

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

對比JavaScript中的Continue和Break

在這篇文章中，我們會詳細介紹continue和break，分析它們的相同和不同之處，甚至用一些可執行的例項。

continue和break都是用於控制迴圈的。我們先來看一下他們的定義：

  • Continue: 結束當前的執行，並繼續下一個迴圈。
  • Break: 終止整個迴圈的執行。

注意：break還可以用在switch中，本文主要介紹在迴圈中的使用。

Continue

考慮如下程式碼：

for (let i = 1; i <= 10; i++){
  console.log(i);
}
複製程式碼

我們有一個簡單的for迴圈，該迴圈會執行10次，i的值從1一直遞增到10。每一次迴圈將當前i的值列印出來。執行結果如下：

1
2
3
4
5
6
7
8
9
10
複製程式碼

如果我們只想列印偶數，應該如何做呢？使用continue可以很容易搞定。在每一次迴圈我們檢查是否為奇數，如果是，則跳出此次迴圈，繼續下一次。如果不是，則列印i的值。

for (let i = 1; i <= 10; i++){
  if (i % 2 == 1) continue;
  console.log(i);
}
複製程式碼

執行結果如下：

2
4
6
8
10
複製程式碼

記住，當使用continue關鍵字的時候，該次迴圈立即結束執行，continue往後的程式碼不再被執行。

Break

我們使用相同的迴圈來做例子：

for (let i = 1; i <= 10; i++){
  console.log(i);
}
複製程式碼

如果我們想在i的值為6的時候，終止整個迴圈。那麼我們可以使用break：

for (let i = 1; i <= 10; i++){
  if (i == 6) break;
  console.log(i);
}
複製程式碼

如果執行上面的程式碼，for迴圈會在i為6的時候終止執行，因此6也不會被列印到控制檯。

1
2
3
4
5
複製程式碼

JavaScript太靈(gui)活(yi)了，出了BUG你也不知道，不妨接入Fundebug線上實時監控。

巢狀For迴圈

值得注意的是，break和continue都只對當前迴圈有效。如果我們有巢狀迴圈，那麼就要很小心了。不妨來看下面的例子：

for (let i = 0; i < 5; i++) {
   if (i % 2 == 0) continue;
   for (let j = 0; j < 5; j++) {
      if (j == 2) break;
      console.log(`i = ${i}, j = ${j}`);
   }
}
複製程式碼

這裡我們有兩個迴圈，每一個都會執行5次(0~4)。外層的迴圈在i是偶數的時候，跳過當前迴圈執行下一個。也就是說只有i為1或則3的時候，才會執行內層的迴圈。

內層的迴圈只要j的值為2，就終止了。因此，j只有0和1。

最終結果如下：

i = 1, j = 0
i = 1, j = 1
i = 3, j = 0
i = 3, j = 1
複製程式碼

評論精選

  • [Nicu Micleușanu]：最好的策略是break和continue都不要用。如果你用了，證明你哪裡搞錯了，嘗試換個方法。

  • [Brandon Morelli]： 我同意用函式式的方法更好，來避免使用for迴圈。不過呢，理解continue和break的異同點還是很重要的，萬一哪天遇到了呢。

版權宣告:
轉載時請註明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/03/05/javascript-continue-vs-break/

相關文章