ES5之?dāng)?shù)組新方法總結(jié)

今天要總結(jié)的內(nèi)容是ES5中數(shù)組的新增方法银室,有forEach、map、filter蜈敢、find辜荠、every、some抓狭、reduce伯病,今天只總結(jié)使用,不研究原理否过,相關(guān)原理請(qǐng)百度午笛。因?yàn)樵谙旅胬又卸啻问褂昧思^函數(shù),如果對(duì)箭頭函數(shù)不了解需要先了解箭頭函數(shù)苗桂。

一药磺、forEach

題目:遍歷打印數(shù)組中的值

由圖中可得出,forEach的功能和for循環(huán)是一樣的煤伟,forEach的參數(shù)必須是函數(shù)癌佩,否則報(bào)錯(cuò),迭代函數(shù)的參數(shù)分別為:數(shù)組的值 colors[n]便锨,數(shù)組的下標(biāo) n围辙,數(shù)組 colors,用 forEach 打印 colors 結(jié)果如下圖

上面提到 forEach 的參數(shù)是個(gè)函數(shù)放案,所以 forEach 的參數(shù)是可以抽離出來(lái)一個(gè)函數(shù)表達(dá)式或者聲明一個(gè)函數(shù)姚建,因此上面代碼還可以寫成下面的方式


缺點(diǎn):普通的 for循環(huán),當(dāng)你循環(huán)至一定條件可使用 break 跳出循環(huán)吱殉,但 forEach 不能桥胞,forEach 是要一直循環(huán)到數(shù)組最后一個(gè)值,在 forEach 里使用 break考婴、continue 會(huì)報(bào)錯(cuò),使用return;默認(rèn)返回 undefined催烘。

使用場(chǎng)景:當(dāng)你想使用for循環(huán)來(lái)遍歷執(zhí)行某些事情時(shí)可使用 forEach

二沥阱、map

場(chǎng)景一:將數(shù)組 a 的每個(gè)值乘于2賦值給數(shù)組 b

場(chǎng)景一總結(jié):array.map 的參數(shù)也是個(gè)函數(shù),函數(shù)的參數(shù)值和 forEach 的一樣伊群,并且 array.map 的值是一個(gè)全新的數(shù)組考杉,且這個(gè)數(shù)組并不是使用了原來(lái)的位置,不管map有沒(méi)有改變數(shù)組的值舰始,map之后的數(shù)組和原來(lái)數(shù)組的內(nèi)存位置是兩個(gè)不同的內(nèi)存(下面詳解)崇棠。

上圖可看出,temp4 改變第0位時(shí)丸卷,numbers 的0位也改變了枕稀,因此可看出 temp4 只是淺拷貝了numbers2,和numbers2共用了一個(gè)內(nèi)存位置,而 temp5 在 在改變了0位時(shí)萎坷,numbers2 并沒(méi)有跟著改變凹联,因此可看出 temp5 和 numbers5 的內(nèi)存位置是不同的,因此可看出 map 是深拷貝(涉及深拷貝和淺拷貝哆档,不懂可點(diǎn)擊? 淺拷貝深拷貝之理解 個(gè)人筆記 )

使用場(chǎng)景:當(dāng)你想改變數(shù)組的某個(gè)值蔽挠,但又想保存原數(shù)組,可使用map重新定義一個(gè)數(shù)組(數(shù)組的值可變或不變)

三瓜浸、filter

場(chǎng)景:從動(dòng)物對(duì)象中篩選出老鼠類型的對(duì)象

圖中可看出澳淑,filter是篩選出所有type為老鼠的值,返回值也是一個(gè)數(shù)組插佛,參數(shù)也是個(gè)函數(shù)杠巡,函數(shù)的參數(shù)值和 forEach 的一樣。

使用場(chǎng)景:篩選某些值朗涩,或者抽離某些條件的值忽孽。

四、find

場(chǎng)景:獲取animals中的名字為Tom的動(dòng)物

從上圖結(jié)果可看出谢床,find是指返回一個(gè)值兄一,并且是第一個(gè)值,在循環(huán)查找到第一個(gè)值時(shí)就跳出循環(huán)识腿。如果find的值不在數(shù)組中出革,循環(huán)結(jié)束將返回結(jié)果值是undefined。

使用場(chǎng)景:篩選某些值渡讼,或者抽離某些條件的值骂束。

五、every 和 some

every和some的返回都是Boolean值成箫,every是一假為假展箱,some是一真為真。every循環(huán)時(shí)蹬昌,一旦查找到false將跳出循環(huán)混驰,而some則是一旦查找到true則跳出循環(huán)。

題目:查找數(shù)組a中type值存在于數(shù)組b中type值的對(duì)象(filter+some)

六皂贩、reduce

reduce的第一個(gè)參數(shù)是函數(shù)栖榨,函數(shù)的參數(shù)分別為 a,b,c,d,第二個(gè)參數(shù)是 a 的初始值明刷,如果沒(méi)有第二個(gè)參數(shù)婴栽,a默認(rèn)為0。reduce可替代forEach辈末,map愚争。

場(chǎng)景:累加數(shù)組的值

更多場(chǎng)景使用請(qǐng)看?http://www.reibang.com/p/56446e901438


總結(jié)映皆,forEach 、map 准脂、filter 返回值是一個(gè)數(shù)組劫扒,find 的返回值是數(shù)組中的一個(gè)值(對(duì)象或者基本類型)或 undefined ,every 和 some 的返回值 true 或 false 狸膏, reduce 的 返回值可以是數(shù)組沟饥,對(duì)象 或者 基本類型;而所有的方法的迭代函數(shù)中的參數(shù)都有數(shù)組的當(dāng)前值湾戳,數(shù)組的當(dāng)前下標(biāo)及數(shù)組贤旷,reduce除了這三個(gè)參數(shù),比其他數(shù)組還多一個(gè)參數(shù)砾脑;

學(xué)習(xí)資源:

? ? ? ? 視頻:米斯特吳的ES6_Javascript_最全最新講解 https://ke.qq.com/course/269571

? ? ? ? 書籍:阮一峰的ECMAScript 6 入門 http://es6.ruanyifeng.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末幼驶,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子韧衣,更是在濱河造成了極大的恐慌盅藻,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,718評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件畅铭,死亡現(xiàn)場(chǎng)離奇詭異氏淑,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)硕噩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門假残,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人炉擅,你說(shuō)我怎么就攤上這事辉懒。” “怎么了谍失?”我有些...
    開封第一講書人閱讀 158,207評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵眶俩,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我快鱼,道長(zhǎng)仿便,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,755評(píng)論 1 284
  • 正文 為了忘掉前任攒巍,我火速辦了婚禮,結(jié)果婚禮上荒勇,老公的妹妹穿的比我還像新娘柒莉。我一直安慰自己,他們只是感情好沽翔,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6 386
  • 文/花漫 我一把揭開白布兢孝。 她就那樣靜靜地躺著窿凤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪跨蟹。 梳的紋絲不亂的頭發(fā)上雳殊,一...
    開封第一講書人閱讀 50,050評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音窗轩,去河邊找鬼夯秃。 笑死,一個(gè)胖子當(dāng)著我的面吹牛痢艺,可吹牛的內(nèi)容都是我干的仓洼。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼堤舒,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼色建!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起舌缤,我...
    開封第一講書人閱讀 37,882評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤箕戳,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后国撵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體陵吸,經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2 327
  • 正文 我和宋清朗相戀三年卸留,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了走越。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡耻瑟,死狀恐怖旨指,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情喳整,我是刑警寧澤谆构,帶...
    沈念sama閱讀 34,477評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站框都,受9級(jí)特大地震影響搬素,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜魏保,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3 317
  • 文/蒙蒙 一熬尺、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧谓罗,春花似錦粱哼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)胯舷。三九已至,卻和暖如春绊含,著一層夾襖步出監(jiān)牢的瞬間桑嘶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工躬充, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留逃顶,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2 362
  • 正文 我出身青樓麻裳,卻偏偏與公主長(zhǎng)得像口蝠,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子津坑,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2 351

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

  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,219評(píng)論 0 4
  • 數(shù)組總共有22種方法妙蔗,本文將其分為對(duì)象繼承方法、數(shù)組轉(zhuǎn)換方法疆瑰、棧和隊(duì)列方法眉反、數(shù)組排序方法、數(shù)組拼接方法穆役、創(chuàng)建子數(shù)組...
    Sachie閱讀 890評(píng)論 0 7
  • Lru算法(Least recently used寸五,最近最少使用),其思想核心是最新操作(添加耿币、讀仁嵝印)的數(shù)據(jù),使用...
    sunger閱讀 1,885評(píng)論 0 2
  • 勉兒在滬求學(xué)淹接,臨近畢業(yè)十性。正值大考攻堅(jiān),“智齒”造訪塑悼。戲賦小詩(shī)劲适。 千里傳凄音, 智齒臨兒口厢蒜。 牙齦疼難忍霞势, 哺飯艱似...
    清水一滴閱讀 358評(píng)論 3 4
  • 第一次見小魚老師巷屿,給人印象最為深刻的就是那樣青春活潑的氣質(zhì)固以,自然而然的帶給你一種積極樂(lè)觀,開朗向上感覺(jué)!沒(méi)有哪個(gè)女...
    683cd3f741fe閱讀 1,368評(píng)論 0 0