詳解JavaScript中迴圈控制語句的用法

詳解JavaScript中迴圈控制語句的用法

 　　這篇文章主要介紹了詳解JavaScript中迴圈控制語句的用法,包括break語句和continue語句的使用方法,需要的朋友可以參考下

　　JavaScript提供完全控制來處理迴圈和switch語句。可能有一種情況，當你需要退出一個迴圈，但未達到其底部。也可能有一種情況，當要跳過的碼塊的一部分，並直接開始下一個迭代。

　　為了處理這些情況下，JavaScript提供了break和continue語句。這些語句是用來馬上退出任何迴圈或啟動迴圈的下一次迭代。

　　break 語句:

　　break語句，這是簡單地用switch語句介紹，用於提前退出迴圈，打破封閉的花括弧。

　　例子：

　　這個例子說明了如何使用break語句同while迴圈。請注意迴圈打破了初期由x到5，document.write(..) 語句的正下方，以右大括弧：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript"> <!-- var x = 1; document.write("Entering the loop<br /> "); while (x < 20) { if (x == 5){ break; // breaks out of loop completely } x = x + 1; document.write( x + "<br />"); } document.write("Exiting the loop!<br /> "); //--> </script>

　　這將產生以下結果：

　　?

1 2 3 4 5 6

Entering the loop 2 3 4 5 Exiting the loop!

　　我們已經看到break語句在switch語句中使用。

　　continue 語句:

　　continue語句告訴解譯器立即啟動迴圈的下一次迭代，並跳過其餘的代碼塊。

　　當遇到continue語句，程式流程將立即轉移到迴圈檢查運算式，如果條件保持真，那麼就開始下一個迭代，否則控制退出迴圈。

　　例子：

　　這個例子說明使用continue語句同while迴圈。請注意continue語句用於跳過列印時指數變數x到達5：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript"> <!-- var x = 1; document.write("Entering the loop<br /> "); while (x < 10) { x = x + 1; if (x == 5){ continue; // skill rest of the loop body } document.write( x + "<br />"); } document.write("Exiting the loop!<br /> "); //--> </script>

　　這將產生以下結果：

　　?

1 2 3 4 5 6 7 8 9 10

Entering the loop 2 3 4 6 7 8 9 10 Exiting the loop!

　　使用標籤來控制流程程：

　　從JavaScript1.2開始，標籤可以與break及continue使用，繼續更精確地控制流程程。

　　標籤是簡單的標識符隨後被施加到一個語句或代碼塊冒號。看到兩個不同的例子來瞭解標籤使用突破，並繼續。

　　註：分行符號是不是繼續還是分手聲明，其標籤名稱之間允許的。此外，不應該有一個標籤名稱和相關聯的迴路之間的任何其它聲明。

　　執行個體1:

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script type="text/javascript"> <!-- document.write("Entering the loop!<br /> "); outerloop: // This is the label name for (var i = 0; i < 5; i++) { document.write("Outerloop: " + i + "<br />"); innerloop: for (var j = 0; j < 5; j++) { if (j > 3 ) break ; // Quit the innermost loop if (i == 2) break innerloop; // Do the same thing if (i == 4) break outerloop; // Quit the outer loop document.write("Innerloop: " + j + " <br />"); } } document.write("Exiting the loop!<br /> "); //--> </script>

　　這將產生以下結果：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Entering the loop! Outerloop: 0 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 1 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 2 Outerloop: 3 Innerloop: 0 Innerloop: 1 Innerloop: 2 Innerloop: 3 Outerloop: 4 Exiting the loop!

　　執行個體2:

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script type="text/javascript"> <!-- document.write("Entering the loop!<br /> "); outerloop: // This is the label name for (var i = 0; i < 3; i++) { document.write("Outerloop: " + i + "<br />"); for (var j = 0; j < 5; j++) { if (j == 3){ continue outerloop; } document.write("Innerloop: " + j + "<br />"); } } document.write("Exiting the loop!<br /> "); //--> </script>

　　這將產生以下結果：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Entering the loop! Outerloop: 0 Innerloop: 0 Innerloop: 1 Innerloop: 2 Outerloop: 1 Innerloop: 0 Innerloop: 1 Innerloop: 2 Outerloop: 2 Innerloop: 0 Innerloop: 1 Innerloop: 2 Exiting the loop!