JavaScript中的while迴圈

知否發表於2020-08-10

在 JavaScript 語言中,當我們使用 while 迴圈時,只要指定條件為 true,迴圈就可以一直執行。

並且只要條件一直滿足,就可以實現一個無限迴圈,例如:

while(true){
    console.log("1");
}

執行這個迴圈,就會無止境的輸出1。

while 語法及其使用

語法如下所示:

while (condition) {
    // 要執行的程式碼塊
}

condition 是迴圈的條件,只有當迴圈條件成立時,才會執行花括號 {} 中的程式碼,如果條件不成立則不會執行程式碼。

示例:

使用 while 迴圈輸出小於 10 的所有整數:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_俠課島(9xkd.com)</title>
</head>
<body>
<div>
  <p id="while"></p>
</div>
<script>
  var number = "";
  var i = 0;
  while (i < 10) {
    number += "<br>第 "+i+" 個數";
    i++;
  }
  document.getElementById("while").innerHTML = number;
</script>
</body>   
</html>

在瀏覽器中開啟:

在上述程式碼中,因為我們目標是輸出“小於 10 的所有整數”,所以這其實不包括10 ,而是從 0 - 9 之間的整數。這樣的話我們可以宣告初始變數 i 為 0 ,表示從 0 開始輸出,然後迴圈條件為 i < 10,只要滿足這個條件,迴圈就會一直執行。然後在程式碼塊中加上一句 i++;,表示每次迴圈 初始變數值都會加1,一直加到 9 。

do/while 迴圈的使用

do/while 迴圈是 while 迴圈的變體,它與 while 迴圈的不同在於,在檢查條件是否為真之前,該迴圈將會執行一次程式碼塊,然後只要條件為真,它就將重複該迴圈。也就是說,不論如何 do/while 迴圈都會至少執行一次。

語法:

do{
    // 要執行的程式碼塊
}while(condition);
示例:

通過 do/while 迴圈以遞減方式,迴圈輸出1-10以內的數字:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_俠課島(9xkd.com)</title>
</head>
<body>
<div>
  <p id="dowhile"></p>
</div>
<script>
    var dow = ""
    var i = 10;
    do {
        dow += "<br><br>第 " +i+ " 個數";
        i--;
    }while (i > 0);  
    document.getElementById("dowhile").innerHTML = dow;
</script>
</body>   
</html>

在瀏覽器中開啟:

因為我們要實現的是遞減輸出1-10以內的數字,就是10、9、8、7、6、5、4、3、2、1,那麼初始化變數肯定是從10開始,然後迴圈條件為 i > 0 ,或者 i >= 1 也一樣。在程式碼塊中加上 i--,每迴圈一次,初始條件變數將減去一,一直減到大於0為止。

再強調一次,do/whilewhile 迴圈的不同之處在於:它會先執行一次迴圈中的語句,然後再判斷表示式是否為真,如果為真則繼續迴圈,如果為假則終止迴圈。所以說不管條件是否為真,do/while 迴圈至少要執行一次迴圈語句 。

例如看下面這段程式碼:

do{
    console.log("1");
}while(false);

// 輸出:1

儘管我們給 while 後面的迴圈條件指定為 false, 程式碼執行結果依然輸出了一個1,這表示迴圈執行了一次。

不同迴圈的使用情景

  • 當迴圈次數不限制、不確定時可以使用 while 迴圈。
  • 迴圈次數有限制、已經確定時可以用 for 迴圈。

動手小練習

  1. 定義一個輸入框,隨機輸入一個數,並判斷這個數字是否符合條件?
  2. 迴圈彈框輸入資料,並在控制檯列印,如果輸入為 exit,則退出迴圈。

相關文章