位置:首頁 > Web開發 > Javascript教學 > JavaScript循環控製

JavaScript循環控製

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

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

break 語句:

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

例子:

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

<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>

這將產生以下結果:

Entering the loop
2
3
4
5
Exiting the loop!

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

continue 語句:

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

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

例子:

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

<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>

這將產生以下結果:

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

 

使用標簽來控製流程:

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

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

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

實例1:

<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>

這將產生以下結果:

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:

<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>

這將產生以下結果:

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!