溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS中數組遍歷方式有哪些

發布時間:2021-07-16 13:52:52 來源:億速云 閱讀:181 作者:小新 欄目:web開發

小編給大家分享一下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個循環,得到的分析結果)

 JS中數組遍歷方式有哪些

可以看出,forin循環最慢。優化后的普通for循環最快

分析結果2

以下截圖數據是,在chrome (支持es6)中運行了1000次后得出的結論(每次運行100次,一共10個循環,得到的分析結果)

 JS中數組遍歷方式有哪些

以上是“JS中數組遍歷方式有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女