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

BlackFlagBin 發布于2019-08-26 11:31 / 3290人閱讀

摘要：循環方法方法不改變原數組方法會給原數組中的每個元素都按順序調用一次函數。篩選出過濾出數組中符合條件的項組成新數組代碼方法方法為數組中的每個元素執行一次函數，直到它找到一個使返回表示可轉換為布爾值的值的元素。

前言

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

各種數組遍歷的方法 for 語句

代碼:

var arr = [1,2,4,6]
for(var i = 0, len = arr.length; i < len; i++){
    console.log(arr[i])
}

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

forEach 語句

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

代碼:

var arr = [1,5,8,9]
arr.forEach(function(item) {
    console.log(item);
})

for-in 語句

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

代碼:

var obj = {
    name: "test",
    color: "red",
    day: "sunday",
    number: 5
}
for (var key in obj) {
    console.log(obj[key])
}

for-of 語句 (ES 6)

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

代碼:

var arr = [{name:"bb"},5,"test"]
for (item of arr) {
    console.log(item)
}

for-of 和 for-in 的區別

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

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

Other 循環方法 map 方法 (不改變原數組)

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

代碼:

var arr = [1,2,3]
var firearr = arr.map(current => current * 5)

reduce 方法

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

代碼:

var wallets = [4,7.8,3]
var totalMoney = wallets.reduce( function (countedMoney, wallet) {
    return countedMoney + wallet.money;
}, 0)

filter 方法 (不改變原數組)

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

代碼:

var arr = [2,3,4,5,6]
var morearr = arr.filter(function (number) {
    return number > 3
})

every 方法

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

代碼:

var arr = [1,2,3,4,5]
var result = arr.every(function (item, index) {
    return item > 0
})

some 方法

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

代碼:

var arr = [1,2,3,4,5]
var result = arr.some(function (item,index) {
    return item > 3
})

對比遍歷速度

對比這里我使用了jsPerf平臺進行測試.

JavaScritp loop 對比

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

// 一個是空數組
var nullarr = new Array(10000) // [undefined,undefined,...undefined]

// 另一個帶不同類型的數據的數組
var dataarr = []
for(var i = 0; i < 10000; i++){
    if (i % 2 ===0) {
        dataarr[i] = i.toString()
    } else {
        dataarr[i = i
    }
}
dataarr // [1,"2",3...,10000]

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

那我們對比一下 for for len forEach for-in for-of map filter 循環的速度

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

for > for-of > forEach > filter > map > for-in

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

every 和 some 不完全屬于數組操作方法

every 和 some 都是判斷條件直接返回整個數組Boolean類型的方法.every速度會比some快很多.

干貨

一張圖展示JavaScript數組方法

最后

最后不同瀏覽器內核我相信會有些許差別,有興趣的朋友可以去測試一下,有任何問題歡迎給博主留言.更多好文章請到我博客地址瀏覽哈。

最后附上上面循環測試的地址

延伸閱讀

迭代器(iterator) 地址

JS幾種數組遍歷方式以及性能分析對比地址

如何形象地解釋 JavaScript 中 map、foreach、reduce 間的區別？地址

For-each over an array in JavaScript? 地址

JavaScript for循環性能比較地址

云服務器 GPU云服務器 python循環遍歷二維數組 js對比數組的值 js創建數組的方法 js 循環遍歷json數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107043.html

js數組遍歷總結

摘要：中的數組遍歷是項目中經常用到的，在這里將幾種方法做個對比。第一個參數為數組元素必選，第二個參數為數組元素索引值可選，第三個參數為數組本身可選循環中傳入要執行的回調函數，函數有三個參數。用于遍歷數組元素使用，，，用于循環對象屬性使用 js中的數組遍歷是項目中經常用到的，在這里將幾種方法做個對比。 for循環：使用評率最高，也是最基本的一種遍歷方式。 let arr = [a,b,c,d,...

oujie 2019-08-23 12:20 評論0 收藏0
數組常見的遍歷循環方法、數組的循環遍歷的效率對比

摘要：場景檢查數組中是否含有某個東西和是對立的案例案例是否包含為對象循環遍歷效率對比參考參考原生實現等方法其他參考 1 遍歷數組的方法 1-1、for / while 最普通的循環效率最高兼容ie6tips:for循環更適用于循環的開始和結束已知，循環次數固定的場合；while循環更適合于條件不確定的場合 1-2、for in 兼容ie6，效率最差（效率可看最下面的對比） for in...

xfee 2019-08-23 15:14 評論0 收藏0
Deep In React 之詳談 React 16 Diff 策略(二)

摘要：對于同一層級的一組子節點，它們可以通過唯一進行區分。基于以上三個前提策略，分別對以及進行算法優化。鏈表的每一個節點是，而不是在之前的虛擬節點。是當前層的第一個節點。再次提醒，是的一層。文章首發于個人博客這是我 Deep In React 系列的第二篇文章，如果還沒有讀過的強烈建議你先讀第一篇：詳談 React Fiber 架構(1)。前言我相信在看這篇文章的讀者一般都已經了解...

NSFish 2019-08-26 10:27 評論0 收藏0
js之靈活使用可遍歷數組的API

摘要：總結遍歷數組的時候應該盡量使用這些，靈活運用可以讓代碼更加優雅，這種盡可能使用函數和鏈式調用的風格很接近函數式編程，可以提高代碼質量。 js中有很多可以遍歷數組的API，既然已經封裝的這么好，為什么不在平常開發的時候使用，本文講講forEach、map、filter、some、every、reduce這些API的使用，并且和普通的for語句作對比。我們以一個對象數組作為測試數據： c...

sutaking 2019-08-22 14:05 評論0 收藏0
JS中可能用得到的全部的排序算法

本篇有7k+字, 系統梳理了js中常見的12種排序算法。除了基本排序算法，文章還包含了希爾排序、堆排序、桶排序等較為復雜的排序實現，如果喜歡請點贊支持~謝謝. 原文: http://louiszhai.github.io/20... 導讀排序算法可以稱得上是我的盲點, 曾幾何時當我知道Chrome的Array.prototype.sort使用了快速排序時, 我的內心是奔潰的(啥是快排, 我只知道...

verano 2019-08-20 15:08 評論0 收藏0