點(diǎn)此查看所有教程、項(xiàng)目、源碼導(dǎo)航文章目錄1. 背景2. while 語(yǔ)句格式3. while 語(yǔ)句實(shí)例4. 更多實(shí)戰(zhàn)示例5. 小結(jié)1. 背景上一篇我們理解了循環(huán)的意義計(jì)算機(jī)最擅長(zhǎng)重復(fù)勞動(dòng)循環(huán)結(jié)構(gòu)就是用來(lái)告訴程序反復(fù)執(zhí)行一段邏輯。我們已經(jīng)知道循環(huán)包含兩個(gè)核心部分需要重復(fù)執(zhí)行的循環(huán)體以及控制循環(huán)什么時(shí)候停下來(lái)的終止條件。如果想要精準(zhǔn)控制循環(huán)執(zhí)行多少次最經(jīng)典的思路就是借助一個(gè)計(jì)數(shù)器變量。我們給計(jì)數(shù)器設(shè)置初始值每完成一次循環(huán)計(jì)數(shù)器自增當(dāng)計(jì)數(shù)器達(dá)到邊界值時(shí)條件不再成立循環(huán)停止。while 循環(huán)就是基于這套思想設(shè)計(jì)出來(lái)的基礎(chǔ)循環(huán)語(yǔ)法也是我們接觸的第一種 JS 循環(huán)。while 的特點(diǎn)非常純粹先判斷條件條件為真就執(zhí)行循環(huán)體條件為假直接退出循環(huán)。2. while 語(yǔ)句格式while 的基礎(chǔ)語(yǔ)法格式如下while(條件){循環(huán)體語(yǔ)句;}while 的執(zhí)行順序非常關(guān)鍵先判斷后執(zhí)行。執(zhí)行流程判斷條件成立 → 執(zhí)行大括號(hào)內(nèi)的循環(huán)體 → 再次回到條件判斷 → 成立繼續(xù)執(zhí)行…… 直到條件判斷結(jié)果為 false循環(huán)直接結(jié)束程序繼續(xù)往下運(yùn)行循環(huán)后面的代碼。這里有一個(gè)必須重視的問(wèn)題循環(huán)體內(nèi)部一定要有能夠改變條件結(jié)果的代碼。如果條件永遠(yuǎn)為 true循環(huán)會(huì)無(wú)休止運(yùn)行也就是死循環(huán)。死循環(huán)會(huì)持續(xù)占用 CPU 資源嚴(yán)重時(shí)造成頁(yè)面卡死是開發(fā)中需要規(guī)避的問(wèn)題。3. while 語(yǔ)句實(shí)例我們先看基礎(chǔ)案例在控制臺(tái)連續(xù)輸出 10 次 hello。vari1;while(i10){console.log(hello);i;}我們一步步拆解完整執(zhí)行流程初始化計(jì)數(shù)器i 1判斷i 10110 結(jié)果為 true進(jìn)入循環(huán)打印 hello然后執(zhí)行ii 變成 2再次判斷i 10210 成立繼續(xù)打印i 自增為 3這個(gè)過(guò)程不斷重復(fù)i 依次增加直到 i 等于 10 的時(shí)候條件依舊成立執(zhí)行打印i 變成 11再次判斷i 101110 結(jié)果為 false循環(huán)終止。很多新手容易把i寫在循環(huán)外面或者忘記寫i計(jì)數(shù)器 i 永遠(yuǎn)等于 1條件一直成立直接形成死循環(huán)這是 while 循環(huán)最高頻的錯(cuò)誤。4. 更多實(shí)戰(zhàn)示例循環(huán)的靈活之處就是可以在循環(huán)體內(nèi)部搭配我們之前學(xué)過(guò)的選擇結(jié)構(gòu) if實(shí)現(xiàn)篩選、累加、計(jì)數(shù)等邏輯。下面幾個(gè)例子是循環(huán)最經(jīng)典的基礎(chǔ)練習(xí)建議大家手動(dòng)敲一遍不要直接復(fù)制。第一個(gè)示例輸出 1~100 之間所有偶數(shù)vari1;while(i100){if(i%20){console.log(i);}i;}思路計(jì)數(shù)器從 1 遍歷到 100每一輪都用取模運(yùn)算符判斷當(dāng)前數(shù)字是不是偶數(shù)滿足條件才打印無(wú)論是否打印計(jì)數(shù)器都要自增。第二個(gè)示例計(jì)算 1 到 1000 所有數(shù)字的累加和vari1;varsum0;// sum用來(lái)保存累加的總和初始值為0while(i1000){sumsumi;i;}console.log(sum);思路我們額外定義一個(gè)累加變量 sum每一輪循環(huán)都把當(dāng)前 i 的值加到 sum 里面。累加變量初始值必須設(shè)置為 0如果初始值寫錯(cuò)最終求和結(jié)果就會(huì)出錯(cuò)。第三個(gè)示例統(tǒng)計(jì) 0~9999 里面可以被 3 整除的數(shù)字一共有多少個(gè)vari0;varcount0;// count作為計(jì)數(shù)器用來(lái)記錄符合條件的數(shù)量while(i10000){if(i%30){count;}i;}console.log(count);思路這是計(jì)數(shù)類循環(huán)的標(biāo)準(zhǔn)寫法。count 只在滿足條件的時(shí)候才增加而遍歷變量 i 是每一輪都自增二者作用完全不一樣不要混淆。5. 小結(jié)while 是入門循環(huán)的絕佳選擇邏輯直白核心就是先判斷條件條件成立才執(zhí)行循環(huán)體。我們記住幾個(gè)核心要點(diǎn)while 是先判斷后執(zhí)行如果一開始條件就是 false循環(huán)體一次都不會(huì)執(zhí)行循環(huán)內(nèi)部一定要有修改條件的代碼比如 i防止死循環(huán)循環(huán)可以和 if 選擇結(jié)構(gòu)組合實(shí)現(xiàn)篩選、求和、計(jì)數(shù)區(qū)分兩種變量遍歷計(jì)數(shù)器用來(lái)控制循環(huán)次數(shù)累加 / 計(jì)數(shù)變量用來(lái)保存業(yè)務(wù)結(jié)果。從循環(huán)開始三種程序結(jié)構(gòu)順序、選擇、循環(huán)就全部匯合了代碼邏輯復(fù)雜度會(huì)明顯上升光看懂不夠一定要?jiǎng)邮智么a調(diào)試觀察每一步變量的變化。