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

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

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

break 語句:

break語句，這是簡單地用switch語句介紹，用于提前退出循環，打破封閉的花括號。

例子：

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

1. <script type="text/javascript"> 
2. <!-- 
3. var x = 1; 
4. document.write("Entering the loop<br /> "); 
5. while (x < 20) 
6. { 
7. if (x == 5){  
8. break; // breaks out of loop completely 
9. } 
10. x = x + 1; 
11. document.write( x + "<br />"); 
12. } 
13. document.write("Exiting the loop!<br /> "); 
14. //--> 
15. </script> 

這將產生以下結果：

1. Entering the loop 
2. 2 
3. 3 
4. 4 
5. 5 
6. Exiting the loop! 

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

continue 語句:

continue語句告訴解釋器立即啟動循環的下一次迭代，并跳過其余的代碼塊。

當遇到continue語句，程序流程將立即轉移到循環檢查表達式，如果條件保持真，那么就開始下一個迭代，否則控制退出循環。

例子：

這個例子說明使用continue語句同while循環。請注意continue語句用于跳過打印時指數變量x到達5：

1. <script type="text/javascript"> 
2. <!-- 
3. var x = 1; 
4. document.write("Entering the loop<br /> "); 
5. while (x < 10) 
6. { 
7. x = x + 1; 
8. if (x == 5){  
9. continue; // skill rest of the loop body 
10. } 
11. document.write( x + "<br />"); 
12. } 
13. document.write("Exiting the loop!<br /> "); 
14. //--> 
15. </script> 

這將產生以下結果：

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

使用標簽來控制流程：

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

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

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

實例1:

1. <script type="text/javascript"> 
2. <!-- 
3. document.write("Entering the loop!<br /> "); 
4. outerloop: // This is the label name 
5. for (var i = 0; i < 5; i++) 
6. { 
7. document.write("Outerloop: " + i + "<br />"); 
8. innerloop: 
9. for (var j = 0; j < 5; j++) 
10. { 
11. if (j > 3 ) break ; // Quit the innermost loop 
12. if (i == 2) break innerloop; // Do the same thing 
13. if (i == 4) break outerloop; // Quit the outer loop 
14. document.write("Innerloop: " + j + " <br />"); 
15. } 
16. } 
17. document.write("Exiting the loop!<br /> "); 
18. //--> 
19. </script> 

這將產生以下結果：

1. Entering the loop! 
2. Outerloop: 0 
3. Innerloop: 0  
4. Innerloop: 1  
5. Innerloop: 2  
6. Innerloop: 3  
7. Outerloop: 1 
8. Innerloop: 0  
9. Innerloop: 1  
10. Innerloop: 2  
11. Innerloop: 3  
12. Outerloop: 2 
13. Outerloop: 3 
14. Innerloop: 0  
15. Innerloop: 1  
16. Innerloop: 2  
17. Innerloop: 3  
18. Outerloop: 4 
19. Exiting the loop! 

實例2:

1. <script type="text/javascript"> 
2. <!-- 
3. document.write("Entering the loop!<br /> "); 
4. outerloop: // This is the label name 
5. for (var i = 0; i < 3; i++) 
6. { 
7. document.write("Outerloop: " + i + "<br />"); 
8. for (var j = 0; j < 5; j++) 
9. { 
10. if (j == 3){ 
11. continue outerloop; 
12. } 
13. document.write("Innerloop: " + j + "<br />"); 
14. }  
15. } 
16. document.write("Exiting the loop!<br /> "); 
17. //--> 
18. </script> 

這將產生以下結果：

1. Entering the loop! 
2. Outerloop: 0 
3. Innerloop: 0 
4. Innerloop: 1 
5. Innerloop: 2 
6. Outerloop: 1 
7. Innerloop: 0 
8. Innerloop: 1 
9. Innerloop: 2 
10. Outerloop: 2 
11. Innerloop: 0 
12. Innerloop: 1 
13. Innerloop: 2 
14. Exiting the loop!