JS數(shù)組遍歷的幾種方式
JS數(shù)組遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的數(shù)組遍歷方式以及進(jìn)行性能分析對(duì)比
第一種:普通for循環(huán)
代碼如下:
for(j=0; j < arr.length; j ++) {
}
簡(jiǎn)要說明:
最簡(jiǎn)單的一種,也是使用頻率最高的一種,雖然性能不弱,但仍有優(yōu)化空間
第二種:優(yōu)化版for循環(huán)
代碼如下:
for (j = 0; len = arr.length; j < len; j ++) {
}
簡(jiǎn)要說明:
使用臨時(shí)變量,將長(zhǎng)度緩存起來,避免重復(fù)獲取數(shù)組長(zhǎng)度,當(dāng)數(shù)組較大時(shí)優(yōu)化效果才會(huì)比較明顯。
這種方法基本上是所有循環(huán)遍歷方法中性能最高的一種
第三種:弱化版for循環(huán)
代碼如下:
for (j = 0; arr[j] != null; j ++) {
}
簡(jiǎn)要說明:
這種方法其實(shí)嚴(yán)格上也屬于for循環(huán),只不過是沒有使用length判斷,而使用變量本身判斷
實(shí)際上,這種方法的性能要遠(yuǎn)遠(yuǎn)小于普通for循環(huán)
第四種:foreach循環(huán)
代碼如下:?
arr.forEach(fucntion (e) {
})
簡(jiǎn)要說明:
數(shù)組自帶的foreach循環(huán),使用頻率較高,實(shí)際上性能比普通for循環(huán)弱
第五種:foreach變種
代碼如下:
Array.prototype.forEach.call(arr,function(el){
});
簡(jiǎn)要說明:
由于foreach是Array型自帶的,對(duì)于一些非這種類型的,無法直接使用(如NodeList),所以才有了這個(gè)變種,使用這個(gè)變種可以讓類似的數(shù)組擁有foreach功能。
實(shí)際性能要比普通foreach弱
第六種:forin循環(huán)
代碼如下:
for(j in arr) {
}
簡(jiǎn)要說明:
這個(gè)循環(huán)很多人愛用,但實(shí)際上,經(jīng)分析測(cè)試,在眾多的循環(huán)遍歷方式中
它的效率是最低的
第七種:map遍歷
代碼如下:
arr.map(function(n){
});
簡(jiǎn)要說明:
這種方式也是用的比較廣泛的,雖然用起來比較優(yōu)雅,但實(shí)際效率還比不上foreach
第八種:forof遍歷(需要ES6支持)
代碼如下:
for(let valueof arr) {
});
簡(jiǎn)要說明:
這種方式是es6里面用到的,性能要好于forin,但仍然比不上普通for循環(huán)
各種遍歷方式的性能對(duì)比
上述列舉了幾種方式都有一一做過對(duì)比分析,基本上可以得出的結(jié)論是:
普通for循環(huán)才是最優(yōu)雅的,forin循環(huán)最慢。優(yōu)化后的普通for循環(huán)最快
(PS:以上所有的代碼都只是進(jìn)行空的循環(huán),沒有再循環(huán)內(nèi)部執(zhí)行代碼,僅僅是分析各自循環(huán)的時(shí)間而已)