JavaScript 中 forEach剩失、map屈尼、reduce、filter 的用法和區(qū)別

forEach的用法

數(shù)組.forEach(function(數(shù)組的每個(gè)元素){
//code
});
具體的代碼如下:

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);// 'a'  'b'  'c'
});

看起來就是一個(gè)簡(jiǎn)單的循環(huán)拴孤,只不過比for循環(huán)的格式看起來簡(jiǎn)單一些脾歧,但是這個(gè)里面沒辦法獲取到當(dāng)前元素的標(biāo),如果一定要用forEach獲取元素的下標(biāo)演熟,你可以自己添加一個(gè)變量再循環(huán)內(nèi)部自增,但是不建議這么做蚕冬,選擇for循環(huán)也是很不錯(cuò)的获三。

map的用法

數(shù)組.map(function(當(dāng)前元素, 當(dāng)前元素索引, 當(dāng)前數(shù)組){
//code
},一般不寫棺聊,默認(rèn)this);

var array1 = ['a', 'b', 'c'];

var arr2 = array1.map(function(element,index,arr) {
    return element + '1';
});
console.log(array1); //a,b,c
console.log(arr2); //a1,b1,c1

map可以只用于簡(jiǎn)單的循環(huán)作喘,也可以加上返回值返回一個(gè)新的數(shù)組,而且不會(huì)改變?cè)瓟?shù)組。

reduce的用法

數(shù)組.reduce(function (計(jì)算結(jié)束后的返回值豌熄,當(dāng)前元素囱持,當(dāng)前元素索引,當(dāng)前數(shù)組){
//code
});

var array1 = ['a', 'b', 'c'];

var num = array1.reduce(function(total, element) {
  console.log(total); //a ab abc
  return total + element;
});
console.log(num); //abc

一般計(jì)算的時(shí)候就會(huì)想起reduce,用起來很方便,求個(gè)和求個(gè)積什么的分分鐘。返回值就是我們要的結(jié)果骗露。

filter的用法

數(shù)組.filter(function(當(dāng)前元素述寡,當(dāng)前元素索引,當(dāng)前數(shù)組){
//code
});

var array1 = [1, 2, 3, 4];

var arr2 = array1.filter(function(element, index, arr) {
  return element > 2;
});
console.log(arr2); //3,4

filter的結(jié)構(gòu)和map的結(jié)構(gòu)差不多惭婿,并且filter最后也會(huì)返回一個(gè)新的數(shù)組换吧,但是filter主要用于判斷贯莺,判斷之后直接返回符合要求的元素还蹲,但是這個(gè)例子中要是把filter直接換成map,結(jié)果就是false,false,true,true,這并不是我們想要的結(jié)果炫狱。

總結(jié):

這四個(gè)都有各自的側(cè)重點(diǎn)酷含,需要了解以后根據(jù)自己的需求挑選呀舔。

尤雨溪形象的解釋媚赖,我覺得很實(shí)用,解釋的很通俗江解,所以在最后附上:

假設(shè)我們有一個(gè)數(shù)組,每個(gè)元素是一個(gè)人。你面前站了一排人。
foreach 就是你按順序一個(gè)一個(gè)跟他們做點(diǎn)什么井辜,具體做什么,隨便:

people.forEach(function (dude) {
  dude.pickUpSoap();
});

map 就是你手里拿一個(gè)盒子(一個(gè)新的數(shù)組)破托,一個(gè)一個(gè)叫他們把錢包扔進(jìn)去阐虚。結(jié)束的時(shí)候你獲得了一個(gè)新的數(shù)組侮叮,里面是大家的錢包亥宿,錢包的順序和人的順序一一對(duì)應(yīng)碍庵。

var wallets = people.map(function (dude) {
  return dude.wallet;
});

reduce 就是你拿著錢包,一個(gè)一個(gè)數(shù)過去看里面有多少錢岸股汀?每檢查一個(gè)哪怔,你就和前面的總和加一起來叉信。這樣結(jié)束的時(shí)候你就知道大家總共有多少錢了营袜。

var totalMoney = wallets.reduce(function (countedMoney, wallet) {
  return countedMoney + wallet.money;
}, 0);

補(bǔ)充一個(gè) filter 的:
你一個(gè)個(gè)錢包數(shù)過去的時(shí)候,里面錢少于 100 塊的不要(留在原來的盒子里),多于 100 塊的丟到一個(gè)新的盒子里距淫。這樣結(jié)束的時(shí)候你又有了一個(gè)新的數(shù)組绞绒,里面是所有錢多于 100 塊的錢包:

var fatWallets = wallets.filter(function (wallet) {
  return wallet.money > 100;
});

最后要說明一點(diǎn)這個(gè)類比和實(shí)際代碼的一個(gè)區(qū)別,那就是 map 和 filter 都是 immutable methods榕暇,也就是說它們只會(huì)返回一個(gè)新數(shù)組蓬衡,而不會(huì)改變?cè)瓉淼哪莻€(gè)數(shù)組,所以這里 filter 的例子是和代碼有些出入的(原來的盒子里的錢包減少了)彤枢,但為了形象說明狰晚,大家理解就好。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末缴啡,一起剝皮案震驚了整個(gè)濱河市壁晒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌业栅,老刑警劉巖秒咐,帶你破解...
    沈念sama閱讀 219,490評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異式镐,居然都是意外死亡反镇,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門娘汞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人夕玩,你說我怎么就攤上這事你弦。” “怎么了燎孟?”我有些...
    開封第一講書人閱讀 165,830評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵禽作,是天一觀的道長。 經(jīng)常有香客問我揩页,道長旷偿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,957評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮萍程,結(jié)果婚禮上幢妄,老公的妹妹穿的比我還像新娘。我一直安慰自己茫负,他們只是感情好蕉鸳,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著忍法,像睡著了一般潮尝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上饿序,一...
    開封第一講書人閱讀 51,754評(píng)論 1 307
  • 那天勉失,我揣著相機(jī)與錄音,去河邊找鬼原探。 笑死戴质,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的踢匣。 我是一名探鬼主播告匠,決...
    沈念sama閱讀 40,464評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼离唬!你這毒婦竟也來了后专?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤输莺,失蹤者是張志新(化名)和其女友劉穎戚哎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嫂用,經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡型凳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了嘱函。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甘畅。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖往弓,靈堂內(nèi)的尸體忽然破棺而出疏唾,到底是詐尸還是另有隱情,我是刑警寧澤函似,帶...
    沈念sama閱讀 35,819評(píng)論 5 346
  • 正文 年R本政府宣布槐脏,位于F島的核電站,受9級(jí)特大地震影響撇寞,放射性物質(zhì)發(fā)生泄漏顿天。R本人自食惡果不足惜堂氯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望牌废。 院中可真熱鬧咽白,春花似錦、人聲如沸畔规。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽叁扫。三九已至三妈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間莫绣,已是汗流浹背畴蒲。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留对室,地道東北人模燥。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像掩宜,于是被迫代替她去往敵國和親蔫骂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2 355

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