小編給大家分享一下JS中數(shù)組遍歷方式有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為滕州企業(yè)提供專業(yè)的網(wǎng)站制作、網(wǎng)站建設(shè)，滕州網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

JS數(shù)組遍歷的幾種方式

JS數(shù)組遍歷，基本就是for,forin,foreach,forof,map等等一些方法，以下介紹幾種本文分析用到的數(shù)組遍歷方式以及進(jìn)行性能分析對比

第一種:普通for循環(huán)

代碼如下:

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

簡要說明: 最簡單的一種，也是使用頻率最高的一種，雖然性能不弱，但仍有優(yōu)化空間

第二種:優(yōu)化版for循環(huán)

代碼如下:

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

簡要說明: 使用臨時變量，將長度緩存起來，避免重復(fù)獲取數(shù)組長度，當(dāng)數(shù)組較大時優(yōu)化效果才會比較明顯。

這種方法基本上是所有循環(huán)遍歷方法中性能最高的一種

第三種:弱化版for循環(huán)

代碼如下:

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

簡要說明: 這種方法其實(shí)嚴(yán)格上也屬于for循環(huán)，只不過是沒有使用length判斷，而使用變量本身判斷

實(shí)際上，這種方法的性能要遠(yuǎn)遠(yuǎn)小于普通for循環(huán)

第四種:foreach循環(huán)

代碼如下:

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

簡要說明: 數(shù)組自帶的foreach循環(huán)，使用頻率較高，實(shí)際上性能比普通for循環(huán)弱

第五種:foreach變種

代碼如下:

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

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

實(shí)際性能要比普通foreach弱

第六種:forin循環(huán)

代碼如下:

for(j in arr) {
}

簡要說明: 這個循環(huán)很多人愛用，但實(shí)際上，經(jīng)分析測試，在眾多的循環(huán)遍歷方式中

它的效率是最低的

第七種:map遍歷

代碼如下:

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

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

第八種:forof遍歷(需要ES6支持)

代碼如下:

for(let value of arr) {
});

簡要說明: 這種方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循環(huán)

各種遍歷方式的性能對比

上述列舉了幾種方式都有一一做過對比分析，基本上可以得出的結(jié)論是:

普通for循環(huán)才是最優(yōu)雅的

(PS:以上所有的代碼都只是進(jìn)行空的循環(huán)，沒有再循環(huán)內(nèi)部執(zhí)行代碼，僅僅是分析各自循環(huán)的時間而已)

性能對比截圖

分析結(jié)果1

以下截圖中的數(shù)據(jù)是，在chrome (支持es6)中運(yùn)行了100次后得出的結(jié)論(每次運(yùn)行10次,一共10個循環(huán)，得到的分析結(jié)果)

 

可以看出,forin循環(huán)最慢。優(yōu)化后的普通for循環(huán)最快

分析結(jié)果2

以下截圖數(shù)據(jù)是，在chrome (支持es6)中運(yùn)行了1000次后得出的結(jié)論(每次運(yùn)行100次,一共10個循環(huán)，得到的分析結(jié)果)

 

以上是“JS中數(shù)組遍歷方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：JS中數(shù)組遍歷方式有哪些-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/dcdpgj.html