1. 程式人生 > 程式設計 >JavaScript中while迴圈的基礎使用教程

JavaScript中while迴圈的基礎使用教程

前言

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

在瀏覽器中開啟:

JavaScript中while迴圈的基礎使用教程

在上述程式碼中,因為我們目標是輸出“小於 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>

在瀏覽器中開啟:

JavaScript中while迴圈的基礎使用教程

因為我們要實現的是遞減輸出1-10以內的數字,就是 10、9、8、7、6、5、4、3、2、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,則退出迴圈。

總結

到此這篇關於JavaScript中while迴圈的文章就介紹到這了,更多相關JavaScript的while迴圈內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!