語句完全指南：從語法到異步與性能優(yōu)化)
在項(xiàng)目里被循環(huán)語句卡住過的人應(yīng)該不在少數(shù)。不管你是剛接觸 JavaScript 的新手還是寫了幾年業(yè)務(wù)代碼的老手只要跟數(shù)組、對(duì)象、DOM 元素打過交道就一定繞不開 for、while、forEach 這些老朋友。但循環(huán)語句遠(yuǎn)不止“重復(fù)執(zhí)行代碼”這么簡單選錯(cuò)循環(huán)方式、沒搞懂中斷機(jī)制、循環(huán)里碰到異步邏輯都可能讓你的程序跑出讓人摸不著頭腦的結(jié)果。這篇博文就圍繞 JS 循環(huán)語句做一次系統(tǒng)梳理從基礎(chǔ)寫法、選型思路、中斷控制到底層執(zhí)行原理再到幾個(gè)高頻踩坑場景把我自己實(shí)際用下來的經(jīng)驗(yàn)一起放進(jìn)去。內(nèi)容適合零基礎(chǔ)入門的朋友也適合想查漏補(bǔ)缺的初中級(jí)開發(fā)者你可以把它當(dāng)成一份 JS 循環(huán)主題的工具手冊來用。1. JS 循環(huán)語句全家桶每種寫法的脾氣和性格寫循環(huán)的人最怕什么最怕的是“只知道一種寫法遇到問題就硬套”。JS 里的循環(huán)語句說多不多說少也不少實(shí)際開發(fā)中高頻出現(xiàn)的無非就是for、while、do...while、for...in、for...of和數(shù)組的forEach。它們的語法都很簡單但背后的適用場景千差萬別。1.1 循環(huán)語句的基礎(chǔ)形態(tài)對(duì)比先看最傳統(tǒng)的for循環(huán)它的本質(zhì)是“三個(gè)表達(dá)式驅(qū)動(dòng)”的循環(huán)控制結(jié)構(gòu)for (初始化表達(dá)式; 條件表達(dá)式; 更新表達(dá)式) { // 循環(huán)體 }執(zhí)行順序是這樣的先執(zhí)行初始化表達(dá)式然后判斷條件表達(dá)式是否為真為真就進(jìn)入循環(huán)體循環(huán)體執(zhí)行完再執(zhí)行更新表達(dá)式更新完回頭繼續(xù)判斷條件。這個(gè)順序必須記牢因?yàn)樗鼪Q定了你到底循環(huán)多少次、什么時(shí)候退出。while循環(huán)則是“先判斷、后執(zhí)行”的典型代表while (條件表達(dá)式) { // 循環(huán)體 }它只有條件判斷內(nèi)部要自己維護(hù)變量的變化。如果條件永遠(yuǎn)為真就會(huì)死循環(huán)。我見過不少新人寫while (true)忘了寫 break 的頁面直接假死這個(gè)問題后面會(huì)專門說。do...while則是“先執(zhí)行、后判斷”do { // 循環(huán)體 } while (條件表達(dá)式);它的特點(diǎn)是循環(huán)體至少會(huì)執(zhí)行一次。這看起來只是順序差異實(shí)際業(yè)務(wù)里卻能派上大用場。比如你要從用戶輸入里讀取一段內(nèi)容要求“至少輸入一次之后判斷是否繼續(xù)”用do...while就比while自然得多。至于for...in它被設(shè)計(jì)用來遍歷對(duì)象的可枚舉屬性const person { name: 張三, age: 30 }; for (const key in person) { console.log(key, person[key]); }這里有個(gè)所有人都應(yīng)該知道的坑for...in不只遍歷對(duì)象自身的屬性還會(huì)把原型鏈上可枚舉的屬性一起帶出來。所以實(shí)際項(xiàng)目中如果沒有hasOwnProperty的檢查很容易遍歷出你根本不需要的東西。for...of是 ES6 引入的遍歷方式專門為可迭代對(duì)象設(shè)計(jì)比如數(shù)組、字符串、Map、Set 這些const list [10, 20, 30]; for (const item of list) { console.log(item); }它是這幾類循環(huán)里寫起來最舒服的代碼簡潔不會(huì)像for...in那樣把索引當(dāng)成字符串取出來也不會(huì)遍歷到原型鏈上的屬性。最后是數(shù)組的forEach方法嚴(yán)格來說它不是“語句”而是數(shù)組原型上的一個(gè)方法[1, 2, 3].forEach((item, index) { console.log(index, item); });forEach代碼更語義化適合做遍歷操作但它在控制循環(huán)方面非常死板break和continue對(duì)它無效。這一點(diǎn)后面我會(huì)專門用一小節(jié)展開講。1.2 不同循環(huán)的實(shí)現(xiàn)形態(tài)一覽用一張表把它們的核心差異整理出來方便遇到場景時(shí)快速選型循環(huán)方式適用對(duì)象能否 break/continue是否支持 return典型場景for數(shù)組、次數(shù)已知的循環(huán)支持函數(shù)內(nèi)支持計(jì)數(shù)循環(huán)、按索引操作while條件驅(qū)動(dòng)型循環(huán)支持函數(shù)內(nèi)支持讀取數(shù)據(jù)直到結(jié)束do...while至少執(zhí)行一次的循環(huán)支持函數(shù)內(nèi)支持菜單選擇、重試邏輯for...in對(duì)象屬性支持函數(shù)內(nèi)支持遍歷對(duì)象鍵名for...of可迭代對(duì)象支持函數(shù)內(nèi)支持遍歷值而非索引forEach數(shù)組不支持只結(jié)束本次回調(diào)簡單遍歷、UI 渲染分類查表只是第一步要真正用好還得理解“為什么這個(gè)場景適合這種循環(huán)”。比如for...of能直接拿到值而不是索引這在處理字符串、Map 這類數(shù)據(jù)時(shí)優(yōu)勢特別明顯而for循環(huán)的優(yōu)勢在于需要同時(shí)控制多個(gè)起點(diǎn)、終點(diǎn)和步長時(shí)你想怎么走就怎么走靈活性無人能比。2. 循環(huán)的中斷與跳過break、continue、return 到底怎么用循環(huán)寫多了你會(huì)發(fā)現(xiàn)一個(gè)循環(huán)里并不總是要老老實(shí)實(shí)跑滿全部次數(shù)。找數(shù)據(jù)找到就直接退出更高效遇到不合法的值跳過就完事。這時(shí)候怎么打斷、怎么跳過就成了區(qū)分代碼水平高低的細(xì)節(jié)。2.1 break 與 continue最基礎(chǔ)的斷路開關(guān)break的作用是立即終止整個(gè)循環(huán)后面的循環(huán)次數(shù)不再執(zhí)行。continue則是跳過本輪循環(huán)的剩余代碼直接進(jìn)入下一輪判斷?？匆粋€(gè)搜索數(shù)組的例子const numbers [3, 8, 15, 6, 9]; let targetIndex -1; for (let i 0; i numbers.length; i) { if (numbers[i] 15) { targetIndex i; break; // 找到了就不繼續(xù)翻了 } } console.log(targetIndex); // 2這就是break的典型場景查到了目標(biāo)直接退出避免無意義的后續(xù)遍歷。再看continue的典型場景比如過濾掉數(shù)組里的偶數(shù)并打印奇數(shù)for (let i 0; i 10; i) { if (i % 2 0) { continue; // 偶數(shù)直接跳過打印 } console.log(i); // 1 3 5 7 9 }很多人寫代碼時(shí)習(xí)慣用“取反 if 嵌套”代替continue。比如上面這段我也經(jīng)常見到有人寫成for (let i 0; i 10; i) { if (i % 2 ! 0) { console.log(i); } }這兩種寫法在結(jié)果上沒區(qū)別但從代碼可讀性角度看continue能減少一層嵌套尤其在循環(huán)體里本來就有很多邏輯的時(shí)候提前continue掉“不需要處理的場景”后面的代碼就能默認(rèn)“都是要處理的場景”心智負(fù)擔(dān)會(huì)小很多。2.2 多層循環(huán)break 只能跳出最內(nèi)層怎么辦不知道你有沒有遇到過這種情況寫了一個(gè)雙層循環(huán)在里層發(fā)現(xiàn)條件滿足想著break一下直接結(jié)束兩層循環(huán)結(jié)果程序只跳出了里層外層還在那不知疲倦地繼續(xù)跑。JS 里break只能終止它所在的最近一層循環(huán)這是很多初學(xué)者踩過的坑。解決的辦法有兩個(gè)一個(gè)是額外加個(gè)標(biāo)志位let shouldStop false; for (let i 0; i 5 !shouldStop; i) { for (let j 0; j 5; j) { if (i * j 12) { shouldStop true; break; } } }另一個(gè)更優(yōu)雅的方式是用標(biāo)簽語句label。給外層循環(huán)起個(gè)名字里層break的時(shí)候指名道姓要跳出哪個(gè)循環(huán)outer: for (let i 0; i 5; i) { for (let j 0; j 5; j) { if (i * j 12) { break outer; } } }這個(gè)寫法的可讀性其實(shí)比標(biāo)志位強(qiáng)很多但需要團(tuán)隊(duì)里的人看得懂標(biāo)簽語法。標(biāo)簽語句在早期 JS 里用的人少很多前端開發(fā)者沒見過所以我一般在團(tuán)隊(duì)自用代碼里會(huì)用標(biāo)簽在對(duì)外提交的代碼里會(huì)改成標(biāo)志位減少溝通成本。2.3 forEach 里怎么“打斷”三個(gè)替代方案這是我在工作中被問得最多的問題之一——forEach不支持break和continue那在forEach里怎么中斷遍歷先說結(jié)論forEach無法被真正中斷。它的設(shè)計(jì)初衷就是“對(duì)每個(gè)元素執(zhí)行一次回調(diào)”你在回調(diào)里面寫break會(huì)直接報(bào)語法錯(cuò)誤寫continue同樣報(bào)錯(cuò)。此時(shí)正常寫法的確應(yīng)該換成for...of循環(huán)但如果你就是想在鏈?zhǔn)秸{(diào)用的場景里實(shí)現(xiàn)類似效果一般有三個(gè)替代思路。第一個(gè)思路是“提前 return”模擬continue[1, 2, 3, 4, 5].forEach((item) { if (item % 2 0) return; console.log(item); // 1 3 5 });注意這個(gè)return只是結(jié)束當(dāng)前這一次回調(diào)并不是跳出整個(gè)forEach。所以它只等價(jià)于continue沒法等價(jià)于break。第二個(gè)思路是“用拋出異常的方式強(qiáng)制中斷”try { [1, 2, 3, 4, 5].forEach((item) { if (item 3) throw new Error(break loop); console.log(item); }); } catch (e) { // 到這里遍歷就被中斷了 }這個(gè)方法確實(shí)能打斷遍歷但非常不優(yōu)雅還會(huì)被代碼評(píng)審的同事抓著問半天。我自己只在面試題里講這個(gè)思路實(shí)際項(xiàng)目里不會(huì)真這么用。第三個(gè)思路最實(shí)在非要中斷提前用some或find這類“可?！钡臄?shù)組方法。some遍歷時(shí)一旦回調(diào)返回true就會(huì)立刻停止遍歷[1, 2, 3, 4, 5].some((item) { console.log(item); return item 3; // 遍歷到 3 就停止 });這本質(zhì)上不是“打斷forEach”而是換了一種“既能鏈?zhǔn)秸{(diào)用、又能提前?！钡谋闅v方式。所以我的經(jīng)驗(yàn)是如果你一開始就預(yù)感到“這個(gè)遍歷可能需要提前退出”那就壓根不要選forEach直接用for...of干凈利落。3. 循環(huán)實(shí)操全景數(shù)組、對(duì)象、DOM 與異步場景的落地寫法光會(huì)寫循環(huán)體的語法還不夠真正的工作里循環(huán)要處理的是真實(shí)數(shù)據(jù)數(shù)組去重、對(duì)象取值、DOM 節(jié)點(diǎn)遍歷、異步邏輯里的循環(huán)每一個(gè)場景都有它獨(dú)特的講究。3.1 數(shù)組遍歷的進(jìn)階合并去重、排序與查找數(shù)組是前端開發(fā)最常打交道的數(shù)據(jù)結(jié)構(gòu)之一很多日常需求其實(shí)就是“遍歷 條件處理”的組合拳。我記得有次做數(shù)據(jù)清洗需要把兩個(gè)接口返回的數(shù)組合并并去重當(dāng)時(shí)很多人直接用雙重循環(huán)去重代碼冗長性能還差。后來換成Set加展開運(yùn)算符一行搞定const arr1 [1, 2, 3, 4]; const arr2 [3, 4, 5, 6]; const merged [...new Set([...arr1, ...arr2])]; console.log(merged); // [1, 2, 3, 4, 5, 6]雖然這里沒有顯式寫循環(huán)但Set去重的底層邏輯就是哈希表式的遍歷。理解循環(huán)能幫你讀懂這些語法糖背后的真實(shí)行為不要以為不寫for就真的沒有循環(huán)。數(shù)組排序也經(jīng)常用循環(huán)思維去理解。比如手寫一個(gè)簡單的冒泡排序雖然業(yè)務(wù)中更多會(huì)用Array.prototype.sort但初學(xué)者用for嵌套親手寫一次排序?qū)Α把h(huán)控制變量”“交換位置”“內(nèi)層循環(huán)邊界”這些概念的理解會(huì)一下子立體起來function bubbleSort(arr) { const result [...arr]; for (let i 0; i result.length - 1; i) { let swapped false; for (let j 0; j result.length - 1 - i; j) { if (result[j] result[j 1]) { [result[j], result[j 1]] [result[j 1], result[j]]; swapped true; } } if (!swapped) break; // 一輪下來沒有交換說明已經(jīng)有序 } return result; }這里我留了個(gè)優(yōu)化細(xì)節(jié)內(nèi)層循環(huán)的終點(diǎn)是result.length - 1 - i。原因很簡單每一輪冒泡都會(huì)把當(dāng)前未排區(qū)間的最大值“冒”到最后已經(jīng)排好的位置就不用再碰了。如果某次內(nèi)層循環(huán)一個(gè)交換都沒發(fā)生說明整個(gè)數(shù)組已經(jīng)有序直接break能省下后續(xù)無意義的比較。查找和過濾就更不用說了filter、find、findIndex這些方法背后都對(duì)應(yīng)著循環(huán)遍歷。理解循環(huán)的本質(zhì)不管用方法還是用語句心里都門兒清。3.2 對(duì)象遍歷的邊界只取自身屬性別帶上原型鏈對(duì)象遍歷的熱搜詞里有“js 獲取字典的所有值”。在實(shí)際場景里我們經(jīng)常要從一個(gè)對(duì)象里提取所有值或者遍歷鍵值對(duì)。最直接的辦法是用Object.keys配合forEach或者直接用for...inconst dict { apple: 1, banana: 2, cherry: 3 }; // 方式一 Object.keys(dict).forEach((key) { console.log(key, dict[key]); }); // 方式二 for (const key in dict) { if (Object.hasOwn(dict, key)) { console.log(key, dict[key]); } }關(guān)于for...in必須強(qiáng)調(diào)一個(gè)原則不檢查原型鏈就遍歷對(duì)象屬性等于在走鋼絲。因?yàn)槿魏卧谠蜕蠑U(kuò)展過屬性的代碼都可能污染你的遍歷結(jié)果。ES2022 之后推薦用Object.hasOwn替代傳統(tǒng)Object.prototype.hasOwnProperty.call寫法更簡潔也避免了對(duì)象自身hasOwnProperty被覆蓋的問題。還有一個(gè)細(xì)節(jié)for...in遍歷對(duì)象屬性時(shí)鍵名的排列順序不是完全按照“插入順序”的。整數(shù)鍵名會(huì)先按升序排列然后才是字符串鍵名按插入順序排列。這個(gè)特性了解即可前端業(yè)務(wù)里依賴對(duì)象鍵序遍歷順序的場景其實(shí)很少真要講究順序該用Map而不是普通對(duì)象。3.3 DOM 遍歷實(shí)戰(zhàn)獲取節(jié)點(diǎn)列表后的循環(huán)處理現(xiàn)在換到一個(gè)前端更日常的場景——DOM。document.querySelectorAll返回的是一個(gè)NodeList它不是真正的數(shù)組但可以被forEach直接調(diào)用。比如要給頁面上所有.card元素綁定點(diǎn)擊事件document.querySelectorAll(.card).forEach((card, index) { card.addEventListener(click, () { console.log(點(diǎn)擊了第 ${index 1} 張卡片); }); });這里隱藏著一個(gè)典型坑NodeList的forEach在部分舊瀏覽器比如舊版 IE里是不存在的如果你需要兼容舊環(huán)境先轉(zhuǎn)成數(shù)組更穩(wěn)妥Array.prototype.slice.call(document.querySelectorAll(.card)).forEach(...)現(xiàn)在寫項(xiàng)目大多用現(xiàn)代瀏覽器了這個(gè)兼容問題不常見但如果維護(hù)老系統(tǒng)還是留個(gè)心眼。另一個(gè) DOM 場景是“市州三級(jí)聯(lián)動(dòng)”這種選擇省份聯(lián)動(dòng)城市再聯(lián)動(dòng)區(qū)縣。下拉框的選項(xiàng)本質(zhì)上就是用for循環(huán)生成option元素追加進(jìn)去。我當(dāng)初實(shí)現(xiàn)的時(shí)候是這樣處理的function renderOptions(selectEl, options) { selectEl.innerHTML ; options.forEach((opt) { const option document.createElement(option); option.value opt.code; option.textContent opt.name; selectEl.appendChild(option); }); } // 省變化時(shí)渲染城市列表 renderOptions(citySelect, cityDataMap[provinceValue]);這里為什么不用innerHTML拼接字符串因?yàn)閕nsertAdjacentHTML或innerHTML在數(shù)據(jù)量大的時(shí)候雖然快但容易引入 XSS 風(fēng)險(xiǎn)而且動(dòng)態(tài)綁定事件還得二次查找。createElement逐項(xiàng)創(chuàng)建雖然代碼多但職責(zé)清晰數(shù)據(jù)可控安全系數(shù)也更高。小型下拉框完全夠用這算是實(shí)操中的取舍經(jīng)驗(yàn)。3.4 循環(huán)與事件循環(huán)異步邏輯下的陷阱與正確姿勢熱詞里出現(xiàn)了“js 事件循環(huán)”這里很容易和循環(huán)語句扯上關(guān)系但大家要注意區(qū)分事件循環(huán)Event Loop是 JS 運(yùn)行時(shí)處理異步任務(wù)的機(jī)制而循環(huán)語句是同步代碼的重復(fù)執(zhí)行結(jié)構(gòu)。不過兩者確實(shí)會(huì)相遇最經(jīng)典的問題就是變量作用域。先看這個(gè)著名面試題for (var i 0; i 5; i) { setTimeout(() { console.log(i); }, 0); } // 輸出5 5 5 5 5用var聲明時(shí)i是函數(shù)作用域整個(gè)循環(huán)共享同一個(gè)變量。等到定時(shí)器里的回調(diào)真正執(zhí)行時(shí)循環(huán)早就跑完了i已經(jīng)停在 5所以打印的全是 5。解決辦法有兩個(gè)一個(gè)是把var換成letES6 的塊級(jí)作用域會(huì)讓每一輪循環(huán)的i獨(dú)立保存一份另一個(gè)是用閉包包一層for (var i 0; i 5; i) { (function (j) { setTimeout(() { console.log(j); }, 0); })(i); }這個(gè)問題的根源在于 JS 事件循環(huán)的“先走完同步任務(wù)再執(zhí)行異步回調(diào)”機(jī)制。理解了這個(gè)底層邏輯再遇到 setTimeout 里拿到錯(cuò)誤值、循環(huán)發(fā)請(qǐng)求總是取到最后一項(xiàng)這種問題就不會(huì)兩眼一抹黑了。還有一類經(jīng)常踩的坑是在for...of循環(huán)里配合async/await做逐項(xiàng)異步操作async function processList(list) { for (const item of list) { await fetchData(item); } }for...of在 ES2018 之后天然支持await可以確保每次拿完數(shù)據(jù)再進(jìn)下一次循環(huán)。如果你用forEach來寫里面的“await”實(shí)際上是無效的——forEach不會(huì)停下來等異步回調(diào)完成導(dǎo)致所有請(qǐng)求同時(shí)發(fā)出順序完全失控。所以記住循環(huán)里有異步依賴時(shí)優(yōu)先選for...of而不是forEach這是無數(shù)人踩出來的經(jīng)驗(yàn)。4. 高頻問題與排查實(shí)錄循環(huán)里的那些實(shí)戰(zhàn)大坑代碼寫得越多越發(fā)現(xiàn)“技術(shù)點(diǎn)易講疑難雜癥難排”。循環(huán)語句涉及的問題類型其實(shí)相當(dāng)集中下面把我遇到的幾個(gè)高發(fā)問題跟排查思路分享一下每一項(xiàng)背后都是我或者同行在真機(jī)環(huán)境里折騰過的經(jīng)驗(yàn)。4.1 死循環(huán)為什么頁面卡死了死循環(huán)是最讓人頭大的問題之一表現(xiàn)通常很直接頁面無響應(yīng)、CPU 占用飆高、瀏覽器標(biāo)簽頁崩潰。常見的死循環(huán)寫法有幾類。第一類是循環(huán)條件寫反或者忘記更新let i 0; while (i 10) { // 忘了寫 ii 永遠(yuǎn)是 0 }第二類是條件判斷使用了永不變化的表達(dá)式let isRunning true; while (isRunning) { // 里面沒有把 isRunning 改成 false 的分支 }第三類在業(yè)務(wù)代碼里更容易出現(xiàn)就是循環(huán)條件里用到浮點(diǎn)數(shù)比較。比如for (let i 0; i ! 1; i 0.1) { // 浮點(diǎn)累加存在精度誤差i 可能永遠(yuǎn)不等于 1 }因?yàn)?JS 的浮點(diǎn)數(shù)是 IEEE 754 標(biāo)準(zhǔn)0.1 0.2 ! 0.3這個(gè)老梗很多人都知道但在循環(huán)里寫成i ! 1這種精確比較往往真的會(huì)死循環(huán)。排查這種問題的方式很簡單在循環(huán)體里加個(gè)計(jì)數(shù)器超過預(yù)期次數(shù)直接break或者用i 1這類范圍判斷替代相等判斷。我做代碼審查時(shí)有個(gè)習(xí)慣看到while和do...while第一眼看條件表達(dá)式是否會(huì)變化看到for第一眼看更新表達(dá)式是否真的能推進(jìn)循環(huán)。這兩眼能擋住大半的死循環(huán) bug。4.2 循環(huán)里的閉包陷阱變量還是原來的變量閉包陷阱在事件綁定和異步回調(diào)里最常見。前面提過的 setTimeout 打印問題就是一個(gè)典型案例再舉一個(gè)實(shí)際業(yè)務(wù)場景const buttons document.querySelectorAll(.tab-btn); for (var i 0; i buttons.length; i) { buttons[i].onclick function () { console.log(點(diǎn)擊了第 i 個(gè)按鈕); }; }結(jié)果是點(diǎn)任何按鈕都打出一個(gè)數(shù)字而且往往是最后一個(gè)索引。原因還是var的函數(shù)作用域?qū)е滤谢卣{(diào)共享同一個(gè)i。用let是最省心的修復(fù)for (let i 0; i buttons.length; i) { buttons[i].onclick function () { console.log(點(diǎn)擊了第 i 個(gè)按鈕); }; }如果不方便用let用 IIFE立即執(zhí)行函數(shù)表達(dá)式也可以for (var i 0; i buttons.length; i) { (function (index) { buttons[index].onclick function () { console.log(點(diǎn)擊了第 index 個(gè)按鈕); }; })(i); }排查這類問題時(shí)我一般先看變量聲明是var還是let然后把循環(huán)體里注冊的回調(diào)想象成“延遲執(zhí)行”的代碼問自己一個(gè)問題這些回調(diào)真正執(zhí)行時(shí)循環(huán)變量已經(jīng)變成什么了想清楚這個(gè)閉包陷阱十有八九都能避開。4.3 循環(huán)方法的性能差異別在不需要優(yōu)化的時(shí)候過度優(yōu)化前端社區(qū)里關(guān)于“哪種循環(huán)性能最好”的爭論不少有人測出for比forEach快有人說for...of最慢。我的觀點(diǎn)是在小數(shù)組幾百幾千條的情況下幾種循環(huán)方式的性能差距小于一個(gè)數(shù)量級(jí)對(duì)用戶體驗(yàn)沒有任何可感知的影響完全不需要糾結(jié)。真正影響性能的是“循環(huán)體內(nèi)部做了什么”。比如在循環(huán)里反復(fù)操作 DOM就是明顯的性能殺手。每操作一次 DOM瀏覽器都要觸發(fā)重排或重繪幾百上千次下來頁面就很難受。正確做法是先在循環(huán)里拼好數(shù)據(jù)最后一次性更新視圖const container document.getElementById(list); const fragment document.createDocumentFragment(); data.forEach((item) { const li document.createElement(li); li.textContent item.name; fragment.appendChild(li); }); container.appendChild(fragment);這里還用到了DocumentFragment把多次 DOM 操作合并成一次整體插入瀏覽器開銷立刻降下來。這個(gè)優(yōu)化思路我覺得比糾結(jié)for還是forEach的性能差異有價(jià)值得多。另一個(gè)影響性能的點(diǎn)是“循環(huán)里做重復(fù)計(jì)算”。比如每次循環(huán)都取array.length老優(yōu)化教程會(huì)說“先存到變量里”。但現(xiàn)代 V8 引擎早就對(duì)這類基礎(chǔ)操作做了優(yōu)化手動(dòng)存不存基本沒差別。真正要注意的是循環(huán)體內(nèi)不要有層數(shù)過深的嵌套或大量不必要的函數(shù)調(diào)用。4.4 常見問題速查表把高頻問題做一個(gè)速查表方便排查時(shí)直接對(duì)照癥狀可能原因解決路徑循環(huán)跳不出去頁面無響應(yīng)條件永遠(yuǎn)為真 / 沒寫更新表達(dá)式檢查條件表達(dá)式可變性加最大次數(shù)保護(hù)forEach里用break報(bào)語法錯(cuò)forEach不支持中斷控制改用for...of或some點(diǎn)擊事件全部取到最后一項(xiàng)的值var閉包共享同一變量用let聲明或 IIFE 包裹循環(huán)里發(fā)請(qǐng)求順序亂、結(jié)果不對(duì)forEach不能等待異步完成改用for...ofawaitfor...in遍歷對(duì)象多出屬性原型鏈上的可枚舉屬性被遍歷用Object.hasOwn過濾循環(huán)里頻繁操作 DOM 頁面卡頓多次觸發(fā)重排重繪用DocumentFragment批量插入對(duì)象鍵遍歷順序和插入順序不一致整數(shù)鍵名會(huì)按升序重排需要保序時(shí)用Map4.5 一個(gè)經(jīng)常忽視的問題空數(shù)組與邊界條件邊界問題看起來不起眼實(shí)際最容易出事故。比如空數(shù)組時(shí)for...of和forEach都是靜默跳過但如果你用do...while而循環(huán)體里又在沒數(shù)據(jù)時(shí)調(diào)用了不存在的字段就會(huì)直接拋錯(cuò)。我見過這樣一個(gè)線上問題某頁面用while循環(huán)讀取分頁數(shù)據(jù)接口第一頁有數(shù)據(jù)第二頁數(shù)量為 0代碼里用while (pageData.length 0)作為條件結(jié)果沒問題。但另一個(gè)同事改成了do...while先執(zhí)行一次循環(huán)體再去判斷在數(shù)據(jù)源本來就是空的情況下第一次循環(huán)體就拿到空數(shù)據(jù)再嘗試取data[0].name時(shí)就崩了。排查到之后我專門在代碼里加了對(duì)“空結(jié)果立即返回”的保護(hù)這個(gè)場景的教訓(xùn)就是寫循環(huán)前先問自己——如果一次都不該執(zhí)行這個(gè)循環(huán)能正確退出嗎5. 從會(huì)寫到寫對(duì)循環(huán)語句的學(xué)習(xí)路徑建議很多初學(xué)者學(xué)循環(huán)靠的是背語法、刷例題然后直接在項(xiàng)目里套用。我建議換個(gè)路徑先理解“為什么要有循環(huán)語句”再理解“每種循環(huán)對(duì)應(yīng)的控制流差異”最后通過“改錯(cuò)題”和“實(shí)際場景”來鞏固。改錯(cuò)題是效率很高的方式。比如給你一段死循環(huán)的while讓你在兩分鐘之內(nèi)找出原因給你一段閉包陷阱的按鈕點(diǎn)擊讓你解釋為什么打印結(jié)果不對(duì)。這些問題一開始可能想不通但只要在實(shí)際調(diào)試器里打斷點(diǎn)跑一遍觀察每次循環(huán)時(shí)變量值的變化理解就會(huì)非常牢靠。實(shí)際場景方面可以找?guī)讉€(gè)高頻需求練手用循環(huán)實(shí)現(xiàn)數(shù)組去重不限方法用循環(huán)把一個(gè)多維數(shù)組展平成一維數(shù)組用循環(huán)生成一份“全排列”或“九九乘法表”在大列表接口中用循環(huán)配合await分頁抓取全部數(shù)據(jù)內(nèi)層循環(huán)里發(fā)現(xiàn)條件滿足嘗試用標(biāo)簽跳出兩層循環(huán)。做完這幾個(gè)題目再回頭看for...of、forEach、while這些選擇就會(huì)有一種“這把工具是干這活的那把工具是干那活的”的感覺而不是死記硬背選哪個(gè)。我個(gè)人在實(shí)際使用中的體會(huì)是循環(huán)語句是一面鏡子它能照出一個(gè)人對(duì)“變量作用域”“異步執(zhí)行順序”“數(shù)據(jù)結(jié)構(gòu)”這三件事的理解程度。很多人寫不好循環(huán)根源并不是循環(huán)語法不會(huì)而是作用域和事件循環(huán)的底層機(jī)制沒吃透。把這三件事理順了循環(huán)問題基本就解決了一大半。希望這篇梳理能幫你把循環(huán)語句用得更順手下次遇到莫名其妙的遍歷 bug心里能多幾條排查的路線。 JavaScript循環(huán)語句完全指南：從語法到異步與性能優(yōu)化
在項(xiàng)目里被循環(huán)語句卡住過的人應(yīng)該不在少數(shù)。不管你是剛接觸 JavaScript 的新手還是寫了幾年業(yè)務(wù)代碼的老手只要跟數(shù)組、對(duì)象、DOM 元素打過交道就一定繞不開 for、while、forEach 這些老朋友。但循環(huán)語句遠(yuǎn)不止“重復(fù)執(zhí)行代碼”這么簡單選錯(cuò)循環(huán)方式、沒搞懂中斷機(jī)制、循環(huán)里碰到異步邏輯都可能讓你的程序跑出讓人摸不著頭腦的結(jié)果。這篇博文就圍繞 JS 循環(huán)語句做一次系統(tǒng)梳理從基礎(chǔ)寫法、選型思路、中斷控制到底層執(zhí)行原理再到幾個(gè)高頻踩坑場景把我自己實(shí)際用下來的經(jīng)驗(yàn)一起放進(jìn)去。內(nèi)容適合零基礎(chǔ)入門的朋友也適合想查漏補(bǔ)缺的初中級(jí)開發(fā)者你可以把它當(dāng)成一份 JS 循環(huán)主題的工具手冊來用。1. JS 循環(huán)語句全家桶每種寫法的脾氣和性格寫循環(huán)的人最怕什么最怕的是“只知道一種寫法遇到問題就硬套”。JS 里的循環(huán)語句說多不多說少也不少實(shí)際開發(fā)中高頻出現(xiàn)的無非就是for、while、do...while、for...in、for...of和數(shù)組的forEach。它們的語法都很簡單但背后的適用場景千差萬別。1.1 循環(huán)語句的基礎(chǔ)形態(tài)對(duì)比先看最傳統(tǒng)的for循環(huán)它的本質(zhì)是“三個(gè)表達(dá)式驅(qū)動(dòng)”的循環(huán)控制結(jié)構(gòu)for (初始化表達(dá)式; 條件表達(dá)式; 更新表達(dá)式) { // 循環(huán)體 }執(zhí)行順序是這樣的先執(zhí)行初始化表達(dá)式然后判斷條件表達(dá)式是否為真為真就進(jìn)入循環(huán)體循環(huán)體執(zhí)行完再執(zhí)行更新表達(dá)式更新完回頭繼續(xù)判斷條件。這個(gè)順序必須記牢因?yàn)樗鼪Q定了你到底循環(huán)多少次、什么時(shí)候退出。while循環(huán)則是“先判斷、后執(zhí)行”的典型代表while (條件表達(dá)式) { // 循環(huán)體 }它只有條件判斷內(nèi)部要自己維護(hù)變量的變化。如果條件永遠(yuǎn)為真就會(huì)死循環(huán)。我見過不少新人寫while (true)忘了寫 break 的頁面直接假死這個(gè)問題后面會(huì)專門說。do...while則是“先執(zhí)行、后判斷”do { // 循環(huán)體 } while (條件表達(dá)式);它的特點(diǎn)是循環(huán)體至少會(huì)執(zhí)行一次。這看起來只是順序差異實(shí)際業(yè)務(wù)里卻能派上大用場。比如你要從用戶輸入里讀取一段內(nèi)容要求“至少輸入一次之后判斷是否繼續(xù)”用do...while就比while自然得多。至于for...in它被設(shè)計(jì)用來遍歷對(duì)象的可枚舉屬性const person { name: 張三, age: 30 }; for (const key in person) { console.log(key, person[key]); }這里有個(gè)所有人都應(yīng)該知道的坑for...in不只遍歷對(duì)象自身的屬性還會(huì)把原型鏈上可枚舉的屬性一起帶出來。所以實(shí)際項(xiàng)目中如果沒有hasOwnProperty的檢查很容易遍歷出你根本不需要的東西。for...of是 ES6 引入的遍歷方式專門為可迭代對(duì)象設(shè)計(jì)比如數(shù)組、字符串、Map、Set 這些const list [10, 20, 30]; for (const item of list) { console.log(item); }它是這幾類循環(huán)里寫起來最舒服的代碼簡潔不會(huì)像for...in那樣把索引當(dāng)成字符串取出來也不會(huì)遍歷到原型鏈上的屬性。最后是數(shù)組的forEach方法嚴(yán)格來說它不是“語句”而是數(shù)組原型上的一個(gè)方法[1, 2, 3].forEach((item, index) { console.log(index, item); });forEach代碼更語義化適合做遍歷操作但它在控制循環(huán)方面非常死板break和continue對(duì)它無效。這一點(diǎn)后面我會(huì)專門用一小節(jié)展開講。1.2 不同循環(huán)的實(shí)現(xiàn)形態(tài)一覽用一張表把它們的核心差異整理出來方便遇到場景時(shí)快速選型循環(huán)方式適用對(duì)象能否 break/continue是否支持 return典型場景for數(shù)組、次數(shù)已知的循環(huán)支持函數(shù)內(nèi)支持計(jì)數(shù)循環(huán)、按索引操作while條件驅(qū)動(dòng)型循環(huán)支持函數(shù)內(nèi)支持讀取數(shù)據(jù)直到結(jié)束do...while至少執(zhí)行一次的循環(huán)支持函數(shù)內(nèi)支持菜單選擇、重試邏輯for...in對(duì)象屬性支持函數(shù)內(nèi)支持遍歷對(duì)象鍵名for...of可迭代對(duì)象支持函數(shù)內(nèi)支持遍歷值而非索引forEach數(shù)組不支持只結(jié)束本次回調(diào)簡單遍歷、UI 渲染分類查表只是第一步要真正用好還得理解“為什么這個(gè)場景適合這種循環(huán)”。比如for...of能直接拿到值而不是索引這在處理字符串、Map 這類數(shù)據(jù)時(shí)優(yōu)勢特別明顯而for循環(huán)的優(yōu)勢在于需要同時(shí)控制多個(gè)起點(diǎn)、終點(diǎn)和步長時(shí)你想怎么走就怎么走靈活性無人能比。2. 循環(huán)的中斷與跳過break、continue、return 到底怎么用循環(huán)寫多了你會(huì)發(fā)現(xiàn)一個(gè)循環(huán)里并不總是要老老實(shí)實(shí)跑滿全部次數(shù)。找數(shù)據(jù)找到就直接退出更高效遇到不合法的值跳過就完事。這時(shí)候怎么打斷、怎么跳過就成了區(qū)分代碼水平高低的細(xì)節(jié)。2.1 break 與 continue最基礎(chǔ)的斷路開關(guān)break的作用是立即終止整個(gè)循環(huán)后面的循環(huán)次數(shù)不再執(zhí)行。continue則是跳過本輪循環(huán)的剩余代碼直接進(jìn)入下一輪判斷?？匆粋€(gè)搜索數(shù)組的例子const numbers [3, 8, 15, 6, 9]; let targetIndex -1; for (let i 0; i numbers.length; i) { if (numbers[i] 15) { targetIndex i; break; // 找到了就不繼續(xù)翻了 } } console.log(targetIndex); // 2這就是break的典型場景查到了目標(biāo)直接退出避免無意義的后續(xù)遍歷。再看continue的典型場景比如過濾掉數(shù)組里的偶數(shù)并打印奇數(shù)for (let i 0; i 10; i) { if (i % 2 0) { continue; // 偶數(shù)直接跳過打印 } console.log(i); // 1 3 5 7 9 }很多人寫代碼時(shí)習(xí)慣用“取反 if 嵌套”代替continue。比如上面這段我也經(jīng)常見到有人寫成for (let i 0; i 10; i) { if (i % 2 ! 0) { console.log(i); } }這兩種寫法在結(jié)果上沒區(qū)別但從代碼可讀性角度看continue能減少一層嵌套尤其在循環(huán)體里本來就有很多邏輯的時(shí)候提前continue掉“不需要處理的場景”后面的代碼就能默認(rèn)“都是要處理的場景”心智負(fù)擔(dān)會(huì)小很多。2.2 多層循環(huán)break 只能跳出最內(nèi)層怎么辦不知道你有沒有遇到過這種情況寫了一個(gè)雙層循環(huán)在里層發(fā)現(xiàn)條件滿足想著break一下直接結(jié)束兩層循環(huán)結(jié)果程序只跳出了里層外層還在那不知疲倦地繼續(xù)跑。JS 里break只能終止它所在的最近一層循環(huán)這是很多初學(xué)者踩過的坑。解決的辦法有兩個(gè)一個(gè)是額外加個(gè)標(biāo)志位let shouldStop false; for (let i 0; i 5 !shouldStop; i) { for (let j 0; j 5; j) { if (i * j 12) { shouldStop true; break; } } }另一個(gè)更優(yōu)雅的方式是用標(biāo)簽語句label。給外層循環(huán)起個(gè)名字里層break的時(shí)候指名道姓要跳出哪個(gè)循環(huán)outer: for (let i 0; i 5; i) { for (let j 0; j 5; j) { if (i * j 12) { break outer; } } }這個(gè)寫法的可讀性其實(shí)比標(biāo)志位強(qiáng)很多但需要團(tuán)隊(duì)里的人看得懂標(biāo)簽語法。標(biāo)簽語句在早期 JS 里用的人少很多前端開發(fā)者沒見過所以我一般在團(tuán)隊(duì)自用代碼里會(huì)用標(biāo)簽在對(duì)外提交的代碼里會(huì)改成標(biāo)志位減少溝通成本。2.3 forEach 里怎么“打斷”三個(gè)替代方案這是我在工作中被問得最多的問題之一——forEach不支持break和continue那在forEach里怎么中斷遍歷先說結(jié)論forEach無法被真正中斷。它的設(shè)計(jì)初衷就是“對(duì)每個(gè)元素執(zhí)行一次回調(diào)”你在回調(diào)里面寫break會(huì)直接報(bào)語法錯(cuò)誤寫continue同樣報(bào)錯(cuò)。此時(shí)正常寫法的確應(yīng)該換成for...of循環(huán)但如果你就是想在鏈?zhǔn)秸{(diào)用的場景里實(shí)現(xiàn)類似效果一般有三個(gè)替代思路。第一個(gè)思路是“提前 return”模擬continue[1, 2, 3, 4, 5].forEach((item) { if (item % 2 0) return; console.log(item); // 1 3 5 });注意這個(gè)return只是結(jié)束當(dāng)前這一次回調(diào)并不是跳出整個(gè)forEach。所以它只等價(jià)于continue沒法等價(jià)于break。第二個(gè)思路是“用拋出異常的方式強(qiáng)制中斷”try { [1, 2, 3, 4, 5].forEach((item) { if (item 3) throw new Error(break loop); console.log(item); }); } catch (e) { // 到這里遍歷就被中斷了 }這個(gè)方法確實(shí)能打斷遍歷但非常不優(yōu)雅還會(huì)被代碼評(píng)審的同事抓著問半天。我自己只在面試題里講這個(gè)思路實(shí)際項(xiàng)目里不會(huì)真這么用。第三個(gè)思路最實(shí)在非要中斷提前用some或find這類“可?！钡臄?shù)組方法。some遍歷時(shí)一旦回調(diào)返回true就會(huì)立刻停止遍歷[1, 2, 3, 4, 5].some((item) { console.log(item); return item 3; // 遍歷到 3 就停止 });這本質(zhì)上不是“打斷forEach”而是換了一種“既能鏈?zhǔn)秸{(diào)用、又能提前?！钡谋闅v方式。所以我的經(jīng)驗(yàn)是如果你一開始就預(yù)感到“這個(gè)遍歷可能需要提前退出”那就壓根不要選forEach直接用for...of干凈利落。3. 循環(huán)實(shí)操全景數(shù)組、對(duì)象、DOM 與異步場景的落地寫法光會(huì)寫循環(huán)體的語法還不夠真正的工作里循環(huán)要處理的是真實(shí)數(shù)據(jù)數(shù)組去重、對(duì)象取值、DOM 節(jié)點(diǎn)遍歷、異步邏輯里的循環(huán)每一個(gè)場景都有它獨(dú)特的講究。3.1 數(shù)組遍歷的進(jìn)階合并去重、排序與查找數(shù)組是前端開發(fā)最常打交道的數(shù)據(jù)結(jié)構(gòu)之一很多日常需求其實(shí)就是“遍歷 條件處理”的組合拳。我記得有次做數(shù)據(jù)清洗需要把兩個(gè)接口返回的數(shù)組合并并去重當(dāng)時(shí)很多人直接用雙重循環(huán)去重代碼冗長性能還差。后來換成Set加展開運(yùn)算符一行搞定const arr1 [1, 2, 3, 4]; const arr2 [3, 4, 5, 6]; const merged [...new Set([...arr1, ...arr2])]; console.log(merged); // [1, 2, 3, 4, 5, 6]雖然這里沒有顯式寫循環(huán)但Set去重的底層邏輯就是哈希表式的遍歷。理解循環(huán)能幫你讀懂這些語法糖背后的真實(shí)行為不要以為不寫for就真的沒有循環(huán)。數(shù)組排序也經(jīng)常用循環(huán)思維去理解。比如手寫一個(gè)簡單的冒泡排序雖然業(yè)務(wù)中更多會(huì)用Array.prototype.sort但初學(xué)者用for嵌套親手寫一次排序?qū)Α把h(huán)控制變量”“交換位置”“內(nèi)層循環(huán)邊界”這些概念的理解會(huì)一下子立體起來function bubbleSort(arr) { const result [...arr]; for (let i 0; i result.length - 1; i) { let swapped false; for (let j 0; j result.length - 1 - i; j) { if (result[j] result[j 1]) { [result[j], result[j 1]] [result[j 1], result[j]]; swapped true; } } if (!swapped) break; // 一輪下來沒有交換說明已經(jīng)有序 } return result; }這里我留了個(gè)優(yōu)化細(xì)節(jié)內(nèi)層循環(huán)的終點(diǎn)是result.length - 1 - i。原因很簡單每一輪冒泡都會(huì)把當(dāng)前未排區(qū)間的最大值“冒”到最后已經(jīng)排好的位置就不用再碰了。如果某次內(nèi)層循環(huán)一個(gè)交換都沒發(fā)生說明整個(gè)數(shù)組已經(jīng)有序直接break能省下后續(xù)無意義的比較。查找和過濾就更不用說了filter、find、findIndex這些方法背后都對(duì)應(yīng)著循環(huán)遍歷。理解循環(huán)的本質(zhì)不管用方法還是用語句心里都門兒清。3.2 對(duì)象遍歷的邊界只取自身屬性別帶上原型鏈對(duì)象遍歷的熱搜詞里有“js 獲取字典的所有值”。在實(shí)際場景里我們經(jīng)常要從一個(gè)對(duì)象里提取所有值或者遍歷鍵值對(duì)。最直接的辦法是用Object.keys配合forEach或者直接用for...inconst dict { apple: 1, banana: 2, cherry: 3 }; // 方式一 Object.keys(dict).forEach((key) { console.log(key, dict[key]); }); // 方式二 for (const key in dict) { if (Object.hasOwn(dict, key)) { console.log(key, dict[key]); } }關(guān)于for...in必須強(qiáng)調(diào)一個(gè)原則不檢查原型鏈就遍歷對(duì)象屬性等于在走鋼絲。因?yàn)槿魏卧谠蜕蠑U(kuò)展過屬性的代碼都可能污染你的遍歷結(jié)果。ES2022 之后推薦用Object.hasOwn替代傳統(tǒng)Object.prototype.hasOwnProperty.call寫法更簡潔也避免了對(duì)象自身hasOwnProperty被覆蓋的問題。還有一個(gè)細(xì)節(jié)for...in遍歷對(duì)象屬性時(shí)鍵名的排列順序不是完全按照“插入順序”的。整數(shù)鍵名會(huì)先按升序排列然后才是字符串鍵名按插入順序排列。這個(gè)特性了解即可前端業(yè)務(wù)里依賴對(duì)象鍵序遍歷順序的場景其實(shí)很少真要講究順序該用Map而不是普通對(duì)象。3.3 DOM 遍歷實(shí)戰(zhàn)獲取節(jié)點(diǎn)列表后的循環(huán)處理現(xiàn)在換到一個(gè)前端更日常的場景——DOM。document.querySelectorAll返回的是一個(gè)NodeList它不是真正的數(shù)組但可以被forEach直接調(diào)用。比如要給頁面上所有.card元素綁定點(diǎn)擊事件document.querySelectorAll(.card).forEach((card, index) { card.addEventListener(click, () { console.log(點(diǎn)擊了第 ${index 1} 張卡片); }); });這里隱藏著一個(gè)典型坑NodeList的forEach在部分舊瀏覽器比如舊版 IE里是不存在的如果你需要兼容舊環(huán)境先轉(zhuǎn)成數(shù)組更穩(wěn)妥Array.prototype.slice.call(document.querySelectorAll(.card)).forEach(...)現(xiàn)在寫項(xiàng)目大多用現(xiàn)代瀏覽器了這個(gè)兼容問題不常見但如果維護(hù)老系統(tǒng)還是留個(gè)心眼。另一個(gè) DOM 場景是“市州三級(jí)聯(lián)動(dòng)”這種選擇省份聯(lián)動(dòng)城市再聯(lián)動(dòng)區(qū)縣。下拉框的選項(xiàng)本質(zhì)上就是用for循環(huán)生成option元素追加進(jìn)去。我當(dāng)初實(shí)現(xiàn)的時(shí)候是這樣處理的function renderOptions(selectEl, options) { selectEl.innerHTML ; options.forEach((opt) { const option document.createElement(option); option.value opt.code; option.textContent opt.name; selectEl.appendChild(option); }); } // 省變化時(shí)渲染城市列表 renderOptions(citySelect, cityDataMap[provinceValue]);這里為什么不用innerHTML拼接字符串因?yàn)閕nsertAdjacentHTML或innerHTML在數(shù)據(jù)量大的時(shí)候雖然快但容易引入 XSS 風(fēng)險(xiǎn)而且動(dòng)態(tài)綁定事件還得二次查找。createElement逐項(xiàng)創(chuàng)建雖然代碼多但職責(zé)清晰數(shù)據(jù)可控安全系數(shù)也更高。小型下拉框完全夠用這算是實(shí)操中的取舍經(jīng)驗(yàn)。3.4 循環(huán)與事件循環(huán)異步邏輯下的陷阱與正確姿勢熱詞里出現(xiàn)了“js 事件循環(huán)”這里很容易和循環(huán)語句扯上關(guān)系但大家要注意區(qū)分事件循環(huán)Event Loop是 JS 運(yùn)行時(shí)處理異步任務(wù)的機(jī)制而循環(huán)語句是同步代碼的重復(fù)執(zhí)行結(jié)構(gòu)。不過兩者確實(shí)會(huì)相遇最經(jīng)典的問題就是變量作用域。先看這個(gè)著名面試題for (var i 0; i 5; i) { setTimeout(() { console.log(i); }, 0); } // 輸出5 5 5 5 5用var聲明時(shí)i是函數(shù)作用域整個(gè)循環(huán)共享同一個(gè)變量。等到定時(shí)器里的回調(diào)真正執(zhí)行時(shí)循環(huán)早就跑完了i已經(jīng)停在 5所以打印的全是 5。解決辦法有兩個(gè)一個(gè)是把var換成letES6 的塊級(jí)作用域會(huì)讓每一輪循環(huán)的i獨(dú)立保存一份另一個(gè)是用閉包包一層for (var i 0; i 5; i) { (function (j) { setTimeout(() { console.log(j); }, 0); })(i); }這個(gè)問題的根源在于 JS 事件循環(huán)的“先走完同步任務(wù)再執(zhí)行異步回調(diào)”機(jī)制。理解了這個(gè)底層邏輯再遇到 setTimeout 里拿到錯(cuò)誤值、循環(huán)發(fā)請(qǐng)求總是取到最后一項(xiàng)這種問題就不會(huì)兩眼一抹黑了。還有一類經(jīng)常踩的坑是在for...of循環(huán)里配合async/await做逐項(xiàng)異步操作async function processList(list) { for (const item of list) { await fetchData(item); } }for...of在 ES2018 之后天然支持await可以確保每次拿完數(shù)據(jù)再進(jìn)下一次循環(huán)。如果你用forEach來寫里面的“await”實(shí)際上是無效的——forEach不會(huì)停下來等異步回調(diào)完成導(dǎo)致所有請(qǐng)求同時(shí)發(fā)出順序完全失控。所以記住循環(huán)里有異步依賴時(shí)優(yōu)先選for...of而不是forEach這是無數(shù)人踩出來的經(jīng)驗(yàn)。4. 高頻問題與排查實(shí)錄循環(huán)里的那些實(shí)戰(zhàn)大坑代碼寫得越多越發(fā)現(xiàn)“技術(shù)點(diǎn)易講疑難雜癥難排”。循環(huán)語句涉及的問題類型其實(shí)相當(dāng)集中下面把我遇到的幾個(gè)高發(fā)問題跟排查思路分享一下每一項(xiàng)背后都是我或者同行在真機(jī)環(huán)境里折騰過的經(jīng)驗(yàn)。4.1 死循環(huán)為什么頁面卡死了死循環(huán)是最讓人頭大的問題之一表現(xiàn)通常很直接頁面無響應(yīng)、CPU 占用飆高、瀏覽器標(biāo)簽頁崩潰。常見的死循環(huán)寫法有幾類。第一類是循環(huán)條件寫反或者忘記更新let i 0; while (i 10) { // 忘了寫 ii 永遠(yuǎn)是 0 }第二類是條件判斷使用了永不變化的表達(dá)式let isRunning true; while (isRunning) { // 里面沒有把 isRunning 改成 false 的分支 }第三類在業(yè)務(wù)代碼里更容易出現(xiàn)就是循環(huán)條件里用到浮點(diǎn)數(shù)比較。比如for (let i 0; i ! 1; i 0.1) { // 浮點(diǎn)累加存在精度誤差i 可能永遠(yuǎn)不等于 1 }因?yàn)?JS 的浮點(diǎn)數(shù)是 IEEE 754 標(biāo)準(zhǔn)0.1 0.2 ! 0.3這個(gè)老梗很多人都知道但在循環(huán)里寫成i ! 1這種精確比較往往真的會(huì)死循環(huán)。排查這種問題的方式很簡單在循環(huán)體里加個(gè)計(jì)數(shù)器超過預(yù)期次數(shù)直接break或者用i 1這類范圍判斷替代相等判斷。我做代碼審查時(shí)有個(gè)習(xí)慣看到while和do...while第一眼看條件表達(dá)式是否會(huì)變化看到for第一眼看更新表達(dá)式是否真的能推進(jìn)循環(huán)。這兩眼能擋住大半的死循環(huán) bug。4.2 循環(huán)里的閉包陷阱變量還是原來的變量閉包陷阱在事件綁定和異步回調(diào)里最常見。前面提過的 setTimeout 打印問題就是一個(gè)典型案例再舉一個(gè)實(shí)際業(yè)務(wù)場景const buttons document.querySelectorAll(.tab-btn); for (var i 0; i buttons.length; i) { buttons[i].onclick function () { console.log(點(diǎn)擊了第 i 個(gè)按鈕); }; }結(jié)果是點(diǎn)任何按鈕都打出一個(gè)數(shù)字而且往往是最后一個(gè)索引。原因還是var的函數(shù)作用域?qū)е滤谢卣{(diào)共享同一個(gè)i。用let是最省心的修復(fù)for (let i 0; i buttons.length; i) { buttons[i].onclick function () { console.log(點(diǎn)擊了第 i 個(gè)按鈕); }; }如果不方便用let用 IIFE立即執(zhí)行函數(shù)表達(dá)式也可以for (var i 0; i buttons.length; i) { (function (index) { buttons[index].onclick function () { console.log(點(diǎn)擊了第 index 個(gè)按鈕); }; })(i); }排查這類問題時(shí)我一般先看變量聲明是var還是let然后把循環(huán)體里注冊的回調(diào)想象成“延遲執(zhí)行”的代碼問自己一個(gè)問題這些回調(diào)真正執(zhí)行時(shí)循環(huán)變量已經(jīng)變成什么了想清楚這個(gè)閉包陷阱十有八九都能避開。4.3 循環(huán)方法的性能差異別在不需要優(yōu)化的時(shí)候過度優(yōu)化前端社區(qū)里關(guān)于“哪種循環(huán)性能最好”的爭論不少有人測出for比forEach快有人說for...of最慢。我的觀點(diǎn)是在小數(shù)組幾百幾千條的情況下幾種循環(huán)方式的性能差距小于一個(gè)數(shù)量級(jí)對(duì)用戶體驗(yàn)沒有任何可感知的影響完全不需要糾結(jié)。真正影響性能的是“循環(huán)體內(nèi)部做了什么”。比如在循環(huán)里反復(fù)操作 DOM就是明顯的性能殺手。每操作一次 DOM瀏覽器都要觸發(fā)重排或重繪幾百上千次下來頁面就很難受。正確做法是先在循環(huán)里拼好數(shù)據(jù)最后一次性更新視圖const container document.getElementById(list); const fragment document.createDocumentFragment(); data.forEach((item) { const li document.createElement(li); li.textContent item.name; fragment.appendChild(li); }); container.appendChild(fragment);這里還用到了DocumentFragment把多次 DOM 操作合并成一次整體插入瀏覽器開銷立刻降下來。這個(gè)優(yōu)化思路我覺得比糾結(jié)for還是forEach的性能差異有價(jià)值得多。另一個(gè)影響性能的點(diǎn)是“循環(huán)里做重復(fù)計(jì)算”。比如每次循環(huán)都取array.length老優(yōu)化教程會(huì)說“先存到變量里”。但現(xiàn)代 V8 引擎早就對(duì)這類基礎(chǔ)操作做了優(yōu)化手動(dòng)存不存基本沒差別。真正要注意的是循環(huán)體內(nèi)不要有層數(shù)過深的嵌套或大量不必要的函數(shù)調(diào)用。4.4 常見問題速查表把高頻問題做一個(gè)速查表方便排查時(shí)直接對(duì)照癥狀可能原因解決路徑循環(huán)跳不出去頁面無響應(yīng)條件永遠(yuǎn)為真 / 沒寫更新表達(dá)式檢查條件表達(dá)式可變性加最大次數(shù)保護(hù)forEach里用break報(bào)語法錯(cuò)forEach不支持中斷控制改用for...of或some點(diǎn)擊事件全部取到最后一項(xiàng)的值var閉包共享同一變量用let聲明或 IIFE 包裹循環(huán)里發(fā)請(qǐng)求順序亂、結(jié)果不對(duì)forEach不能等待異步完成改用for...ofawaitfor...in遍歷對(duì)象多出屬性原型鏈上的可枚舉屬性被遍歷用Object.hasOwn過濾循環(huán)里頻繁操作 DOM 頁面卡頓多次觸發(fā)重排重繪用DocumentFragment批量插入對(duì)象鍵遍歷順序和插入順序不一致整數(shù)鍵名會(huì)按升序重排需要保序時(shí)用Map4.5 一個(gè)經(jīng)常忽視的問題空數(shù)組與邊界條件邊界問題看起來不起眼實(shí)際最容易出事故。比如空數(shù)組時(shí)for...of和forEach都是靜默跳過但如果你用do...while而循環(huán)體里又在沒數(shù)據(jù)時(shí)調(diào)用了不存在的字段就會(huì)直接拋錯(cuò)。我見過這樣一個(gè)線上問題某頁面用while循環(huán)讀取分頁數(shù)據(jù)接口第一頁有數(shù)據(jù)第二頁數(shù)量為 0代碼里用while (pageData.length 0)作為條件結(jié)果沒問題。但另一個(gè)同事改成了do...while先執(zhí)行一次循環(huán)體再去判斷在數(shù)據(jù)源本來就是空的情況下第一次循環(huán)體就拿到空數(shù)據(jù)再嘗試取data[0].name時(shí)就崩了。排查到之后我專門在代碼里加了對(duì)“空結(jié)果立即返回”的保護(hù)這個(gè)場景的教訓(xùn)就是寫循環(huán)前先問自己——如果一次都不該執(zhí)行這個(gè)循環(huán)能正確退出嗎5. 從會(huì)寫到寫對(duì)循環(huán)語句的學(xué)習(xí)路徑建議很多初學(xué)者學(xué)循環(huán)靠的是背語法、刷例題然后直接在項(xiàng)目里套用。我建議換個(gè)路徑先理解“為什么要有循環(huán)語句”再理解“每種循環(huán)對(duì)應(yīng)的控制流差異”最后通過“改錯(cuò)題”和“實(shí)際場景”來鞏固。改錯(cuò)題是效率很高的方式。比如給你一段死循環(huán)的while讓你在兩分鐘之內(nèi)找出原因給你一段閉包陷阱的按鈕點(diǎn)擊讓你解釋為什么打印結(jié)果不對(duì)。這些問題一開始可能想不通但只要在實(shí)際調(diào)試器里打斷點(diǎn)跑一遍觀察每次循環(huán)時(shí)變量值的變化理解就會(huì)非常牢靠。實(shí)際場景方面可以找?guī)讉€(gè)高頻需求練手用循環(huán)實(shí)現(xiàn)數(shù)組去重不限方法用循環(huán)把一個(gè)多維數(shù)組展平成一維數(shù)組用循環(huán)生成一份“全排列”或“九九乘法表”在大列表接口中用循環(huán)配合await分頁抓取全部數(shù)據(jù)內(nèi)層循環(huán)里發(fā)現(xiàn)條件滿足嘗試用標(biāo)簽跳出兩層循環(huán)。做完這幾個(gè)題目再回頭看for...of、forEach、while這些選擇就會(huì)有一種“這把工具是干這活的那把工具是干那活的”的感覺而不是死記硬背選哪個(gè)。我個(gè)人在實(shí)際使用中的體會(huì)是循環(huán)語句是一面鏡子它能照出一個(gè)人對(duì)“變量作用域”“異步執(zhí)行順序”“數(shù)據(jù)結(jié)構(gòu)”這三件事的理解程度。很多人寫不好循環(huán)根源并不是循環(huán)語法不會(huì)而是作用域和事件循環(huán)的底層機(jī)制沒吃透。把這三件事理順了循環(huán)問題基本就解決了一大半。希望這篇梳理能幫你把循環(huán)語句用得更順手下次遇到莫名其妙的遍歷 bug心里能多幾條排查的路線。