ECMAScript 5 為數(shù)組定義了 5 個(gè)迭代方法踢京。每個(gè)方法都接收兩個(gè)參數(shù):要在每一項(xiàng)上運(yùn)行的函數(shù)和
(可選的)運(yùn)行該函數(shù)的作用域?qū)ο蟆绊?this 的值婶溯。傳入這些方法中的函數(shù)會接收三個(gè)參數(shù):數(shù)
組項(xiàng)的值橄浓、該項(xiàng)在數(shù)組中的位置和數(shù)組對象本身。根據(jù)使用的方法不同爹凹,這個(gè)函數(shù)執(zhí)行后的返回值可能
會也可能不會影響方法的返回值了罪。以下是這 5 個(gè)迭代方法的作用。
every()
:對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)利花,如果該函數(shù)對每一項(xiàng)都返回 true科侈,則返回 true。
filter()
:對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)炒事,返回該函數(shù)會返回 true 的項(xiàng)組成的數(shù)組兑徘。
forEach()
:對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。這個(gè)方法沒有返回值羡洛。
map()
:對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)挂脑,返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組藕漱。
some()
:對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對任一項(xiàng)返回 true崭闲,則返回 true肋联。
以上方法都不會修改數(shù)組中的包含的值。
在這些方法中刁俭,最相似的是 every()和 some()橄仍,它們都用于查詢數(shù)組中的項(xiàng)是否滿足某個(gè)條件。
對 every()來說牍戚,傳入的函數(shù)必須對每一項(xiàng)都返回 true侮繁,這個(gè)方法才返回 true;否則如孝,它就返回
false宪哩。而 some()方法則是只要傳入的函數(shù)對數(shù)組中的某一項(xiàng)返回 true,就會返回 true第晰。請看以下
例子锁孟。
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult); //false
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult); //true
以上代碼調(diào)用了 every()和 some(),傳入的函數(shù)只要給定項(xiàng)大于 2就會返回 true茁瘦。對于 every()品抽,
它返回的是 false,因?yàn)橹挥胁糠謹(jǐn)?shù)組項(xiàng)符合條件甜熔。對于 some()圆恤,結(jié)果就是 true,因?yàn)橹辽儆幸豁?xiàng)
是大于 2 的腔稀。
下面是我在項(xiàng)目中對some,every的應(yīng)用:
這兩種方法還有一個(gè)很常用的用途就是跳出循環(huán)盆昙。
在真實(shí)項(xiàng)目種你會經(jīng)常遇到,出于對性能的保護(hù)烧颖,當(dāng)你遍歷到某個(gè)值的時(shí)候就跳出循環(huán)不讓他繼續(xù)循環(huán)后面的東西弱左,由于forEach不支持break窄陡,所以還在用for + break嗎少年炕淮?
下面利用some和every的特性,我們用它來執(zhí)行判斷條件后跳出循環(huán):let a = [1, 2, 3, 4, 5] let temp = []
需求:遍歷a數(shù)組跳夭,遍歷到指定值時(shí)涂圆,在temp里添加改值然后跳出:
some方法:
a.some(x => { if (x === 3) { temp.push(x) return true } })
在
x !== 3
的時(shí)候每次進(jìn)來都會return false
,在return true
時(shí),some函數(shù)會繼續(xù)執(zhí)行币叹,當(dāng)x===3
進(jìn)如條件判斷润歉,向指定數(shù)組添加了x之后return true
就跳出了循環(huán)。
every方法:
a.every(x => { if (x === 3) { temp.push(x) return false } else { return true } })
如果不加
else
,那么第一次直接就會返回false
,循環(huán)直接跳出來颈抚,當(dāng)不滿足條件的時(shí)候我們手動(dòng)加一個(gè)return true
,讓他繼續(xù)執(zhí)行踩衩,直到滿足條件的時(shí)候return false
跳出循環(huán)
下面再看一看 filter()函數(shù),它利用指定的函數(shù)確定是否在返回的數(shù)組中包含某一項(xiàng)。例如驱富,要
返回一個(gè)所有數(shù)值都大于 2 的數(shù)組锚赤,可以使用以下代碼。
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]
這里褐鸥,通過調(diào)用 filter()
方法創(chuàng)建并返回了包含 3线脚、4、5叫榕、4浑侥、3 的數(shù)組,因?yàn)閭魅氲暮瘮?shù)對它們
每一項(xiàng)都返回 true晰绎。這個(gè)方法對查詢符合某些條件的所有數(shù)組項(xiàng)非常有用寓落。
map()
也返回一個(gè)數(shù)組,而這個(gè)數(shù)組的每一項(xiàng)都是在原始數(shù)組中的對應(yīng)項(xiàng)上運(yùn)行傳入函數(shù)的結(jié)果寒匙。
例如零如,可以給數(shù)組中的每一項(xiàng)乘以 2,然后返回這些乘積組成的數(shù)組锄弱,如下所示:
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]
最后一個(gè)也是最常用的方法是 forEach()考蕾,它只是對數(shù)組中的每一項(xiàng)運(yùn)行傳入的函數(shù)。這個(gè)方法沒有返回值会宪,
本質(zhì)上與使用 for 循環(huán)迭代數(shù)組一樣肖卧。來看一個(gè)例子。
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
//執(zhí)行某些操作
});
這些數(shù)組方法通過執(zhí)行不同的操作掸鹅,可以大大方便處理數(shù)組的任務(wù)塞帐。支持這些迭代方法的瀏覽器有
IE9+、Firefox 2+巍沙、Safari 3+葵姥、Opera 9.5+和 Chrome。