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

JavaScript 發(fā)展至今已經(jīng)發(fā)展出多種數(shù)組的循環(huán)遍歷的方法,不同的遍歷方法運(yùn)行起來那個比較快,不同循環(huán)方法使用在那些場景,下面將進(jìn)行比較:

代碼:

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

這是標(biāo)準(zhǔn)for循環(huán)的寫法也是最傳統(tǒng)的語句，字符串也支持，定義一個變量i作為索引，以跟蹤訪問的位置，len是數(shù)組的長度，條件就是i不能超過len。

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

代碼:

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

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

代碼:

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

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

代碼:

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

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

for-of 語句只遍歷可迭代對象的數(shù)據(jù)。

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

代碼:

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

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

代碼:

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

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

代碼:

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

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

代碼:

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

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

代碼:

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

對比這里我使用了jsPerf平臺進(jìn)行測試.

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

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

// 另一個帶不同類型的數(shù)據(jù)的數(shù)組
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]

測試后發(fā)現(xiàn)有點奇怪直接檢索空數(shù)組還是會比數(shù)據(jù)數(shù)組慢這是為什么呢奇怪?為了對比循環(huán)的一致性我只選其中帶數(shù)據(jù)的數(shù)組dataarr進(jìn)行測試.

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

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

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

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

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

一張圖展示JavaScript數(shù)組方法

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

最后附上上面循環(huán)測試的 地址

迭代器(iterator) 地址

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

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

For-each over an array in JavaScript? 地址

JavaScript for循環(huán)性能比較 地址