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個循環，獲得的分析結果)