JavaScript中while循環(huán)的基礎(chǔ)使用教程
前言
在 JavaScript 語(yǔ)言中，當(dāng)我們使用 while 循環(huán)時(shí)，只要指定條件為 true，循環(huán)就可以一直執(zhí)行。
并且只要條件一直滿足，就可以實(shí)現(xiàn)一個(gè)無(wú)限循環(huán)，例如：
while(true){console.log('1');}
執(zhí)行這個(gè)循環(huán)，就會(huì)無(wú)止境的輸出1。
while 語(yǔ)法及其使用
語(yǔ)法如下所示：
while (condition) {// 要執(zhí)行的代碼塊}
condition 是循環(huán)的條件，只有當(dāng)循環(huán)條件成立時(shí)，才會(huì)執(zhí)行花括號(hào) {} 中的代碼，如果條件不成立則不會(huì)執(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+' 個(gè)數(shù)';i++;}document.getElementById('while').innerHTML = number;</script></body> </html>
在瀏覽器中打開(kāi)：
在上述代碼中，因?yàn)槲覀兡繕?biāo)是輸出“小于 10 的所有整數(shù)”，所以這其實(shí)不包括10 ，而是從 0 - 9 之間的整數(shù)。這樣的話我們可以聲明初始變量 i 為 0 ，表示從 0 開(kāi)始輸出，然后循環(huán)條件為 i < 10 ，只要滿足這個(gè)條件，循環(huán)就會(huì)一直執(zhí)行。然后在代碼塊中加上一句 i++; ，表示每次循環(huán) 初始變量值都會(huì)加1，一直加到 9 。
do/while 循環(huán)的使用
do/while 循環(huán)是 while 循環(huán)的變體，它與 while 循環(huán)的不同在于，在檢查條件是否為真之前，該循環(huán)將會(huì)執(zhí)行一次代碼塊，然后只要條件為真，它就將重復(fù)該循環(huán)。也就是說(shuō)，不論如何 do/while 循環(huán)都會(huì)至少執(zhí)行一次。
語(yǔ)法：
do{// 要執(zhí)行的代碼塊}while(condition);
示例：
通過(guò) 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+ ' 個(gè)數(shù)';i--;}while (i > 0); document.getElementById('dowhile').innerHTML = dow;</script></body> </html>
在瀏覽器中打開(kāi)：
因?yàn)槲覀円獙?shí)現(xiàn)的是遞減輸出1-10以內(nèi)的數(shù)字，就是 10、9、8、7、6、5、4、3、2、1 ，那么初始化變量肯定是從10開(kāi)始，然后循環(huán)條件為 i > 0 ，或者 i >= 1 也一樣。在代碼塊中加上 i-- ，每循環(huán)一次，初始條件變量將減去一，一直減到大于0為止。
再?gòu)?qiáng)調(diào)一次， do/while 與 while 循環(huán)的不同之處在于：它會(huì)先執(zhí)行一次循環(huán)中的語(yǔ)句，然后再判斷表達(dá)式是否為真，如果為真則繼續(xù)循環(huán)，如果為假則終止循環(huán)。所以說(shuō)不管條件是否為真， do/while 循環(huán)至少要執(zhí)行一次循環(huán)語(yǔ)句 。
例如看下面這段代碼：
do{console.log('1');}while(false);// 輸出：1
盡管我們給 while 后面的循環(huán)條件指定為 false ， 代碼執(zhí)行結(jié)果依然輸出了一個(gè)1，這表示循環(huán)執(zhí)行了一次。
不同循環(huán)的使用情景
當(dāng)循環(huán)次數(shù)不限制、不確定時(shí)可以使用 while循環(huán)。 循環(huán)次數(shù)有限制、已經(jīng)確定時(shí)可以用 for循環(huán)。動(dòng)手小練習(xí)
定義一個(gè)輸入框，隨機(jī)輸入一個(gè)數(shù)，并判斷這個(gè)數(shù)字是否符合條件？循環(huán)彈框輸入數(shù)據(jù)，并在控制臺(tái)打印，如果輸入為 exit，則退出循環(huán)。
總結(jié)
到此這篇關(guān)于JavaScript中while循環(huán)的文章就介紹到這了,更多相關(guān)JavaScript的while循環(huán)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 用xslt+css讓RSS顯示的跟網(wǎng)頁(yè)一樣漂亮2. HTML5 Canvas繪制圖形從入門到精通3. 《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)（一)4. 利用CSS制作3D動(dòng)畫(huà)5. 讀大數(shù)據(jù)量的XML文件的讀取問(wèn)題6. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例7. html5手機(jī)觸屏touch事件介紹8. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫(huà)特效9. 測(cè)試模式 - XSL教程 - 510. JSP的Cookie在登錄中的使用
網(wǎng)公網(wǎng)安備