JavaScript中while循環(huán)的基礎(chǔ)使用教程
前言
在 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為止。
再強調(diào)一次, 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í)行結(jié)果依然輸出了一個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)。
總結(jié)
到此這篇關(guān)于JavaScript中while循環(huán)的文章就介紹到這了,更多相關(guān)JavaScript的while循環(huán)內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. HTTP協(xié)議常用的請求頭和響應(yīng)頭響應(yīng)詳解說明(學習)2. HTML DOM setInterval和clearInterval方法案例詳解3. HTML5實戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)4. React優(yōu)雅的封裝SvgIcon組件示例5. HTML5 Canvas繪制圖形從入門到精通6. XML入門的常見問題(三)7. Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑8. CSS清除浮動方法匯總9. XML在語音合成中的應(yīng)用10. 不要在HTML中濫用div
