整理總結js陣列遍歷常用方式以及效能分析對比

2021-10-11 00:26:43 字數 1298 閱讀 2363

js陣列遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的陣列遍歷方式以及進行效能分析對比

for

(j =

0; j < arr.length; j++

)

最簡單的一種,也是使用頻率最高的一種,雖然效能不弱,但仍有優化空間

這種方法基本上是所有迴圈遍歷方法中效能最高的一種

for

(j =

0,len=arr.length; j < len; j++

)

使用臨時變數,將長度快取起來,避免重複獲取陣列長度,當陣列較大時優化效果才會比較明顯。

for

(j =

0; arr[j]

!=null

; j++

)

這種方法其實嚴格上也屬於for迴圈,只不過是沒有使用length判斷,而使用變數本身判斷

實際上,這種方法的效能要遠遠小於普通for迴圈

arr.

foreach

(function

(e))

;

陣列自帶的foreach迴圈,使用頻率較高,實際上效能比普通for迴圈弱

array.prototype.foreach.

call

(arr,

function

(el)

);

由於foreach是array型自帶的,對於一些非這種型別的,無法直接使用(如nodelist),所以才有了這個變種,使用這個變種可以讓類似的陣列擁有foreach功能。

實際效能要比普通foreach弱

效率是最低的

for

(j in arr)

這個迴圈很多人愛用,但實際上,經分析測試,在眾多的迴圈遍歷方式中

arr.

map(

function

(n))

;

這種方式也是用的比較廣泛的,雖然用起來比較優雅,但實際效率還比不上foreach

for

(let value of arr)

);

這種方式是es6裡面用到的,效能要好於forin,但仍然比不上普通for迴圈

JS常用陣列遍歷

最近前端 在codereview的時候,發現同事的陣列遍歷用的是map方法,這個我沒看懂,原因是我之前沒了解過這種寫法.我之前寫j2ee最常用的應該就是普通的for迴圈了吧,短短幾年前端js又多了許多遍歷陣列迭代的方法了.既然已經有for迴圈了,那麼為啥還要出現其他的陣列遍歷方法了?我想原因就3點 ...

js陣列遍歷總結

1.原始方法 for var i 0 i 2.在es5中引入了foreach var arr 1,2,3,4 arr.foreach function value,index,arr 缺點 在foreach使用return會失效,break會報錯 都跳不出迴圈 3.for in 遍歷 只用於遍歷物件...

js陣列及其遍歷方式

陣列的定義 let arr 1,2,abc true js是弱型別語言,陣列中元素可以是不同型別的,boolean型別放入值就是對應的字串true或false length屬性 表示陣列的長度,元素的個數,length屬性是可變的,這一點需要特別注意。當length屬性被設定得更大時,整個陣列的狀態...