JavaScript中哪種類型的循環最快

本篇內容介紹了“JavaScript中哪種類型的循環最快”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

JavaScript 是 Web 開發領域的“常青樹”。無論是 JavaScript 框架（如 Node.js、React、Angular、Vue 等），還是原生 JavaScript，都擁有非常龐大的粉絲基礎。我們來談談現代 JavaScript 吧。循環一直是大多數編程語言的重要組成部分，而現代 JavaScript 為我們提供了許多迭代或循環值的方法。

但問題在于，我們是否真的知道哪種循環或迭代最適合我們的需求。for 循環有很多變形，例如 for、for（倒序）、for…of、forEach、for…in、for…await。本文將圍繞這些展開討論。

了解哪一種 for 循環或迭代器適合我們的需求，防止我們犯下一些影響應用性能的低級錯誤。

究竟哪一種循環更快？

答案其實是： for（倒序）

最讓我感到驚訝的事情是，當我在本地計算機上進行測試之后，我不得不接受 for（倒序）是所有 for 循環中最快的這一事實。下面我會舉個對一個包含超過一百萬項元素的數組執行一次循環遍歷的例子。

聲明：console.time() 結果的準確度在很大程度上取決于我們運行測試的系統配置。你可以在此處對準確度作進一步了解。

const million = 1000000; 
const arr = Array(million);

// 注：這是稀疏數組，應該為其指定內容，否則不同方式的循環對其的處理方式會不同：
// const arr = [...Array(million)]

console.time('?');
for (let i = arr.length; i > 0; i--) {} // for(倒序)  :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for          :- 1.6ms
arr.forEach(v => v)                     // foreach      :- 2.1ms
for (const v of arr) {}                 // for...of     :- 11.7ms
console.timeEnd('?');

造成這樣結果的原因很簡單，在代碼中，正序和倒序的 for 循環幾乎花費一樣的時間，僅僅相差了 0.1 毫秒。原因是，for（倒序）只需要計算一次起始變量 let i = arr.length，而在正序的 for 循環中，它在每次變量增加后都會檢查條件 i<arr.length。這個細微的差別不是很重要，你可以忽略它。（譯者注：在數據量小或對時間不敏感的代碼上，我們大可忽略它，但是根據譯者的測試，當數據量擴大，例如十億，千億等的數量級，差距就顯著提升，我們就需要考慮時間對應用程序性能的影響了。）

而 forEach 是 Array 原型的一個方法，與普通的 for 循環相比，forEach 和 for…of 需要花費更多的時間進行數組迭代。（譯者注：但值得注意的是，for…of 和 forEach 都從對象中獲取了數據，而原型并沒有，因此沒有可比性。）

循環的類型，以及我們應該在何處使用它們

1. For 循環（正序和倒序）

我想，也許大家都應該對這個基礎循環非常熟悉了。我們可以在任何我們需要的地方使用 for 循環，按照核定的次數運行一段代碼。最基礎的 for 循環運行最迅速的，那我們每一次都應該使用它，對嗎？并不然，性能不僅僅只是唯一尺度，代碼可讀性往往更加重要，就讓我們選擇適合我們應用程序的變形即可。

2. forEach

這個方法需要接受一個回調函數作為輸入參數，遍歷數組的每一個元素，并執行我們的回調函數（以元素本身和它的索引（可選參數）作為參數賦予給回調函數）。forEach 還允許在回調函數中使用一個可選參數 this。

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}
things.foreach(callbackFun); 
/* 輸出   have - 0
        fun - 1
        coding - 2 */

需要注意的是，如果我們要使用 forEach，我們不能使用 JavaScript 的短路運算符（||、&&……），即不能在每一次循環中跳過或結束循環。

3. for…of

for…of 是在 ES6（ECMAScript 6）中實現標準化的。它會對一個可迭代的對象（例如 array、map、set、string 等）創建一個循環，并且有一個突出的優點，即優秀的可讀性。

const arr = [3, 5, 7];
const str = 'hello';
for (let i of arr) {
   console.log(i); // 輸出 3, 5, 7
}
for (let i of str) {
   console.log(i); // 輸出 'h', 'e', 'l', 'l', 'o'
}

需要注意的是，請不要在生成器中使用 for……of，即便 for……of 循環提前終止。在退出循環后，生成器被關閉，并嘗試再次迭代，不會產生任何進一步的結果。

4. for in

for…in 會在對象的所有可枚舉屬性上迭代指定的變量。對于每個不同的屬性，for…in 語句除返回數字索引外，還將返回用戶定義的屬性的名稱。 因此，在遍歷數組時最好使用帶有數字索引的傳統 for 循環。 因為 for…in 語句還會迭代除數組元素之外的用戶定義屬性，就算我們修改了數組對象（例如添加自定義屬性或方法），依然如此。

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';
for (let i in details) {
    fullName += details[i] + ' '; // fullName: john doe
}

for…of 和 for…in

for…of 和 for…in 之間的主要區別是它們迭代的內容。for…in 循環遍歷對象的屬性，而 for…of 循環遍歷可迭代對象的值。

let arr= [4, 5, 6];
for (let i in arr) {
   console.log(i); // '0', '1', '2'
}
for (let i of arr) {
   console.log(i); // '4', '5', '6'
}

結論

• for 最快，但可讀性比較差

• foreach 比較快，能夠控制內容

• for...of 比較慢，但香

• for...in 比較慢，沒那么方便

最后，給你一條明智的建議 —— 優先考慮可讀性。尤其是當我們開發復雜的結構程序時，更需要這樣做。當然，我們也應該專注于性能。盡量避免增添不必要的、多余的花哨代碼，因為這有時可能對你的程序性能造成嚴重影響。祝你編碼愉快。

譯者注

在譯者的實際測試中，發現：

• 不同瀏覽器甚至不同版本，結果會有不一樣（顛倒，例如 Firefox 對原生 for-loop 似乎不太友好，Safari 極度喜歡 while）

• 不同平臺操作系統處理器，結果會有不一樣

“JavaScript中哪種類型的循環最快”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！