卡卡網(wǎng)

JavaScript中的循環(huán)語句有for、for...of和forEach等，在使用時(shí)你可能需要考慮它們的瀏覽器兼容性問題，再就是考慮它們的速度問題。并不是所有瀏覽器都支持這些循環(huán)語句，JS中不兼容IE瀏覽器的循環(huán)語句有哪些？for..of等，不過今天，我要討論的是，這幾個(gè)循環(huán)語句，它們的速度是怎樣的？哪個(gè)速度最快？

循環(huán)遍歷數(shù)組

• for
• for…of
• forEach

要遍歷數(shù)組，讓我們創(chuàng)建一個(gè)包含 50000 個(gè)元素的數(shù)組來計(jì)算執(zhí)行時(shí)間。我們可以通過兩種方法創(chuàng)建一個(gè)包含 50000 個(gè)元素的數(shù)組。

for 循環(huán)

JavaScript 中最基本的迭代方法是 for 循環(huán)。它需要三個(gè)表達(dá)式；變量聲明，每次迭代前要計(jì)算的表達(dá)式，以及每次迭代結(jié)束時(shí)要計(jì)算的表達(dá)式。

迭代JavaScript for 循環(huán)元素固定次數(shù)。如果迭代次數(shù)已知，則應(yīng)使用它。下面給出了循環(huán)的語法。 

我們使用JavaScript中的console.time()和console.timeEnd()語句來計(jì)算執(zhí)行時(shí)間。我們看看如何使用這些語句。

for...of 循環(huán)

for...of 語句創(chuàng)建了一個(gè)循環(huán)迭代可迭代對(duì)象，包括內(nèi)置的String、Array類似數(shù)組的對(duì)象（例如，arguments或NodeList）TypedArray，Map以及Set。

for...of對(duì)于小型數(shù)據(jù)集，循環(huán)是最快的，但對(duì)于大型數(shù)據(jù)集，它們的擴(kuò)展性很差，它是最慢的。

我們以同樣的方式檢查for...of循環(huán)的執(zhí)行時(shí)間。

forEach 循環(huán)

Javascript 中的forEach 方法迭代數(shù)組的元素并按順序?yàn)槊總€(gè)元素調(diào)用提供的函數(shù)。

forEach的執(zhí)行時(shí)間受到每次迭代內(nèi)部發(fā)生的事情的顯著影響。它速度快，專為功能代碼而設(shè)計(jì)。

我們用 forEach 遍歷數(shù)組并檢查執(zhí)行時(shí)間。

三種循環(huán)方法速度比較

現(xiàn)在我們檢查所有三種循環(huán)方法的執(zhí)行時(shí)間。

javascript 的執(zhí)行實(shí)際上取決于各種因素，例如 Windows 等操作系統(tǒng)的類型以及 Chrome、IE、Firefox 等瀏覽器的類型。

執(zhí)行結(jié)果如下圖所示：

傳統(tǒng)的 for循環(huán)是最快的，所以你應(yīng)該總是使用它。

性能并不是唯一重要的事情，你很少需要在前端 JS 應(yīng)用程序中循環(huán)超過 100 萬個(gè)項(xiàng)目。代碼可讀性通常更重要，因此你可以選用可讀性更強(qiáng)的代碼。

如果你更喜歡編寫函數(shù)式代碼，那么forEach是理想的，而for-of則很好，更少的代碼行意味著更短的開發(fā)時(shí)間和更少的維護(hù)開銷。

總結(jié)

本文通過實(shí)例代碼演示，給出了JavaScript多種循環(huán)語句的速度比較。在實(shí)際使用中，你應(yīng)該明白自己需要的是什么，需要速度更快的？需要維護(hù)性更強(qiáng)的？需要可讀性更好的？弄清楚各循環(huán)語句的特征后，使用起來便更加得心應(yīng)手了。

相關(guān)文章

• JS中不兼容IE瀏覽器的循環(huán)語句有哪些？for..of等
• JS: forEach和for不同的功能表現(xiàn)【實(shí)例】
• [示例] JavaScript 中for...in 和 for...of 的區(qū)別

標(biāo)簽: for循環(huán)  forEach方法  forEach  for