【Web前端基礎知識】JavaScript中while的常見問題

我們先看幾個關于while循環語句的簡單問題。

問題一：

請用while求出1到100的和，并在控制臺中打印出來。

我們很小的時候就聽過數學家高斯計算1到100的和的故事，他可以很快的計算出1到100的和。高斯是這樣算的：1+100=101，2+99=101······50+51=101。從1加到100有50組這樣的數，所以50X101=5050

問題二：

讓用戶輸入用戶名和密碼，如果正確，提示“用戶名和密碼正確”，程序結束。如果錯誤，就一直輸入。

(正確的用戶名是：ujiuye，密碼是：666666)

問題三：

計算1到100相加的和，但是，如果這個數的個位數是9，那就不要把這個數加進去。

我們可以看出，上面這幾個問題都分別重復做著一件事兒，就需要我們運行多次代碼，假如您需要運行代碼多次，且每次使用不同的值，因此，我們使用循環語句的話就很方便了。

循環語句是JavaScript中一類允許執行重復動作的語句，同條件語句一樣，循環語句也是JavaScript的基本控制語句，在JavaScript中循環語句主要有：while循環和for循環兩種形式，這幾個問題中我們都使用while來解決。

下面我們來依次分析下：

Ø 問題一用到了while循環

while循環

while 循環會一直循環代碼塊，只要指定的條件為 true。

語法：

1. while (條件) { 
2.     要執行的代碼塊 
3. } 

while循環的執行流程：

當代碼執行到while的時候，會先判斷判斷條件是否為true，如果為true，那么會執行while大括號中的代碼塊，代碼塊執行完畢以后，再次回到while中再進行判斷，如果為true,再次執行while大括號中的代碼塊，并且再次回while，如果為false就不執行大括號中的代碼塊。

例如：

請用while求出1到100的和，并在控制臺中打印出來。

1. var i = 1; 
2. var sum = 0; 
3. while (i <= 100) { 
4.    sum += i; 
5.    i++; 
6. } 
7. console.log(sum); 

上面代碼運行的步驟：

執行var i= 1; var sum = 0;這兩條語句，所以i的值是1，sum的值是0。

然后程序會驗證下 i<=100 是否滿足，1<=100是真，所以執行一次循環體。

執行完循環體之后，sum的值是1，i的值是2。

然后程序會驗證下 i<=100 是否滿足，2<=100是真，所以執行一次循環體。

執行完循環體之后，sum的值是3，i的值是3。

然后程序會驗證下 i<=100 是否滿足，3<=100是真，所以執行一次循環體。

執行完循環體之后，sum的值是6，i的值是4。

然后程序會驗證下 i<=100 是否滿足，4<=100是真，所以執行一次循環體。

執行完循環體之后，sum的值是10，i的值是5。

然后以此類推。。。

直到i的值是101的時候，程序會驗證下 i<=100 是否滿足，101<=100是假，所以不執行循環體，程序跳出循環。

Ø 問題二用到了break語句

break 語句

作用：“跳出”循環。

break 語句會中斷循環，并繼續執行循環之后的代碼。

例如：

讓用戶輸入用戶名和密碼，如果正確，提示“用戶名和密碼正確”，程序結束。如果錯誤，就一直輸入。

(正確的用戶名是：ujiuye，密碼是：666666)

我們使用上面剛提到的while循環和break解答。

1. var name = prompt("請輸入用戶名"); 
2. var password = prompt("請輸入密碼"); 
3. while(true){ 
4.    if(name == "ujiuye" && password == "666666"){ 
5.         alert('用戶名和密碼正確'); 
6.         break; 
7.     }else{ 
8.         name = prompt("請輸入用戶名"); 
9.         password = prompt("請輸入密碼"); 
10.     } 
11. } 

這里面的break就是跳出循環語句的。

Ø 問題三用到了continue語句

continue 語句

作用：“跳過”循環中的一個迭代。

continue 語句中斷(循環中)的一個迭代，如果發生指定的條件。然后繼續循環中的下一個迭代。

例如：

計算1到100相加的和，但是，如果這個數的個位數是9，那就不要把這個數加進去。

我們用上面提到的while和continue語句完成。

1. var i = 1; 
2. var sum = 0; 
3. while(i<=100){ 
4.    if(i % 10 == 9){ 
5.         i++; 
6.         continue; 
7.     } 
8.         sum += i; 
9.         i++; 
10. } 
11. console.log(sum); 

判斷下這個數的個位數是不是9，如果i%10==9，那么這個數的個位數就是9，就不需要把這個數加進入了，使用continue來結束本次循環，然后繼續循環中的下一個迭代。