前言
這壹篇與上壹篇 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個循環,得到的分析結果)
相信看了本文案例妳已經掌握了方法,更多精彩請關註Gxl網其它相關文章!
推薦閱讀:
Koa項目搭建步驟詳解
JS實現文本字體打印界面