了解哪一種 for 循環(huán)或迭代器適合我們的需求，防止我們犯下一些影響應(yīng)用性能的低級(jí)錯(cuò)誤。

JavaScript 是 Web 開(kāi)發(fā)領(lǐng)域的“常青樹(shù)”。無(wú)論是 JavaScript 框架（如 Node.js、React、Angular、Vue 等），還是原生 JavaScript，都擁有非常龐大的粉絲基礎(chǔ)。我們來(lái)談?wù)劕F(xiàn)代 JavaScript 吧。循環(huán)一直是大多數(shù)編程語(yǔ)言的重要組成部分，而現(xiàn)代 JavaScript 為我們提供了許多迭代或循環(huán)值的方法。但問(wèn)題在于，我們是否真的知道哪種循環(huán)或迭代最適合我們的需求。for 循環(huán)有很多變形，例如 for、for（倒序）、for…of、forEach、for…in、for…await。本文將圍繞這些展開(kāi)討論。

究竟哪一種循環(huán)更快？

答案其實(shí)是： for（倒序）

最讓我感到驚訝的事情是，當(dāng)我在本地計(jì)算機(jī)上進(jìn)行測(cè)試之后，我不得不接受 for（倒序）是所有 for 循環(huán)中最快的這一事實(shí)。下面我會(huì)舉個(gè)對(duì)一個(gè)包含超過(guò)一百萬(wàn)項(xiàng)元素的數(shù)組執(zhí)行一次循環(huán)遍歷的例子。聲明：console.time() 結(jié)果的準(zhǔn)確度在很大程度上取決于我們運(yùn)行測(cè)試的系統(tǒng)配置。你可以在此處對(duì)準(zhǔn)確度作進(jìn)一步了解。

const million = 1000000; const arr = Array(million);// 注：這是稀疏數(shù)組，應(yīng)該為其指定內(nèi)容，否則不同方式的循環(huán)對(duì)其的處理方式會(huì)不同：// const arr = [...Array(million)]console.time(’⏳’);for (let i = arr.length; i > 0; i--) {} // for(倒序) :- 1.5msfor (let i = 0; i < arr.length; i++) {} // for :- 1.6msarr.forEach(v => v) // foreach :- 2.1msfor (const v of arr) {} // for...of :- 11.7msconsole.timeEnd(’⏳’);

造成這樣結(jié)果的原因很簡(jiǎn)單，在代碼中，正序和倒序的 for 循環(huán)幾乎花費(fèi)一樣的時(shí)間，僅僅相差了 0.1 毫秒。原因是，for（倒序）只需要計(jì)算一次起始變量 let i = arr.length，而在正序的 for 循環(huán)中，它在每次變量增加后都會(huì)檢查條件 i<arr.length。這個(gè)細(xì)微的差別不是很重要，你可以忽略它。（譯者注：在數(shù)據(jù)量小或?qū)r(shí)間不敏感的代碼上，我們大可忽略它，但是根據(jù)譯者的測(cè)試，當(dāng)數(shù)據(jù)量擴(kuò)大，例如十億，千億等的數(shù)量級(jí)，差距就顯著提升，我們就需要考慮時(shí)間對(duì)應(yīng)用程序性能的影響了。）而 forEach 是 Array 原型的一個(gè)方法，與普通的 for 循環(huán)相比，forEach 和 for…of 需要花費(fèi)更多的時(shí)間進(jìn)行數(shù)組迭代。（譯者注：但值得注意的是，for…of 和 forEach 都從對(duì)象中獲取了數(shù)據(jù)，而原型并沒(méi)有，因此沒(méi)有可比性。）

循環(huán)的類型，以及我們應(yīng)該在何處使用它們1. For 循環(huán)（正序和倒序）

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

2. forEach

這個(gè)方法需要接受一個(gè)回調(diào)函數(shù)作為輸入?yún)?shù)，遍歷數(shù)組的每一個(gè)元素，并執(zhí)行我們的回調(diào)函數(shù)（以元素本身和它的索引（可選參數(shù)）作為參數(shù)賦予給回調(diào)函數(shù)）。forEach 還允許在回調(diào)函數(shù)中使用一個(gè)可選參數(shù) 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 的短路運(yùn)算符，即不能在每一次循環(huán)中跳過(guò)或結(jié)束循環(huán)。

3. for…of

for…of 是在 ES6（ECMAScript 6）中實(shí)現(xiàn)標(biāo)準(zhǔn)化的。它會(huì)對(duì)一個(gè)可迭代的對(duì)象（例如 array、map、set、string 等）創(chuàng)建一個(gè)循環(huán)，并且有一個(gè)突出的優(yōu)點(diǎn)，即優(yōu)秀的可讀性。

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’}

需要注意的是，請(qǐng)不要在生成器中使用 for……of，即便 for……of 循環(huán)提前終止。在退出循環(huán)后，生成器被關(guān)閉，并嘗試再次迭代，不會(huì)產(chǎn)生任何進(jìn)一步的結(jié)果。

4. for in

for…in 會(huì)在對(duì)象的所有可枚舉屬性上迭代指定的變量。對(duì)于每個(gè)不同的屬性，for…in 語(yǔ)句除返回?cái)?shù)字索引外，還將返回用戶定義的屬性的名稱。

因此，在遍歷數(shù)組時(shí)最好使用帶有數(shù)字索引的傳統(tǒng) for 循環(huán)。 因?yàn)?for…in 語(yǔ)句還會(huì)迭代除數(shù)組元素之外的用戶定義屬性，就算我們修改了數(shù)組對(duì)象（例如添加自定義屬性或方法），依然如此。

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 之間的主要區(qū)別是它們迭代的內(nèi)容。for…in 循環(huán)遍歷對(duì)象的屬性，而 for…of 循環(huán)遍歷可迭代對(duì)象的值。

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’}結(jié)論 for 最快，但可讀性比較差 foreach 比較快，能夠控制內(nèi)容 for...of 比較慢，但香 for...in 比較慢，沒(méi)那么方便

最后，給你一條明智的建議 —— 優(yōu)先考慮可讀性。尤其是當(dāng)我們開(kāi)發(fā)復(fù)雜的結(jié)構(gòu)程序時(shí)，更需要這樣做。當(dāng)然，我們也應(yīng)該專注于性能。盡量避免增添不必要的、多余的花哨代碼，因?yàn)檫@有時(shí)可能對(duì)你的程序性能造成嚴(yán)重影響。祝你編碼愉快。

譯者注

在譯者的實(shí)際測(cè)試中，發(fā)現(xiàn)：

不同瀏覽器甚至不同版本，結(jié)果會(huì)有不一樣（顛倒，例如 Firefox 對(duì)原生 for-loop 似乎不太友好，Safari 極度喜歡 while） 不同平臺(tái)操作系統(tǒng)處理器，結(jié)果會(huì)有不一樣

到此這篇關(guān)于詳解JavaScript中哪一種循環(huán)最快呢的文章就介紹到這了,更多相關(guān)JavaScript哪一種循環(huán)最內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！

原文地址：Which type of loop is fastest in JavaScript?原文作者：kushsavani