JavaScript中while循環(huán)的基礎使用教程
前言
在 JavaScript 語言中，當我們使用 while 循環(huán)時，只要指定條件為 true，循環(huán)就可以一直執(zhí)行。
并且只要條件一直滿足，就可以實現(xiàn)一個無限循環(huán)，例如：
while(true){
console.log("1");
}
執(zhí)行這個循環(huán)，就會無止境的輸出1。
while 語法及其使用
語法如下所示：
while (condition) {
// 要執(zhí)行的代碼塊
}
condition 是循環(huán)的條件，只有當循環(huán)條件成立時，才會執(zhí)行花括號 {} 中的代碼，如果條件不成立則不會執(zhí)行代碼。
示例：
使用 while 循環(huán)輸出小于 10 的所有整數(shù)：
<!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+" 個數(shù)";
i++;
}
document.getElementById("while").innerHTML = number;
</script>
</body>
</html>
在瀏覽器中打開：
在上述代碼中，因為我們目標是輸出“小于 10 的所有整數(shù)”，所以這其實不包括10 ，而是從 0 - 9 之間的整數(shù)。這樣的話我們可以聲明初始變量 i 為 0 ，表示從 0 開始輸出，然后循環(huán)條件為 i < 10 ，只要滿足這個條件，循環(huán)就會一直執(zhí)行。然后在代碼塊中加上一句 i++; ，表示每次循環(huán) 初始變量值都會加1，一直加到 9 。
do/while 循環(huán)的使用
do/while 循環(huán)是 while 循環(huán)的變體，它與 while 循環(huán)的不同在于，在檢查條件是否為真之前，該循環(huán)將會執(zhí)行一次代碼塊，然后只要條件為真，它就將重復該循環(huán)。也就是說，不論如何 do/while 循環(huán)都會至少執(zhí)行一次。
語法：
do{
// 要執(zhí)行的代碼塊
}while(condition);
示例：
通過 do/while 循環(huán)以遞減方式，循環(huán)輸出1-10以內(nèi)的數(shù)字：
<!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+ " 個數(shù)";
i--;
}while (i > 0);
document.getElementById("dowhile").innerHTML = dow;
</script>
</body>
</html>
在瀏覽器中打開：
因為我們要實現(xiàn)的是遞減輸出1-10以內(nèi)的數(shù)字，就是 10、9、8、7、6、5、4、3、2、1 ，那么初始化變量肯定是從10開始，然后循環(huán)條件為 i > 0 ，或者 i >= 1 也一樣。在代碼塊中加上 i-- ，每循環(huán)一次，初始條件變量將減去一，一直減到大于0為止。
再強調一次， do/while 與 while 循環(huán)的不同之處在于：它會先執(zhí)行一次循環(huán)中的語句，然后再判斷表達式是否為真，如果為真則繼續(xù)循環(huán)，如果為假則終止循環(huán)。所以說不管條件是否為真， do/while 循環(huán)至少要執(zhí)行一次循環(huán)語句 。
例如看下面這段代碼：
do{
console.log("1");
}while(false);
// 輸出：1
盡管我們給 while 后面的循環(huán)條件指定為 false ， 代碼執(zhí)行結果依然輸出了一個1，這表示循環(huán)執(zhí)行了一次。
不同循環(huán)的使用情景
- 當循環(huán)次數(shù)不限制、不確定時可以使用 while循環(huán)。
- 循環(huán)次數(shù)有限制、已經(jīng)確定時可以用 for循環(huán)。
動手小練習
定義一個輸入框，隨機輸入一個數(shù)，并判斷這個數(shù)字是否符合條件？
循環(huán)彈框輸入數(shù)據(jù)，并在控制臺打印，如果輸入為 exit，則退出循環(huán)。
總結
到此這篇關于JavaScript中while循環(huán)的文章就介紹到這了,更多相關JavaScript的while循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序 行的刪除和增加操作實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
今天小編就為大家分享一篇關于js中數(shù)組對象去重的兩種方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
js下通過getList函數(shù)實現(xiàn)分頁效果的代碼
js下通過getList函數(shù)實現(xiàn)分頁效果的代碼，需要通過js分頁的朋友可以參考下。2010-09-09
JS Promise axios 請求結果后面的.then() 是什么意思
本文主要介紹了JS Promise axios 請求結果后面的 .then() 是什么意思，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
javascript一種由Netscape的LiveScript發(fā)展而來的腳本語言，它提高與Java的兼容性。JavaScript采用HTML頁作為其接口。很多朋友問js是什么意思？下面小編通過分享本教程給大家解答下，感興趣的朋友參考下2016-09-09
這篇文章主要為大家詳細介紹了TypeScript的類型注解，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
平時JavaScript逆向需要補環(huán)境或者補一些函數(shù),下面這篇文章主要給大家介紹了關于JS逆向之瀏覽器補環(huán)境的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
在平時前端開發(fā)中,我們不難發(fā)現(xiàn)經(jīng)常會用到字符串操作,這篇文章主要給大家介紹了關于vue(javaScript)操作字符串的一些常用方法的相關資料,需要的朋友可以參考下2024-01-01
前端水印就是在網(wǎng)頁或應用程序的前端界面上添加的一種標記,通常是文本、圖標或圖案等形式,下面小編就來和大家介紹四個常用的方法吧2025-03-03
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應該是抽象的，需要由具體的類去實現(xiàn)，然后第三方就可以通過這組抽象方法調用，讓具體的類執(zhí)行具體的方法，泛型是靜態(tài)類型語言的基本特征，允許將類型作為參數(shù)傳遞給另一個類型、函數(shù)、或者其他結構2022-10-10