JavaScript 是 Web 開發(fā)領(lǐng)域的“常青樹”。無論是 JavaScript 框架（如 Node.js、React、Angular、Vue 等），還是原生 JavaScript，都擁有非常龐大的粉絲基礎(chǔ)。我們來談?wù)劕F(xiàn)代 JavaScript 吧。循環(huán)一直是大多數(shù)編程語言的重要組成部分，而現(xiàn)代 JavaScript 為我們提供了許多迭代或循環(huán)值的方法。

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

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

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

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

最讓我感到驚訝的事情是，當(dāng)我在本地計(jì)算機(jī)上進(jìn)行測(cè)試之后，我不得不接受 for（倒序）是所有 for 循環(huán)中最快的這一事實(shí)。下面我會(huì)舉個(gè)對(duì)一個(gè)包含超過一百萬項(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.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('⏳');

造成這樣結(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)