JS 數組循環遍歷方法的對比

JavaScript 發展至今已經發展出多種數組的循環遍歷的方法,不同的遍歷方法運行起來那個比較快,不同循環方法使用在那些場景,下面將進行比較

今天課堂的主要內容

各種數組遍歷的方法

語句

這是標準for循環的寫法也是最傳統的語句，字元串也支持，定義一個變數i作為索引，以跟蹤訪問的位置，len是數組的長度，條件就是i不能超過len。

語句

方法對數組的每個元素執行一次提供的CALLBACK函數,forEach是一個數組方法，可以用來把一個函數套用在一個數組中的每個元素上，為每個數組元素執行callback函數只可用於數組.遍歷一個數組讓數組每個元素做一件事情.那些已刪除（使用delete方法等情況）或者未初始化的項將被跳過（但不包括那些值為 undefined 的項）（例如在稀疏數組上)；不像map() 或者reduce() ，它總是返回 undefined值，並且不可鏈式調用。典型用例是在一個鏈的最後執行副作用。

語句

一般會使用來遍歷對象的屬性的,不過屬性需要,才能被讀取到.

循環只遍歷可枚舉屬性。一般常用來遍歷對象，包括非整數類型的名稱和繼承的那些原型鏈上面的屬性也能被遍歷。像 Array和 Object使用內置構造函數所創建的對象都會繼承自Object.prototype和String.prototype的不可枚舉屬性就不能遍歷了.

語句 (ES 6)

語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上創建一個迭代循環，調用自定義迭代鉤子，並為每個不同屬性的值執行語句。只要是一個iterable的對象,就可以通過來迭代.

和的區別

語句以原始插入順序迭代對象的可枚舉屬性。會把繼承鏈的對象屬性都會遍歷一遍,所以會更花時間.

語句只遍歷可迭代對象的數據。

Other 循環方法

方法 (不改變原數組)

方法會給原數組中的每個元素都按順序調用一次 callback 函數。callback 每次執行後的返回值（包括 undefined）組合起來形成一個新數組。 callback 函數只會在有值的索引上被調用；那些從來沒被賦過值或者使用 delete 刪除的索引則不會被調用。讓數組通過某種計算產生一個新數組,影射成一個新的數組,

方法

讓數組中的前項和後項做某種計算,並累計最終值

方法 (不改變原數組)

為數組中的每個元素調用一次 callback 函數，並利用所有使得 callback 返回 true 或 等價於 true 的值 的元素創建一個新數組。callback 只會在已經賦值的索引上被調用，對於那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有通過 callback 測試的元素會被跳過，不會被包含在新數組中。篩選出過濾出數組中符合條件的項,組成新數組

方法

every 方法為數組中的每個元素執行一次 callback 函數，直到它找到一個使 callback 返回 false（表示可轉換為布爾值 false 的值）的元素。如果發現了一個這樣的元素，every 方法將會立即返回 false。否則，callback 為每一個元素返回 true，every 就會返回 true。檢測數組中的每一項是否符合條件,如果每一項都符合條件,就會返回true,否則返回false,有點像遍曆數組且操作callback。只會為那些已經被賦值的索引調用。不會為那些被刪除或從來沒被賦值的索引調用。

方法

some 為數組中的每一個元素執行一次 callback 函數，直到找到一個使得 callback 返回一個「真值」（即可轉換為布爾值 true 的值）。如果找到了這樣一個值，some 將會立即返回 true。否則，some 返回 false。callback 只會在那些」有值「的索引上被調用，不會在那些被刪除或從來未被賦值的索引上調用。檢查數組中是否有某些項符號條件,如果有一項就返回true,否則返回false,有點像遍曆數組或者操作

對比遍歷速度

對比這裡我使用了jsPerf平台進行測試

JavaScritp loop 對比

我創建了兩個數組進行對比,為什麼要這樣區別呢,因為不同類型的數組在javascript內存中保存的地址格式不一樣,遍歷的時候編輯器會根椐數組元素的類型長度計算,比如說如果數組裡面全是Number類的,循環起來會比數組裡面包含Number,String,Object混合型的會快,所以創建了兩個數組,一個是全undefined數組,一個是混合型數組

測試後發現有點奇怪直接檢索空數組還是會比數據數組慢這是為什麼呢奇怪?為了對比循環的一致性我只選其中帶數據的數組進行測試.

那我們對比一下,,,,,,循環的速度

可以看到循環的速度是最快的,是最老的循環,也是優化得最好的,其次是這個是es6才新增的循環非常好用,最慢是我們可以作一下速度排序

這很明顯處理大量循環數據的時候還是要使用古老循環效率最好,但也不是不使用,其實很多時候都要根據實際應該場景的,更多使用在遍歷對象屬性上面,在遍歷的過程中還會遍歷繼承鏈,所以這就是它效率比較慢的原因,比如速率不高,不過處理在Es6實現數組功能上面非常好用方便,輕鬆影射創建新數組.或者例如使用Iterator屬性也是行的,所以每個循環都有合適使用的地方.

最後

最後不同瀏覽器內核會有些許差別,有興趣的朋友可以去測試一下,有任何問題歡迎在下面留言哦，小編都會回復大家的。長按下面二維碼關注，教程每天都有更新哦！

如果你覺得這篇教程對你有用，記得要轉發+點贊哦！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！