- JavaScript從入門到精通（微視頻精編版）
- 明日科技
- 2096字
- 2020-09-01 15:02:22
3.2 循環語句
視頻講解
在日常生活中，有時需要反復地執行某些操作。例如，運動員要完成10000米的比賽，需要在跑道上跑25圈，這就是循環的一個過程。類似這樣反復執行同一操作的情況，在程序設計中經常會遇到，為了滿足這樣的開發需求，JavaScript提供了循環語句。所謂循環語句就是在滿足條件的情況下反復地執行某一個操作。循環語句主要包括while語句、do…while語句和for語句，下面分別進行講解。
3.2.1 while語句
while循環語句也稱為前測試循環語句，它是利用一個條件來控制是否要繼續重復執行這個語句。while循環語句的語法格式如下：
while(表達式){
語句
}
參數說明。
表達式：一個包含比較運算符的條件表達式，用來指定循環條件。
語句：用來指定循環體，在循環條件的結果為true時，重復執行。
說明
while循環語句之所以命名為前測試循環，是因為它要先判斷此循環的條件是否成立，然后才進行重復執行的操作。也就是說，while循環語句執行的過程是先判斷條件表達式，如果條件表達式的值為true，則執行循環體，并且在循環體執行完畢后，進入下一次循環，否則退出循環。
while循環語句的執行流程如圖3.11所示。
圖3.11 while循環語句的執行流程
例如，應用while語句輸出1~10這10個數字的代碼如下：
01 var i = 1; //聲明變量
02 while(i<=10){ //定義while語句
03 document.write(i+"\n"); //輸出變量i的值
04 i++; //變量i自加1
05 }
運行結果為：
1 2 3 4 5 6 7 8 9 10
注意
在使用while語句時，一定要保證循環可以正常結束，即必須保證條件表達式的值存在為false的情況，否則將形成死循環。
【例3.06】運動員參加5000米比賽，已知標準的體育場跑道一圈是400米，應用while語句計算出在標準的體育場跑道上完成比賽需要跑完整的多少圈。代碼如下：（實例位置：資源包\源碼\03\3.06）
01 <script type="text/javascript">
02 var distance=400; //定義表示距離的變量
03 var count=0; //定義表示圈數的變量
04 while(distance<=5000){
05 count++; //圈數加1
06 distance=(count+1)*400; //每跑一圈就重新計算距離
07 }
08 document.write("5000米比賽需要跑完整的"+count+"圈"); //輸出最后的圈數
09 </script>
運行本實例，結果如圖3.12所示。
圖3.12 輸出5000米比賽的完整圈數
3.2.2 do…while語句
do…while循環語句也稱為后測試循環語句，它也是利用一個條件來控制是否要繼續重復執行這個語句。與while循環所不同的是，它先執行一次循環語句，然后再去判斷是否繼續執行。do…while循環語句的語法格式如下：
do{
語句
} while(表達式);
參數說明。
語句：用來指定循環體，循環開始時首先被執行一次，然后在循環條件的結果為true時，重復執行。
表達式：一個包含比較運算符的條件表達式，用來指定循環條件。
說明
do…while循環語句執行的過程是：先執行一次循環體，然后再判斷條件表達式，如果條件表達式的值為true，則繼續執行，否則退出循環。也就是說，do…while循環語句中的循環體至少被執行一次。
do…while循環語句的執行流程如圖3.13所示。
圖3.13 do…while循環語句的執行流程
do…while循環語句同while循環語句類似，也常用于循環執行的次數不確定的情況。
注意
do…while語句結尾處的while語句括號后面有一個分號“;”，為了養成良好的編程習慣，建議讀者在書寫的過程中不要將其遺漏。
例如，應用do…while語句輸出1~10這10個數字的代碼如下：
01 var i = 1; //聲明變量
02 do{ //定義do...while語句
03 document.write(i+"\n"); //輸出變量i的值
04 i++; //變量i自加1
05 }while(i<=10);
運行結果為：
1 2 3 4 5 6 7 8 9 10
do…while語句和while語句的執行流程很相似。由于do…while語句在對條件表達式進行判斷之前就執行一次循環體，因此do…while語句中的循環體至少被執行一次，下面的代碼說明了這兩種語句的區別。
01 var i = 1; //聲明變量
02 while(i>1){ //定義while語句，指定循環條件
03 document.write("i的值是"+i); //輸出i的值
04 i--; //變量i自減1
05 }
06 var j = 1; //聲明變量
07 do{ //定義do...while語句
08 document.write("j的值是"+j); //輸出變量j的值
09 j--; //變量j自減1
10 }while(j>1);
運行結果為：
j的值是1
【例3.07】使用do…while語句計算1+2+…+100的和，并在頁面中輸出計算后的結果。代碼如下：（實例位置：資源包\源碼\03\3.07）
01 <script type="text/javascript">
02 var i = 1; //聲明變量并對變量初始化
03 var sum = 0; //聲明變量并對變量初始化
04 do{
05 sum+=i; //對變量i的值進行累加
06 i++; //變量i自加1
07 }while(i<=100); //指定循環條件
08 document.write("1+2+…+100="+sum); //輸出計算結果
09 </script>
運行本實例，結果如圖3.14所示。
圖3.14 計算1+2+…+100的和
3.2.3 for語句
for循環語句也稱為計次循環語句，一般用于循環次數已知的情況，在JavaScript中應用比較廣泛。for循環語句的語法格式如下：
for(初始化表達式;條件表達式;迭代表達式){
語句
}
參數說明。
初始化表達式：初始化語句，用來對循環變量進行初始化賦值。
條件表達式：循環條件，一個包含比較運算符的表達式，用來限定循環變量的邊限。如果循環變量超過了該邊限，則停止該循環語句的執行。
迭代表達式：用來改變循環變量的值，從而控制循環的次數，通常是對循環變量進行增大或減小的操作。
語句：用來指定循環體，在循環條件的結果為true時，重復執行。
說明
for循環語句執行的過程是，先執行初始化語句，然后判斷循環條件，如果循環條件的結果為true，則執行一次循環體，否則直接退出循環，最后執行迭代語句，改變循環變量的值，至此完成一次循環；接下來將進行下一次循環，直到循環條件的結果為false，才結束循環。
for循環語句的執行流程如圖3.15所示。
圖3.15 for循環語句的執行流程
例如，應用for語句輸出1~10這10個數字的代碼如下：
01 for(var i=1;i<=10;i++){ //定義for循環語句
02 document.write(i+"\n"); //輸出變量i的值
03 }
運行結果為：
1 2 3 4 5 6 7 8 9 10
在for循環語句的初始化表達式中可以定義多個變量。例如，在for語句中定義多個循環變量的代碼如下：
01 for(var i=1,j=6;i<=6,j>=1;i++,j--){
02 document.write(i+"\n"+j); //輸出變量i和j的值
03 document.write("<br>"); //輸出換行標記
04 }
運行結果為：
1 6
2 5
3 4
4 3
5 2
6 1
注意
在使用for語句時，也一定要保證循環可以正常結束，也就是必須保證循環條件的結果存在為false的情況，否則循環體將無休止地執行下去，從而形成死循環。例如，下面的循環語句就會造成死循環，原因是i永遠大于等于1。
01 for(i=1;i>=1;i++){ //定義for循環語句
02 alert(i); //輸出變量i的值
03 }
為使讀者更好地了解for語句的使用，下面通過一個實例來介紹for語句的使用方法。
【例3.08】應用for循環語句計算100以內所有奇數的和，并在頁面中輸出計算后的結果。代碼如下：（實例位置：光盤\源碼\03\3.08）
01 <script type="text/javascript">
02 var i,sum; //聲明變量
03 sum = 0; //對變量初始化
04 for(i=1;i<100;i+=2){
05 sum=sum+i; //計算100以內各奇數之和
06 }
07 alert("100以內所有奇數的和為："+sum); //輸出計算結果
08 </script>
運行程序，在對話框中會顯示計算結果，如圖3.16所示。
圖3.16 輸出100以內所有奇數的和
3.2.4 循環語句的嵌套
在一個循環語句的循環體中也可以包含其他的循環語句，這稱為循環語句的嵌套。上述3種循環語句（while循環語句、do…while循環語句和for循環語句）都是可以互相嵌套的。
如果循環語句A的循環體中包含循環語句B，而循環語句B中不包含其他循環語句，那么就把循環語句A叫作外層循環，而把循環語句B叫作內層循環。
例如，在while循環語句中包含for循環語句的代碼如下：
01 var i,j; //聲明變量
02 i = 1; //對變量賦初值
03 while(i<4){ //定義外層循環
04 document.write("第"+i+"次循環："); //輸出循環變量i的值
05 for(j=1;j<=10;j++){ //定義內層循環
06 document.write(j+"\n"); //輸出循環變量j的值
07 }
08 document.write("<br>"); //輸出換行標記
09 i++; //對變量i自加1
10 }
運行結果為：
第1次循環：1 2 3 4 5 6 7 8 9 10
第2次循環：1 2 3 4 5 6 7 8 9 10
第3次循環：1 2 3 4 5 6 7 8 9 10
【例3.09】用嵌套的for循環語句輸出乘法口訣表。代碼如下：（實例位置：資源包\源碼\03\3.09）
01 <script type="text/javascript">
02 var i,j; //聲明變量
03 document.write("<pre>"); //輸出<pre>標記
04 for(i=1;i<10;i++){ //定義外層循環
05 for(j=1;j<=i;j++){ //定義內層循環
06 if(j>1) document.write("\t"); //如果j大于1就輸出一個Tab空格
07 document.write(j+"x"+i+"="+j*i); //輸出乘法算式
08 }
09 document.write("<br>"); //輸出換行標記
10 }
11 document.write("</pre>"); //輸出</pre>標記
12 </script>
運行本實例，結果如圖3.17所示。
圖3.17 輸出乘法口訣表
- JavaScript前端開發模塊化教程
- 樂學Web編程：網站制作不神秘
- Web全棧工程師的自我修養
- 零基礎學Python網絡爬蟲案例實戰全流程詳解（高級進階篇）
- Learning Python Design Patterns
- Mastering Drupal 8 Views
- Python機器學習算法: 原理、實現與案例
- D3.js By Example
- Getting Started with Nano Server
- Python Programming for Arduino
- 程序員必會的40種算法
- Learning Redux
- C語言王者歸來
- Learning Dynamics NAV Patterns
- Natural Language Processing with Python Cookbook