1. 程式人生 > >JS陣列遍歷的幾種方式

JS陣列遍歷的幾種方式

S陣列遍歷,基本就是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迴圈