JS幾種數組遍曆方式以及效能分析對比(轉 未經測試，先mark)

標籤：優雅   樣本   好的   方式   最佳化   四種   array   使用   長度   

前言

這一篇與上一篇 JS幾種變數交換方式以及效能分析對比屬於同一個系列，本文繼續分析JS中幾種常用的數組遍曆方式以及各自的效能對比

 

起由

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

 

JS數組遍曆的幾種方式

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

 

第一種:普通for迴圈

代碼如下:

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

簡要說明: 最簡單的一種，也是使用頻率最高的一種，雖然效能不弱，但仍有最佳化空間

 

第二種:最佳化版for迴圈

代碼如下:

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

簡要說明: 使用臨時變數，將長度緩衝起來，避免重複擷取數組長度，當數組較大時最佳化效果才會比較明顯。

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

 

第三種:弱化版for迴圈

代碼如下:

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

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

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

 

第四種:foreach迴圈

代碼如下:

arr.forEach(function(e){ });

簡要說明: 數組內建的foreach迴圈，使用頻率較高，實際上效能比普通for迴圈弱

 

第五種:foreach變種

代碼如下:

Array.prototype.forEach.call(arr,function(el){ });

簡要說明: 由於foreach是Array型內建的，對於一些非這種類型的，無法直接使用(如NodeList)，所以才有了這個變種，使用這個變種可以讓類似的數組擁有foreach功能。

實際效能要比普通foreach弱

 

第六種:forin迴圈

代碼如下:

for(j in arr) { }

簡要說明: 這個迴圈很多人愛用，但實際上，經分析測試，在眾多的迴圈遍曆方式中

它的效率是最低的

 

第七種:map遍曆

代碼如下:

arr.map(function(n){ });

簡要說明: 這種方式也是用的比較廣泛的，雖然用起來比較優雅，但實際效率還比不上foreach

 

第八種:forof遍曆(需要ES6支援)

代碼如下:

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幾種數組遍曆方式以及效能分析對比(轉 未經測試，先mark)