數(shù)組 filter、some顺呕、map枫攀、foreach的操作分別有什么作用?

1.背景介紹

ECMAScript5為數(shù)組定義了5個迭代方法株茶。every()来涨、filter()、forEach()启盛、map()蹦掐、some()。這5個方法都接收兩個參數(shù):運行的函數(shù)和運行該函數(shù)的作用域?qū)ο髏his的值僵闯。

循環(huán)(loop)卧抗,指的是在滿足條件的情況下,重復執(zhí)行同一段代碼鳖粟。比如社裆,while語句。

迭代(iterate)牺弹,指的是按照某種順序逐個訪問列表中的每一項浦马。比如时呀,for語句张漂。

遍歷(traversal)晶默,指的是按照一定的規(guī)則訪問樹形結(jié)構(gòu)中的每個節(jié)點,而且每個節(jié)點都只訪問一次航攒。

遞歸(recursion)磺陡,指的是一個函數(shù)不斷調(diào)用自身的行為。比如漠畜,以編程方式輸出著名的斐波納契數(shù)列币他。

大家好,我是IT修真院深圳分院第03期學員憔狞,一枚正直善良的web程序員蝴悉。

2.知識剖析

2.1、數(shù)組方法

every():對數(shù)組中的每一項運行給定函數(shù)瘾敢,如果該函數(shù)對每一項都返回true拍冠,則返回true。

filter():對數(shù)組中的每一項運行給定函數(shù)簇抵,返回該函數(shù)會返回true的項組成的數(shù)組庆杜。

forEach():對數(shù)組中的每一項運行給定函數(shù)。這個方法沒有返回值碟摆。

map():對數(shù)組中的每一項運行給定函數(shù)晃财,返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。

some():對數(shù)組中的每一項運行給定函數(shù)典蜕,如果該函數(shù)對任一項返回true断盛,則返回true。

2.2愉舔、some()

some方法為數(shù)組中的每一個元素執(zhí)行一次callback函數(shù)郑临,直到找到一個使得callback返回一個“真值”(即可轉(zhuǎn)換為布爾值true的值)。如果找到了這樣一個值屑宠,some將會立即返回true厢洞。否則,some返回false典奉。

語法:arr.some(callback[, thisArg])

2.3躺翻、every()

every方法為數(shù)組中的每個元素執(zhí)行一次callback函數(shù),直到它找到一個使callback返回false(表示可轉(zhuǎn)換為布爾值false的值)的元素卫玖。

如果發(fā)現(xiàn)了一個這樣的元素公你,every方法將會立即返回false。否則假瞬,callback為每一個元素返回true陕靠,every就會返回true迂尝。

語法:arr.every(callback[, thisArg])

2.4、filter()

filter()函數(shù)剪芥,它利用指定的函數(shù)確定是否在返回的數(shù)組中包含某一項,數(shù)組中的每個元素調(diào)用一次提供的函數(shù)垄开,

然后構(gòu)造一個所有值的新數(shù)組,也就是會過濾出符合條件的項税肪。

語法:var newArray = arr .filter(callback [溉躲,thisArg ])

2.5、map()

map()方法創(chuàng)建一個新數(shù)組益兄,其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果锻梳。

map方法會給原數(shù)組中的每個元素都按順序調(diào)用一次callback函數(shù)。

callback每次執(zhí)行后的返回值(包括undefined)組合起來形成一個新數(shù)組净捅。

語法:let new_array = arr.map(function callback(currentValue, index, array) {// Return element for new_array}[, thisArg])

2.6疑枯、forEach()

forEach方法按升序為數(shù)組中含有效值的每一項執(zhí)行一次callback函數(shù)。與for循環(huán)一樣蛔六。

語法:array.forEach(callback(currentValue, index, array){//do something}, this)

array.forEach(callback[, thisArg])

3.常見問題

every()荆永、filter()、some()古今、map()屁魏、forEach()的用法?

4 解決方案

4.1、map()方法創(chuàng)建一個新數(shù)組捉腥,其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果氓拼。例如下面例子:map方法會對數(shù)組每一項運行函數(shù),再返回新的數(shù)組抵碟。

varnumbers=[1,4,9];

vardoubles=numbers.map(function(num){returnnum*2;});

// doubles數(shù)組的值為: [2, 8, 18]

// numbers數(shù)組未被修改: [1, 4, 9]

4.2桃漾、every方法為數(shù)組中的每個元素執(zhí)行一次callback函數(shù),直到它找到一個使callback返回false(表示可轉(zhuǎn)換為布爾值false的值)的元素拟逮。如果發(fā)現(xiàn)了一個這樣的元素撬统,every方法將會立即返回false。否則敦迄,callback為每一個元素返回true恕出,every就會返回true搅窿。

例如下面例子:只有全部大于十才會返回true偿枕,當有一個小于十就會返回false鞠鲜。

functionisBigEnough(element,index,array){return(element>=10);}

varpassed=[12,5,8,130,44].every(isBigEnough);? ? // passed is false

passed=[12,54,18,130,44].every(isBigEnough);? ? ?// passed is true

4.3、some方法和every方法相對脾猛,只要有一個返回true撕彤,some方法就會返回true

例如下面例子:當數(shù)組項全部小于10 some方法就會返回false,當數(shù)組項有一個大于10返回true猛拴。

functionisBiggerThan10(element,index,array){returnelement>10;}[2,5,8,1,4].some(isBiggerThan10);? ?// false

[12,5,8,1,4].some(isBiggerThan10);? ?// true

4.4羹铅、filter方法返執(zhí)行會調(diào)函數(shù)后的數(shù)組

下面例子數(shù)組的元素由原數(shù)組中值大于 10 的元素組成:

functionisBigEnough(element){returnelement>=10;}

varfiltered=[12,5,8,130,44].filter(isBigEnough);

// filtered is [12, 130, 44]

4.5蚀狰、forEach方法與for循環(huán)一樣,按升序為數(shù)組中含有效值的每一項執(zhí)行一次callback函數(shù)

constarr=['a','b','c'];

arr.forEach(function(element){console.log(element);});

// a

// b

// c


7.參考文獻

參考1:javascript高級程序設計

參考2:MDN web技術(shù)文檔https://developer.mozilla.org/zh-CN/docs/Web

參考3:js數(shù)組操作--使用迭代方法替代for循環(huán)


1职员、什么是迭代麻蹋?

迭代(iterate),指的是按照某種順序逐個訪問列表中的每一項廉邑。比如哥蔚,for語句倒谷。

2蛛蒙、map()和forEach()有什么區(qū)別

map()方法創(chuàng)建一個新數(shù)組,其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果渤愁。

forEach方法與for循環(huán)一樣牵祟,按升序為數(shù)組中含有效值的每一項執(zhí)行一次callback函數(shù)。其實都是對數(shù)組每一項執(zhí)行方法抖格,區(qū)別是map()會返回結(jié)果數(shù)組诺苹,forEach()不反回數(shù)組。


3雹拄、forEach()方法與for循環(huán)有什么區(qū)別收奔?

本質(zhì)上沒有區(qū)別,只是寫法不同而已滓玖。都是按升序為數(shù)組中含有效值的每一項執(zhí)行一次callback函數(shù)


(&&&歡迎交流-----812271639)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末坪哄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子势篡,更是在濱河造成了極大的恐慌翩肌,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,430評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件禁悠,死亡現(xiàn)場離奇詭異念祭,居然都是意外死亡,警方通過查閱死者的電腦和手機碍侦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3 398
  • 文/潘曉璐 我一進店門粱坤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瓷产,你說我怎么就攤上這事站玄。” “怎么了拦英?”我有些...
    開封第一講書人閱讀 167,834評論 0 360
  • 文/不壞的土叔 我叫張陵蜒什,是天一觀的道長。 經(jīng)常有香客問我疤估,道長灾常,這世上最難降的妖魔是什么霎冯? 我笑而不...
    開封第一講書人閱讀 59,543評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮钞瀑,結(jié)果婚禮上沈撞,老公的妹妹穿的比我還像新娘。我一直安慰自己雕什,他們只是感情好缠俺,可當我...
    茶點故事閱讀 68,547評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著贷岸,像睡著了一般壹士。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上偿警,一...
    開封第一講書人閱讀 52,196評論 1 308
  • 那天躏救,我揣著相機與錄音,去河邊找鬼螟蒸。 笑死盒使,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的七嫌。 我是一名探鬼主播少办,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼诵原!你這毒婦竟也來了英妓?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,671評論 0 276
  • 序言:老撾萬榮一對情侶失蹤皮假,失蹤者是張志新(化名)和其女友劉穎鞋拟,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惹资,經(jīng)...
    沈念sama閱讀 46,221評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡贺纲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,303評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了褪测。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猴誊。...
    茶點故事閱讀 40,444評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖侮措,靈堂內(nèi)的尸體忽然破棺而出懈叹,到底是詐尸還是另有隱情,我是刑警寧澤分扎,帶...
    沈念sama閱讀 36,134評論 5 350
  • 正文 年R本政府宣布澄成,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏墨状。R本人自食惡果不足惜卫漫,卻給世界環(huán)境...
    茶點故事閱讀 41,810評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望肾砂。 院中可真熱鬧列赎,春花似錦、人聲如沸镐确。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽源葫。三九已至诗越,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間臼氨,已是汗流浹背掺喻。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1 272
  • 我被黑心中介騙來泰國打工芭届, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留储矩,地道東北人。 一個月前我還...
    沈念sama閱讀 48,837評論 3 376
  • 正文 我出身青樓褂乍,卻偏偏與公主長得像持隧,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子逃片,可洞房花燭夜當晚...
    茶點故事閱讀 45,455評論 2 359

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