JavaScript中while循環(huán)的基礎(chǔ)使用教程
前言
在 JavaScript 語言中，當(dāng)我們使用 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)的條件，只有當(dāng)循環(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>
在瀏覽器中打開：
在上述代碼中，因為我們目標(biāo)是輸出“小于 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í)行一次代碼塊，然后只要條件為真，它就將重復(fù)該循環(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為止。
再強(qiáng)調(diào)一次， do/while 與 while 循環(huán)的不同之處在于：它會先執(zhí)行一次循環(huán)中的語句，然后再判斷表達(dá)式是否為真，如果為真則繼續(xù)循環(huán)，如果為假則終止循環(huán)。所以說不管條件是否為真， do/while 循環(huán)至少要執(zhí)行一次循環(huán)語句 。
例如看下面這段代碼：
do{
console.log("1");
}while(false);
// 輸出：1
盡管我們給 while 后面的循環(huán)條件指定為 false ， 代碼執(zhí)行結(jié)果依然輸出了一個1，這表示循環(huán)執(zhí)行了一次。
不同循環(huán)的使用情景
- 當(dāng)循環(huán)次數(shù)不限制、不確定時可以使用 while循環(huán)。
- 循環(huán)次數(shù)有限制、已經(jīng)確定時可以用 for循環(huán)。
動手小練習(xí)
定義一個輸入框，隨機(jī)輸入一個數(shù)，并判斷這個數(shù)字是否符合條件？
循環(huán)彈框輸入數(shù)據(jù)，并在控制臺打印，如果輸入為 exit，則退出循環(huán)。
總結(jié)
到此這篇關(guān)于JavaScript中while循環(huán)的文章就介紹到這了,更多相關(guān)JavaScript的while循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
我們曾經(jīng)講過JS由三部分組成，其中一個部分就是BOM，用于對瀏覽器進(jìn)行操作。這篇文章我們主要來介紹BOM應(yīng)用，感興趣的朋友一起看看吧2018-02-02
給moz-firefox下添加IE方法和屬性...2007-04-04
JavaScript根據(jù)json生成html表格的示例代碼
這篇文章主要介紹了JavaScript根據(jù)json生成html表格的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
使用phantomjs進(jìn)行網(wǎng)頁抓取的實現(xiàn)代碼
這篇文章主要介紹了使用phantomjs進(jìn)行網(wǎng)頁抓取的實現(xiàn)代碼,需要的朋友可以參考下2014-09-09
JavaScript操作localStorage實現(xiàn)保存本地json文件
這篇文章主要為大家詳細(xì)介紹了JavaScript如何操作localStorage實現(xiàn)保存本地json文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要介紹了小米公司JavaScript面試題的個人解題方法,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JavaScript漢諾塔問題解決方法,涉及javascript遞歸調(diào)用操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了移動端效果之IndexList，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關(guān)于JS數(shù)組去重的九種高階方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
下面小編就為大家?guī)硪黄狫S 實現(xiàn)可停頓的垂直滾動實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11