JavaScript中的while循環

時間 2020-08-11

原文原文鏈接

在 JavaScript 語言中，當咱們使用 while 循環時，只要指定條件爲 true，循環就能夠一直執行。html

而且只要條件一直知足，就能夠實現一個無限循環，例如：瀏覽器

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

執行這個循環，就會無止境的輸出1。spa

while 語法及其使用

語法以下所示：code

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

condition 是循環的條件，只有當循環條件成立時，纔會執行花括號 {} 中的代碼，若是條件不成立則不會執行代碼。htm

示例：

使用 while 循環輸出小於 10 的全部整數：blog

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

在瀏覽器中打開：
ip

在上述代碼中，由於咱們目標是輸出「小於 10 的全部整數」，因此這其實不包括10 ，而是從 0 - 9 之間的整數。這樣的話咱們能夠聲明初始變量 i 爲 0 ，表示從 0 開始輸出，而後循環條件爲 i < 10，只要知足這個條件，循環就會一直執行。而後在代碼塊中加上一句 i++;，表示每次循環初始變量值都會加1，一直加到 9 。utf-8

do/while 循環的使用

do/while 循環是 while 循環的變體，它與 while 循環的不一樣在於，在檢查條件是否爲真以前，該循環將會執行一次代碼塊，而後只要條件爲真，它就將重複該循環。也就是說，不論如何 do/while 循環都會至少執行一次。rem

語法：get

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之內的數字，就是十、九、八、七、六、五、四、三、二、1，那麼初始化變量確定是從10開始，而後循環條件爲 i > 0 ，或者 i >= 1 也同樣。在代碼塊中加上 i--，每循環一次，初始條件變量將減去一，一直減到大於0爲止。

再強調一次，do/while 與 while 循環的不一樣之處在於：它會先執行一次循環中的語句，而後再判斷表達式是否爲真，若是爲真則繼續循環，若是爲假則終止循環。因此說無論條件是否爲真，do/while 循環至少要執行一次循環語句。

例如看下面這段代碼：

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

// 輸出：1

儘管咱們給 while 後面的循環條件指定爲 false，代碼執行結果依然輸出了一個1，這表示循環執行了一次。

不一樣循環的使用情景

當循環次數不限制、不肯定時可使用 while 循環。
循環次數有限制、已經肯定時能夠用 for 循環。

動手小練習

定義一個輸入框，隨機輸入一個數，並判斷這個數字是否符合條件？
循環彈框輸入數據，並在控制檯打印，若是輸入爲 exit，則退出循環。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。