ES6數(shù)組幾個方法的總結(jié)

1、forEach()

forEach() 方法指定數(shù)組的每項元素都執(zhí)行一次傳入的函數(shù),返回值為undefined。

語法:arr.forEach(fn, thisArg);

fn表示在數(shù)組每一項上執(zhí)行的函數(shù)function(value, index, array),接受三個參數(shù):

  • value 當(dāng)前正在被處理的元素的值
  • index 當(dāng)前元素的數(shù)組索引
  • array 數(shù)組本身

thisArg可選谁撼,用來當(dāng)做fn函數(shù)內(nèi)的this對象。

forEach 將為數(shù)組中每一項執(zhí)行一次 fn 函數(shù)滋饲,那些已刪除厉碟,新增或者從未賦值的項將被跳過(但不包括值為 undefined 的項)。

var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
  array[index] = value * value;
  console.log(this.name); // cc被打印了三次
},obj);
console.log(array); // [1, 9, 25], 可見原數(shù)組改變了
console.log(sReturn); // undefined, 可見返回值為undefined

得益于鴨式辨型屠缭,雖然forEach不能直接遍歷對象箍鼓,但它可以通過call方式遍歷類數(shù)組對象。如下:

var o = {0:1, 1:3, 2:5, length:3};
Array.prototype.forEach.call(o,function(value, index, obj){
  console.log(value,index,obj);
  obj[index] = value * value;
},o);
// 1 0 Object {0: 1, 1: 3, 2: 5, length: 3}
// 3 1 Object {0: 1, 1: 3, 2: 5, length: 3}
// 5 2 Object {0: 1, 1: 9, 2: 5, length: 3}
console.log(o); // Object {0: 1, 1: 9, 2: 25, length: 3}

注意:forEach無法直接退出循環(huán)呵曹,只能使用return 來達(dá)到for循環(huán)中continue的效果款咖,并且forEach不能在低版本IE(6~8)中使用

2何暮、map()

map() 方法遍歷數(shù)組,使用傳入函數(shù)處理每個元素铐殃,并返回函數(shù)的返回值組成的新數(shù)組海洼。

語法:arr.map(fn, thisArg)

fn和thisArg同forEach()

var arr = [1,2,3,4];
arr.map((value,index,array) => {
    return item*10 //新數(shù)組為10,20,30,40
})
//map遍歷數(shù)組,返回一個新數(shù)組富腊,不改變原數(shù)組的值坏逢。

3、filter()

filter() 方法使用傳入的函數(shù)測試所有元素赘被,并返回所有通過測試的元素組成的新數(shù)組是整。它就好比一個過濾器,篩掉不符合條件的元素民假。

語法:arr.filter(fn, thisArg)

fn和thisArg同forEach()

var arr = [1,2,3,4];
arr.filter((value,index,array) => {
    return value > 2 //新數(shù)組為[3,4]
})
//filter過濾掉數(shù)組中不滿足條件的值浮入,返回一個新數(shù)組,不改變原數(shù)組的值阳欲。

4舵盈、reduce()

reduce() 方法接收一個方法作為累加器陋率,數(shù)組中的每個值(從左至右) 開始合并球化,最終為一個值。

語法:arr.reduce(fn, initialValue)

fn 表示在數(shù)組每一項上執(zhí)行的函數(shù)瓦糟,接受四個參數(shù):

  • previousValue 上一次調(diào)用回調(diào)返回的值筒愚,或者是提供的初始值
  • value 數(shù)組中當(dāng)前被處理元素的值
  • index 當(dāng)前元素在數(shù)組中的索引
  • array 數(shù)組自身
var arr = [1,2,3,4];
arr.reduce((previousValue,value,index,array) => {
    console.log(previousValue)  // 1  3  6  previousValue為上次一計算的結(jié)果
    console.log(value)  // 2  3  4
    console.log(index)  // 1  2  3
    return previousValue+value  //最終結(jié)果為10
})
//reduce 讓數(shù)組的前后兩項進(jìn)行某種計算。然后返回其值菩浙,并繼續(xù)計算巢掺。
//不改變原數(shù)組,返回計算的最終結(jié)果劲蜻,從數(shù)組的第二項開始遍歷陆淀。

5、every()

every() 方法使用傳入的函數(shù)測試所有元素先嬉,只要其中有一個函數(shù)返回值為 false轧苫,那么該方法的結(jié)果為 false;如果全部返回 true疫蔓,那么該方法的結(jié)果才為 true含懊。因此 every 方法存在如下規(guī)律:

  • 若需檢測數(shù)組中存在元素大于100 (即 one > 100),那么我們需要在傳入的函數(shù)中構(gòu)造 “false” 返回值 (即返回 item <= 100)衅胀,同時整個方法結(jié)果為 false 才表示數(shù)組存在元素滿足條件岔乔;(簡單理解為:若是單項判斷,可用 one false ===> false)
  • 若需檢測數(shù)組中是否所有元素都大于100 (即all > 100)那么我們需要在傳入的函數(shù)中構(gòu)造 “true” 返回值 (即返回 item > 100)滚躯,同時整個方法結(jié)果為 true 才表示數(shù)組所有元素均滿足條件雏门。(簡單理解為:若是全部判斷嘿歌,可用 all true ===> true)
var arr = [1,2,3,4];
arr.every((value,index,array) => {
    return value> 1 //結(jié)果為false
})
//遍歷數(shù)組每一項,每一項返回true,則最終結(jié)果為true茁影。
//當(dāng)任何一項返回false時搅幅,停止遍歷,返回false呼胚。不改變原數(shù)組

以下是鴨式辨型的寫法:

var o = {0:10, 1:8, 2:25, length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){
  return value >= 8;
},o);
console.log(bool); // true

6茄唐、some()

some() 方法剛好同 every() 方法相反,some 測試數(shù)組元素時蝇更,只要有一個函數(shù)返回值為 true沪编,則該方法返回 true,若全部返回 false年扩,則該方法返回 false蚁廓。some 方法存在如下規(guī)律:

  • 若需檢測數(shù)組中存在元素大于100 (即 one > 100),那么我們需要在傳入的函數(shù)中構(gòu)造 “true” 返回值 (即返回 item > 100)厨幻,同時整個方法結(jié)果為 true 才表示數(shù)組存在元素滿足條件相嵌;(簡單理解為:若是單項判斷,可用 one true ===> true)
  • 若需檢測數(shù)組中是否所有元素都大于100(即 all > 100)况脆,那么我們需要在傳入的函數(shù)中構(gòu)造 “false” 返回值 (即返回 item <= 100)饭宾,同時整個方法結(jié)果為 false 才表示數(shù)組所有元素均滿足條件。(簡單理解為:若是全部判斷格了,可用 all false ===> false)

some方法與includes方法有著異曲同工之妙看铆,他們都是探測數(shù)組中是否擁有滿足條件的元素,一旦找到盛末,便返回true弹惦。
some 的鴨式辨型寫法可以參照every,同樣它也不能在低版本IE(6~8)中使用

var arr = [1,2,3,4];
arr.some((value,index,array) => {
    return value> 3 //結(jié)果為true
})
//遍歷數(shù)組每一項悄但,只要有一個函數(shù)返回值為 true棠隐,結(jié)果返回true。
//若全部返回 false檐嚣,則該方法返回 false助泽。
//不改變原數(shù)組
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市净嘀,隨后出現(xiàn)的幾起案子报咳,更是在濱河造成了極大的恐慌,老刑警劉巖挖藏,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件暑刃,死亡現(xiàn)場離奇詭異,居然都是意外死亡膜眠,警方通過查閱死者的電腦和手機岩臣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門溜嗜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人架谎,你說我怎么就攤上這事炸宵。” “怎么了谷扣?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵土全,是天一觀的道長。 經(jīng)常有香客問我会涎,道長裹匙,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任末秃,我火速辦了婚禮概页,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘练慕。我一直安慰自己惰匙,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布铃将。 她就那樣靜靜地躺著项鬼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪麸塞。 梳的紋絲不亂的頭發(fā)上秃臣,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天涧衙,我揣著相機與錄音哪工,去河邊找鬼。 笑死弧哎,一個胖子當(dāng)著我的面吹牛雁比,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播撤嫩,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼偎捎,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了序攘?” 一聲冷哼從身側(cè)響起茴她,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎程奠,沒想到半個月后丈牢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡瞄沙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年己沛,在試婚紗的時候發(fā)現(xiàn)自己被綠了慌核。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡申尼,死狀恐怖垮卓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情师幕,我是刑警寧澤粟按,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站霹粥,受9級特大地震影響钾怔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蒙挑,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一宗侦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧忆蚀,春花似錦矾利、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至欣鳖,卻和暖如春察皇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背泽台。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工什荣, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人怀酷。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓稻爬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蜕依。 傳聞我的和親對象是個殘疾皇子桅锄,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,864評論 2 354

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

  • Javascript有很多數(shù)組的方法,有的人有W3C的API样眠,還可以去MDN上去找友瘤,但是我覺得API上說的不全,M...
    頑皮的雪狐七七閱讀 4,083評論 0 6
  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line)檐束,也就是一...
    悟名先生閱讀 4,149評論 0 13
  • ES5中的數(shù)組方法辫秧,語法大部分都一樣** 語法 ** array.forEach(callback(current...
    laiyituan閱讀 649評論 0 0
  • 01 “Lan,你看厢塘,就在那個轉(zhuǎn)角茶没,我遇見的Franc肌幽。“ 說這話時抓半,Ida和我正坐在老城格朗大街40號盧梭故居對...
    繁花私語閱讀 621評論 6 17
  • 時光不寂寞 有憂愁 讓她才下眉頭卻上心頭 有自由 讓他早九晚五浪跡天涯 有很多 讓花滿山頭殘枝敗柳
    可樂可閱讀 78評論 4 1