數組 filter、some、map、foreach的操作分別有什么作用?

1.背景介紹

ECMAScript5為數組定義了5個迭代方法。every()、filter()、forEach()、map()、some()。這5個方法都接收兩個參數:運行的函數和運行該函數的作用域對象this的值。

循環(loop),指的是在滿足條件的情況下,重復執行同一段代碼。比如,while語句。

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

遍歷(traversal),指的是按照一定的規則訪問樹形結構中的每個節點,而且每個節點都只訪問一次。

遞歸(recursion),指的是一個函數不斷調用自身的行為。比如,以編程方式輸出著名的斐波納契數列。

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

2.知識剖析

2.1、數組方法

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

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

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

map():對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。

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

2.2、some()

some方法為數組中的每一個元素執行一次callback函數,直到找到一個使得callback返回一個“真值”(即可轉換為布爾值true的值)。如果找到了這樣一個值,some將會立即返回true。否則,some返回false。

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

2.3、every()

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

如果發現了一個這樣的元素,every方法將會立即返回false。否則,callback為每一個元素返回true,every就會返回true。

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

2.4、filter()

filter()函數,它利用指定的函數確定是否在返回的數組中包含某一項,數組中的每個元素調用一次提供的函數,

然后構造一個所有值的新數組,也就是會過濾出符合條件的項。

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

2.5、map()

map()方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。

map方法會給原數組中的每個元素都按順序調用一次callback函數。

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

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

2.6、forEach()

forEach方法按升序為數組中含有效值的每一項執行一次callback函數。與for循環一樣。

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

array.forEach(callback[, thisArg])

3.常見問題

every()、filter()、some()、map()、forEach()的用法?

4 解決方案

4.1、map()方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。例如下面例子:map方法會對數組每一項運行函數,再返回新的數組。

varnumbers=[1,4,9];

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

// doubles數組的值為: [2, 8, 18]

// numbers數組未被修改: [1, 4, 9]

4.2、every方法為數組中的每個元素執行一次callback函數,直到它找到一個使callback返回false(表示可轉換為布爾值false的值)的元素。如果發現了一個這樣的元素,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

例如下面例子:當數組項全部小于10 some方法就會返回false,當數組項有一個大于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方法返執行會調函數后的數組

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

functionisBigEnough(element){returnelement>=10;}

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

// filtered is [12, 130, 44]

4.5、forEach方法與for循環一樣,按升序為數組中含有效值的每一項執行一次callback函數

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

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

// a

// b

// c


7.參考文獻

參考1:javascript高級程序設計

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

參考3:js數組操作--使用迭代方法替代for循環


1、什么是迭代?

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

2、map()和forEach()有什么區別

map()方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。

forEach方法與for循環一樣,按升序為數組中含有效值的每一項執行一次callback函數。其實都是對數組每一項執行方法,區別是map()會返回結果數組,forEach()不反回數組。


3、forEach()方法與for循環有什么區別?

本質上沒有區別,只是寫法不同而已。都是按升序為數組中含有效值的每一項執行一次callback函數


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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,663評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,125評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,506評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,614評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,402評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,934評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,021評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,168評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,690評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,596評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,288評論 5 357
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,027評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,404評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,662評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,398評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,743評論 2 370

推薦閱讀更多精彩內容