在 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/while
與 while
迴圈的不同之處在於:它會先執行一次迴圈中的語句,然後再判斷表示式是否為真,如果為真則繼續迴圈,如果為假則終止迴圈。所以說不管條件是否為真,do/while
迴圈至少要執行一次迴圈語句 。
例如看下面這段程式碼:
do{
console.log("1");
}while(false);
// 輸出:1
儘管我們給 while
後面的迴圈條件指定為 false
, 程式碼執行結果依然輸出了一個1,這表示迴圈執行了一次。
不同迴圈的使用情景
- 當迴圈次數不限制、不確定時可以使用
while
迴圈。 - 迴圈次數有限制、已經確定時可以用
for
迴圈。
動手小練習
- 定義一個輸入框,隨機輸入一個數,並判斷這個數字是否符合條件?
- 迴圈彈框輸入資料,並在控制檯列印,如果輸入為 exit,則退出迴圈。