譯者 | 劉汪洋
審校 | 重樓
概括：這篇文章介紹了 JavaScript 中各種循環語句的特點和性能，以及如何根據不同的場景選擇合適的循環方式。文章通過一些實例和測試，給出了一些使用循環的最佳實踐，如避免不必要的計算、使用緩存變量、使用 break 和 continue 等。
介紹
循環是編程語言的基本組成部分，在 JavaScript 中也同樣不可或缺。JavaScript 循環是一種功能強大的編程工具，它讓開發者能夠遍歷數據集合，針對每個項目執行特定操作，并根據具體條件作出決策。
然而，實現方式不當可能導致負面問題。編寫錯誤的循環不僅可能引發性能問題和編程錯誤，還可能使代碼變得難以維護。
無論你是編程新手還是有豐富經驗的開發人員，編寫高效且合理的循環總是一項充滿挑戰的任務。
在本全面指南中，我們將詳細探討編寫 JavaScript 循環的最佳實踐，助你將代碼從新手水平提升至專家水平。我們將從最基本的部分開始，涵蓋如何選擇正確的循環類型和優化循環性能等方面。
后面，我們還將深入探討更高級的主題，包括如何運用函數式編程技巧，以及如何在處理異步循環時保持謹慎，以避免代碼運行時出現不可預見的情況。
不論你是使用 數組、對象 還是其他數據結構，我們所分享的技巧和方法都將有助于你編寫干凈、簡潔且無 bug 的循環代碼。
因此，如果你準備深入了解 JavaScript 循環的精髓，那就做好準備，讓我們共同探索吧！
選擇正確類型的循環
在 JavaScript 編程中，選擇合適的循環類型很關鍵。JavaScript 提供了幾種主要的循環類型，包括 for 循環、while 循環和do-while 循環，每種類型都有其適用場景及優缺點。
For 循環
For 循環是 JavaScript 中最常用的循環類型，特別適用于在已知循環次數的情況。
例如，要計算數字數組的和：
let numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log(sum); // 輸出：15在此示例中，for 循環遍歷數組的每個元素并累加其值。
While 循環
While 循環適用于重復執行代碼塊直到滿足某條件的場景。
例如，生成大于 0.5 的隨機數：
let randomNumber = Math.random();
while (randomNumber <= 0.5) {
randomNumber = Math.random();
}
console.log(randomNumber); // 輸出：大于 0.5 的數字此例中，while 循環不斷生成新的隨機數，直到滿足條件。
Do-While 循環
Do-while 循環與while 循環相似，但無論初始條件如何，至少會執行一次代碼塊。
例如，要求用戶輸入一個介于 1 和 10 之間的數字：
let number;
do {
number = prompt('輸入一個介于 1 和 10 之間的數字：');
} while (number < 1 || number > 10);
console.log(number); // 輸出：介于 1 和 10 之間的數字此例中，do-while 循環反復提示用戶輸入合法數字。
選擇合適的循環類型取決于具體需求和任務。如果已知執行次數，通常選擇 for 循環；如果需要滿足某個條件才停止執行，則 while 循環或 do-while 循環可能更合適。通過慎重選擇循環類型，可以使代碼執行更高效、更易于理解。
循環控制語句的正確使用
選擇了合適的循環結構后，你還需要深入了解如何在 JavaScript 中正確運用兩種主要的循環控制語句：break 和 continue。
這兩種控制語句可以讓你更靈活地控制循環的執行流程。當滿足特定條件時，break 語句用于完全終止循環，而 continue 語句則用于跳過當前迭代并進入下一個迭代。
例如，設有一個數字數組，你想通過 for 循環找到數組中的第一個偶數數字。一旦找到第一個偶數，你可以使用 break 語句退出循環：
const numbers = [1, 3, 2, 5, 4, 7, 6];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
console.log(`第一個偶數是 ${numbers[i]}`);
break;
}
}在這個例子中，一旦找到第一個偶數（即 2），循環就會終止。如果沒有 break 語句，循環會繼續遍歷數組的其余部分。
相對于上述情況，如果你想在數組中打印所有的奇數，并跳過所有偶數，可以使用 continue 語句：
const numbers = [1, 3, 2, 5, 4, 7, 6];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
continue;
}
console.log(`奇數：${numbers[i]}`);
}在這個例子中，循環會跳過偶數，僅打印奇數（即 1、3、5 和 7）。如果沒有 continue 語句，循環將會打印數組中的所有數字。
如今，我們已經掌握了如何為特定任務選擇適當的循環，以及何時使用 break 和 continue 語句。
下一步我們將探討的是編寫循環時需考慮的另一個重要方面：優化循環性能。
優化循環的性能
在日常編碼過程中，循環性能的優化可能不會引起太多關注。但是當面臨大數據處理時，循環性能的提高就成為了關鍵任務，因為它會對整個 JavaScript 代碼的性能產生決定性影響。因此，了解如何分析和增強循環性能變得至關重要。
以下是一些關于如何優化循環性能的實用建議：
避免不必要的計算
一個提高循環性能的常見方法是減少不必要的計算。為了讓這一點更加明確，我們可以參考下述示例：
假設你正在對一個名為 array 的數組進行迭代。在這種場景下，如果你使用 for 循環遍歷數組，每一次的迭代都會重新計算數組的 length 以確定是否應繼續循環。
以下列代碼為例：
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}在每次迭代中，系統都會檢測 i 是否小于數組長度。但如果數組非常龐大，每次重新獲取長度可能會成為性能瓶頸。注意：JavaScript 中的數組是特殊的對象，能夠容納各種數據類型。每個數組都帶有一個 length 屬性，反映了其元素數量，且會隨著元素的增減自動更新。
為了改善性能，你可以在循環外部將數組的 length 存儲為一個變量：
let arr = [1, 2, 3, 4, 5];
let len = arr.length; // 緩存長度
for (let i = 0; i < len; i++) {
console.log(arr[i]);
}這樣做可以避免在每次迭代中都訪問數組的 length 屬性，從而顯著提高代碼的運行效率。對于處理大型數組，這個技巧可能特別有效。
注意：現代 JavaScript 引擎（如 V8）已經高度優化了循環。因此，有時緩存數組的長度可能不會顯著提升性能。不過，作為良好編程實踐，特別是在處理大型數組或性能敏感代碼時，這種技巧依然有價值。
高效循環的應用
采用高效的循環結構來提升循環性能是一項重要手段。
例如，在數組遍歷過程中，for 循環通常具有比 forEach 循環更高的執行效率。
以下代碼片段可以讓我們深入理解這一觀點：
let arr = [1, 2, 3, 4, 5]; // 使用 for 循環遍歷數組
for (let i = 0, len = arr.length; i < len; i++) {
console.log(arr[i]);
}在此例中，我們采用 for 循環來遍歷 arr 數組，但同樣的效果可以通過 forEach 循環實現。
那么，for 循環為何具有更高的執行效率呢？
這個問題較為復雜，有許多細節值得深入探討。其中一個關鍵原因是，forEach 循環會為數組的每個元素創建一個新的函數作用域。
換言之，每個元素都會生成一個新的函數，并在迭代結束后將其銷毀。
對于小型數組，這一過程影響不大。但是，當處理大型數組時，它可能會對循環的執行速度產生負面影響。
與之相對，for 循環只為整個循環過程創建一次函數作用域，因此僅需要創建并銷毀一個函數作用域。
另外，for 循環還支持使用 break 和 continue 來靈活控制循環的迭代過程，而 forEach 循環則無法實現這一功能。
正因如此，for 循環在數組遍歷時具備更高的優化潛力。
DOM 操作的最小化
在循環過程中，減少對文檔對象模型（DOM）的操作至關重要，因為在 JavaScript 中，與 DOM 的交互通常是一個耗時的過程。
每一次更改 DOM 都會讓瀏覽器重新布局和繪制頁面，可能降低應用程序的執行速度，特別是處理大量元素時。
例如：
// 低效的 DOM 操作
for (let i = 0; i < 1000; i++) {
document.getElementById('myDiv').innerHTML += '<p>' + i + '</p>';
}
// 更高效的 DOM 操作
let output = '';
for (let i = 0; i < 1000; i++) {
output += '<p>' + i + '</p>';
}
document.getElementById('myDiv').innerHTML = output;在上述例子中，第一個循環效率較低，因為每次迭代都直接操作 DOM。每次迭代都會給 myDiv 元素的 innerHTML 屬性添加新段落，導致了 1000 次 DOM 操作。
與此相反，第二個循環的效率更高，原因在于它減少了對 DOM 的直接操作。循環并不是在每次迭代時都更新 DOM，而是將 HTML 字符串累加到名為 output 的變量中。一旦循環完成，就使用 output 字符串僅一次更新 myDiv 元素的 innerHTML 屬性，從而實現了只進行一次 DOM 操作，大大提高了效率。
規避常見錯誤
在使用 JavaScript 編程時，開發人員可能會遇到一些典型的錯誤。以下要探討的這些錯誤在實際編程中應引起警覺，并積極規避。
循環內部改動循環變量
在循環內部更改循環變量可能引發預期不到的效果或錯誤。此做法通常并不合適。理想的方案是使用一個單獨的變量來存儲你希望更改的值。
例如，如下循環：
for (let i = 0; i < 10; i++) {
console.log(i); i++; // 在循環內修改 i
}上述代碼中，i 在循環中被修改，可能造成不在期望范圍的結果。相對地，你應該像下面這樣使用一個單獨的變量來存儲你想要修改的值：
for (let i = 0; i < 10; i++) {
console.log(i);
let modifiedValue = i + 1; // 使用一個單獨的變量來修改 i
}忽略大括號的使用
雖然你可以在編寫循環時省略大括號，但這通常并不推薦。缺少大括號可能復雜化代碼的閱讀和理解，甚至可能引發錯誤或不預期的效果。
例如，如下循環：
for (let i = 0; i < 10; i++)
console.log(i);由于此循環未使用大括號，可能使代碼的閱讀和理解變得困難，因此即使是單行語句，也最好始終使用大括號：
for (let i = 0; i < 10; i++) {
console.log(i);
}避免無限循環
無限循環指的是永不終止的循環。當退出條件設置不當，或永不滿足時，就可能出現這種情況。無限循環不僅可能導致程序崩潰或掛起，還可能非常難以調試。
例如：
觀察下面的循環，它沒有增加變量值，也未檢查是否超過某個閾值：
let count = 0;
while (count < 10) {
console.log(count);
}由于 count 變量未曾增加，此代碼將觸發無限循環。
因此，你應該時刻警惕無限循環的可能性。為了避免無限循環，請確保設置了正確的退出條件，并對代碼進行了充分測試。
“越界”錯誤
在編程中，越界錯誤是一種常見問題，發生在使用不正確的比較運算符或未充分考慮循環變量初始值的情況下。這些錯誤可能導致程序結果不準確，甚至在某些情況下會觸發程序崩潰。
例如，假設你有一個包含 10 個元素的數組，你計劃遍歷它，并對每個元素執行特定操作。
正確的循環編寫如下：
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}該代碼將遍歷數組的全部 10 個元素，并將各個元素的值輸出到控制臺。但是，如果你誤用了比較運算符，將 i< arr.length寫成 i<=arr.length會怎樣呢？
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i <= arr.length; i++) {
console.log(arr[i]);
}這段代碼將觸發一個越界錯誤，因為當i等于 arr.length時，將嘗試訪問一個不存在的元素。循環將執行共計11 次而非 10 次，最后一次迭代將拋出錯誤，因為 arr[10] 的值為 undefined。為了防止越界錯誤的發生，你應仔細檢查循環條件、確保使用正確的比較運算符，并充分考慮循環變量的初始值。通過避免這些常見錯誤，你能夠確保循環的準確執行，從而降低程序中的錯誤或崩潰風險。同時，在執行代碼之前，仔細審查潛在錯誤始終是明智的做法。
在適當場合，選擇遞歸
在程序設計中，遞歸經常被視為一種優雅的解決方案。
遞歸特別適用于處理層級數量未知或不固定的分層數據結構，如樹形結構或嵌套數組。
與傳統的嵌套循環相比，當處理具有未知深度的結構時，遞歸能使代碼更整潔、易讀。
警告：使用遞歸時需謹慎，確保遞歸有明確的終止條件，避免發生無限遞歸和棧溢出錯誤。
例如，考慮以下情景：
假設你擁有一個包含嵌套數字的數組結構，你的任務是找到數組中所有數字（包括嵌套的數字）的總和。在此情景下，遞歸可以被優雅地應用。下面是一個通過遞歸來求嵌套數組總和的示例代碼：
const nestedArray = [[1, 2, [3]], 4];
function sumArray(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
// 如果當前元素是數組，則遞歸處理
sum += sumArray(arr[i]);
} else {
// 如果當前元素是數字，則加入總和
sum += arr[i];
}
}
return sum;
}
console.log(sumArray(nestedArray)); // 輸出：10此代碼利用遞歸深入遍歷嵌套數組 nestedArray。它可以計算所有數字的總和，而不受嵌套深度的限制。
遞歸函數允許自身反復調用，直到達到最底層的嵌套結構，并返回一個可用于計算最終總和的值。
通過檢查每個元素是否為數組，該函數遞歸處理數組元素，直到達到最深的嵌套層級，即數字。
然后，函數將該數字返回到上一遞歸層。這樣便于計算當前層級所有元素的總和。
通過這種方式，遞歸提供了一種靈活而優雅的方法，用于處理未知或不固定層級結構的問題。
結論
JavaScript 循環非常重要，但要精通使用它可能有一定的難度。遵循以上最佳實踐，你將能夠編寫更高效、更合理的循環代碼，進而提升整體的編程水準。
要選擇合適的循環類型，并準確地使用循環控制語句來優化循環性能，避免常見的錯誤。同時，在適宜的場景下，你可以考慮遞歸的使用。只要掌握這些技巧，你就能大幅增強自己在 JavaScript 循環方面的專業技能。
因此，如果你投入時間來評估和優化循環代碼，你的代碼性能將得到顯著提升。
譯者介紹
劉汪洋，51CTO社區編輯，昵稱：明明如月，一個擁有 5 年開發經驗的某大廠高級 Java 工程師，擁有多個主流技術博客平臺博客專家稱號。
原文標題：JavaScript Loop: The Best Practices to Have the Optimal Performance，作者：robiulhr
