JS幾種陣列遍歷方式以及效能分析對比

2021-08-15 10:45:59 字數 1782 閱讀 9180

在上一次分析了js幾種常用變數交換方式以及各自效能後,覺得這種方式挺好的,於是抽取了核心邏輯,封裝成了模板,打算拓展成乙個系列,本文則是系列中的第二篇,js陣列遍歷方式的分析對比

js陣列遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的陣列遍歷方式以及進行效能分析對比

**如下:

for(j = 0; j < arr.length; j++)  

簡要說明:

最簡單的一種,也是使用頻率最高的一種,雖然效能不弱,但仍有優化空間

**如下:

for(j = 0,len=arr.length; j < len; j++) 

簡要說明:

使用臨時變數,將長度快取起來,避免重複獲取陣列長度,當陣列較大時優化效果才會比較明顯。

這種方法基本上是所有迴圈遍歷方法中效能最高的一種

**如下:

for(j = 0; arr[j]!=null; j++) 

簡要說明:

這種方法其實嚴格上也屬於for迴圈,只不過是沒有使用length判斷,而使用變數本身判斷

實際上,這種方法的效能要遠遠小於普通for迴圈

**如下:

arr.foreach(function(e));

簡要說明:

陣列自帶的foreach迴圈,使用頻率較高,實際上效能比普通for迴圈弱

**如下:

array.prototype.foreach.call(arr,function(el));

簡要說明:

由於foreach是array型自帶的,對於一些非這種型別的,無法直接使用(如nodelist),所以才有了這個變種,使用這個變種可以讓類似的陣列擁有foreach功能。

實際效能要比普通foreach弱

**如下:

for(j in arr) 

簡要說明:

這個迴圈很多人愛用,但實際上,經分析測試,在眾多的迴圈遍歷方式中

它的效率是最低的

**如下:

arr.map(function(n));

簡要說明:

這種方式也是用的比較廣泛的,雖然用起來比較優雅,但實際效率還比不上foreach

**如下:

for(let value of arr) );

簡要說明:

這種方式是es6裡面用到的,效能要好於forin,但仍然比不上普通for迴圈

上述列舉了幾種方式都有一一做過對比分析,基本上可以得出的結論是:

普通for迴圈才是最優雅的

(ps:以上所有的**都只是進行空的迴圈,沒有再迴圈內部執行**,僅僅是分析各自迴圈的時間而已)

分析結果1

以下截圖中的資料是,在chrome (支援es6)中執行了100次後得出的結論(每次執行10次,一共10個迴圈,得到的分析結果)

可以看出,forin迴圈最慢。優化後的普通for迴圈最快

分析結果2

以下截圖資料是,在chrome (支援es6)中執行了1000次後得出的結論(每次執行100次,一共10個迴圈,得到的分析結果)

如下demo中可以使用分析工具進行 js陣列遍歷方式分析對比

js中幾種常用陣列遍歷方式分析比較工具

JS幾種陣列遍歷方式以及效能分析對比

在上一次分析了js幾種常用變數交換方式以及各自效能後,覺得這種方式挺好的,於是抽取了核心邏輯,封裝成了模板,打算拓展成乙個系列,本文則是系列中的第二篇,js陣列遍歷方式的分析對比 js陣列遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的陣列...

JS幾種陣列遍歷方式以及效能分析對比

js陣列遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的陣列遍歷方式以及進行效能分析對比 如下 for j 0 j arr.length j 簡要說明 最簡單的一種,也是使用頻率最高的一種,雖然效能不弱,但仍有優化空間 如下 for j 0...

JS幾種陣列遍歷方式以及效能分析對比

js陣列遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的陣列遍歷方式以及進行效能分析對比 如下 for j 0 j arr.length j 簡要說明 最簡單的一種,也是使用頻率最高的一種,雖然效能不弱,但仍有優化空間 如下 for j 0...