在JavaScript的世界里，循環(huán)是不可或缺的一部分，它允許我們高效地處理數(shù)據(jù)。

但你是否知道，不同的循環(huán)類型在性能上存在著顯著差異？

JavaScript提供了多種內(nèi)置的數(shù)組方法，例如forEach、map、filter和reduce，這些方法內(nèi)部都使用了循環(huán)。

此外，還有傳統(tǒng)的for循環(huán)、for...of循環(huán)以及while循環(huán)。究竟哪種循環(huán)類型最快？

本文將通過性能基準(zhǔn)測(cè)試，對(duì)四種最常用的JavaScript循環(huán)方法進(jìn)行比較，并深入探討傳統(tǒng)的循環(huán)類型，最終揭示速度之王！

原文鏈接：https://dev.to/leduc1901/what-is-the-fastest-loop-type-in-javascript-469f

數(shù)組方法的性能

首先，我們來看看四種常用的數(shù)組方法：forEach、map、filter和reduce。

從圖中可以看出，forEach在這些方法中性能最優(yōu)。

原因在于，forEach在處理完數(shù)組后不返回任何值，而map和filter則返回一個(gè)新的數(shù)組。

reduce的性能幾乎與forEach相當(dāng)，因?yàn)樗诶奂悠骱瘮?shù)執(zhí)行完畢后返回一個(gè)初始值（如果提供了的話），或者返回計(jì)算后的最終值。

雖然內(nèi)置的數(shù)組方法易于使用，適用于不同的場(chǎng)景，但它們之間的性能差異并不顯著。

這些方法的代碼不僅美觀，而且易于閱讀和編寫，采用的是聲明式編程風(fēng)格。

然而，當(dāng)性能成為關(guān)鍵因素時(shí)，其他命令式方法的性能可能會(huì)高出數(shù)倍。

For循環(huán)的性能

接下來，讓我們看看傳統(tǒng)的for循環(huán)。

可以看到，for循環(huán)的執(zhí)行速度是數(shù)組方法的三倍。這是因?yàn)閿?shù)組方法在處理每個(gè)元素時(shí)都會(huì)執(zhí)行一個(gè)回調(diào)函數(shù)。

現(xiàn)在，讓我們深入了解一下其他類型的傳統(tǒng)循環(huán)：

未緩存長(zhǎng)度的For循環(huán)：

for (var x = 0; x < arr.length; x++) {
 dosmth = arr[x];
}

緩存長(zhǎng)度的For循環(huán)：

var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}

For...of循環(huán)：

for (let val of arr) {
    dosmth = val;
}

While循環(huán)（使用++x）：

var x = 0, l = arr.length;
while (x < l) {
    dosmth = arr[x];
   ++x;
}

While循環(huán)（使用x++）：

var x = 0, l = arr.length;
while (x < l) {
    dosmth = arr[x];
   x++;
}

接下來是基準(zhǔn)測(cè)試的結(jié)果：

在大多數(shù)情況下，for...of循環(huán)表現(xiàn)良好，但在處理大型數(shù)據(jù)集時(shí)，如上圖所示，它的性能相對(duì)較慢（盡管仍然優(yōu)于數(shù)組方法）。

如果你傾向于使用聲明式編程，那么可以選擇數(shù)組方法，它們通常更易于閱讀和編寫，并且在大多數(shù)情況下更適合JavaScript。

然而，如果你追求的是性能，那么其他命令式方法可能是更好的選擇。

總之，選擇最適合你的風(fēng)格和需求的循環(huán)類型。