js高程筆記之?dāng)?shù)組的5種迭代方法

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。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末句携,一起剝皮案震驚了整個(gè)濱河市榔幸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌矮嫉,老刑警劉巖削咆,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蠢笋,居然都是意外死亡拨齐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門昨寞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瞻惋,“玉大人厦滤,你說我怎么就攤上這事〖呃牵” “怎么了馁害?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蹂匹。 經(jīng)常有香客問我碘菜,道長,這世上最難降的妖魔是什么限寞? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任忍啸,我火速辦了婚禮,結(jié)果婚禮上履植,老公的妹妹穿的比我還像新娘计雌。我一直安慰自己,他們只是感情好玫霎,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布凿滤。 她就那樣靜靜地躺著,像睡著了一般庶近。 火紅的嫁衣襯著肌膚如雪翁脆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天鼻种,我揣著相機(jī)與錄音反番,去河邊找鬼。 笑死叉钥,一個(gè)胖子當(dāng)著我的面吹牛罢缸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播投队,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼枫疆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了敷鸦?” 一聲冷哼從身側(cè)響起息楔,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎轧膘,沒想到半個(gè)月后钞螟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體兔甘,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谎碍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了洞焙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蟆淀。...
    茶點(diǎn)故事閱讀 38,646評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡拯啦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出熔任,到底是詐尸還是另有隱情褒链,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布疑苔,位于F島的核電站甫匹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏惦费。R本人自食惡果不足惜兵迅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望薪贫。 院中可真熱鬧恍箭,春花似錦、人聲如沸瞧省。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鞍匾。三九已至交洗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間橡淑,已是汗流浹背藕筋。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留梳码,地道東北人隐圾。 一個(gè)月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像掰茶,于是被迫代替她去往敵國和親暇藏。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,216評論 0 4
  • Lua 5.1 參考手冊 by Roberto Ierusalimschy, Luiz Henrique de F...
    蘇黎九歌閱讀 13,764評論 0 38
  • 本文總結(jié)了數(shù)組所有的方法濒蒋。 1. 檢測對象是不是數(shù)組 instanceof操作符 Array.isArray()方...
    胡不歸vac閱讀 676評論 0 1
  • 新年伊始盐碱,并沒有好好地規(guī)劃自己的新年。即使這樣沪伙,新的氣象瓮顽,依然會想做一些不同往日的事情。 2016年围橡,是我畢業(yè)后開...
  • 主題 精力管理 1王冠清:身體已經(jīng)養(yǎng)成了早睡早起的習(xí)慣暖混,會自動(dòng)發(fā)信號。但拖延癥有不請自來翁授,精神進(jìn)入了疲倦期拣播,但會及...
    狒狒0810閱讀 136評論 0 0