[轉(zhuǎn)]JS數(shù)組遍歷方法

文章主要來源:

JS數(shù)組遍歷方法總結(jié) -- 我是豆子啊

我們用更簡潔的語法(比如內(nèi)置函數(shù))遍歷數(shù)組搞莺,從而消除循環(huán)結(jié)構(gòu)拢切。

forEach碟联、map冷守、filter、reduce、every、some 不可以使用 break 和 continue 抑进,因為在function中解決了閉包陷阱的問題

for、for...in、for...of、while可以使用?break鳄乏、continue

用于遍歷數(shù)組元素使用:for(),forEach()不铆,map()劳坑,for...of

用于循環(huán)對象屬性使用:for...in?

1.for循環(huán)

使用臨時變量將長度緩存起來,避免重復(fù)獲取數(shù)組長度,當數(shù)組較大時優(yōu)化效果比較明顯离斩。

缺點:這種寫法比較麻煩

for(j = 0,len=arr.length; j < len; j++) {

}

2.foreach循環(huán)

遍歷數(shù)組中的每一項核偿,沒有返回值粉寞,可以不用知道數(shù)組長度,對原數(shù)組沒有影響蓄愁,不支持IE

缺點:這種寫法的問題在于,無法中途跳出forEach循環(huán)丹拯,break命令或return命令都不能奏效咬像。

//1 沒有返回值

arr.forEach((item,index,array)=>{

????//執(zhí)行代碼

})

//參數(shù):item數(shù)組中的當前項, index當前項的索引, array原始數(shù)組倒彰;

//數(shù)組中有幾項缩赛,那么傳遞進去的匿名回調(diào)函數(shù)就需要執(zhí)行幾次阅酪;

3.map循環(huán)

map函數(shù),遍歷數(shù)組每個元素,并回調(diào)操作,需要返回值嫂便,返回值組成新的數(shù)組厂画,原數(shù)組不變解孙。

每個元素都是回調(diào)函數(shù)返回的值廷臼。

arr.map(function(value,index,array){

  //do something

  return?XXX

})

var?ary = [12,23,24,42,1];?

var?res = ary.map(function?(item,index,ary ) {?

????return?item*10;?

})?

console.log(res);//-->[120,230,240,420,10];? 原數(shù)組拷貝了一份初肉,并進行了修改

console.log(ary);//-->[12,23,24,42,1]妄壶;? 原數(shù)組并未發(fā)生變化

4.forof遍歷

可以正確響應(yīng)break、continue和return語句

for?(var?value of myArray) {

console.log(value);

}

5.filter遍歷

返回一個新數(shù)組雀彼,數(shù)組的元素是原數(shù)組中通過測試的元素(就是回調(diào)函數(shù)返回 true 的話著蟹,對應(yīng)的元素會進入新數(shù)組)轻局, 原數(shù)組不變。

var?arr = [

??{ id: 1, text:?'aa', done:?true?},

??{ id: 2, text:?'bb', done:?false?}

]

console.log(arr.filter(item => item.done))

轉(zhuǎn)為ES5

arr.filter(function?(item) {

??return?item.done;

});

var?arr = [73,84,56, 22,100]

var?newArr = arr.filter(item => item>80)?//得到新數(shù)組 [84, 100]

console.log(newArr,arr)

6.some遍歷

some()類似于filter()俊啼,不同的是返回值為Boolean,只要有一個值滿足即立刻返回true,不再繼續(xù)執(zhí)行洲尊,否則返回false。

some()是對數(shù)組中每一個元素運行指定函數(shù),如果該函數(shù)對任一個元素返回true矢渊,則返回true锰瘸。

var?arr = [ 1, 2, 3, 4, 5, 6 ];?

????console.log( arr.some(?function( item, index, array ){?

????????return?item > 3;?

????}));?

true

7.every遍歷

every()類似于some(),不同的是找到符合條件的值會繼續(xù)執(zhí)行甘晤,如果每個值都滿足條件才會返回true漱逸,否則就是false婆誓。

every()是對數(shù)組中的每一個元素運行指定函數(shù),如果該函數(shù)對每一個元素返回true歇拆,則返回true鞋屈。

var?arr = [ 1, 2, 3, 4, 5, 6 ];?

console.log( arr.every(?function( item, index, array ){?

????????return?item > 3;?

????}));?

false

8.reduce

reduce()?方法接收一個函數(shù)作為累加器(accumulator),數(shù)組中的每個值(從左到右)開始縮減故觅,最終為一個值厂庇。

var?total = [0,1,2,3,4].reduce((a, b)=>a + b);?//10

reduce接受一個函數(shù),函數(shù)有四個參數(shù)输吏,分別是:上一次的值权旷,當前值,當前值的索引贯溅,數(shù)組

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){

?return?previousValue + currentValue;

});

9.reduceRight

reduceRight()方法的功能和reduce()功能是一樣的拄氯,不同的是reduceRight()從數(shù)組的末尾向前將數(shù)組中的數(shù)組項做累加。

reduceRight()首次調(diào)用回調(diào)函數(shù)callbackfn時它浅,prevValue和curValue可以是兩個值之一译柏。如果調(diào)用reduceRight()時提供了initialValue參數(shù),則prevValue等于initialValue姐霍,curValue等于數(shù)組中的最后一個值鄙麦。如果沒有提供initialValue參數(shù),則prevValue等于數(shù)組最后一個值镊折,curValue等于數(shù)組中倒數(shù)第二個值胯府。

var?arr = [0,1,2,3,4];

arr.reduceRight(function?(preValue,curValue,index,array) {

????return?preValue + curValue;

});?// 10

10.find

find()方法返回數(shù)組中符合測試函數(shù)條件的第一個元素。否則返回undefined?

var?stu = [

????{name:?'張三',gender:?'男',age: 20},

????{name:?'王小毛',gender:?'男',age: 20},

????{ name:?'李四',gender:?'男', age: 20}

]

function?getStu(element){

???return?element.name ==?'李四'

}

stu.find(getStu)

//返回結(jié)果為

//{name: "李四", gender: "男", age: 20}

ES6方法

stu.find((element) => (element.name ==?'李四'))

11.findIndex

對于數(shù)組中的每個元素恨胚,findIndex方法都會調(diào)用一次回調(diào)函數(shù)(采用升序索引順序)骂因,直到有元素返回true。只要有一個元素返回 true与纽,findIndex立即返回該返回 true 的元素的索引值侣签。如果數(shù)組中沒有任何元素返回 true塘装,則findIndex返回 -1急迂。

findIndex不會改變數(shù)組對象影所。

[1,2,3].findIndex(function(x) { x == 2; });

// Returns an index value of 1.

[1,2,3].findIndex(x => x == 4);

// Returns an index value of -1.

12.keys,values僚碎,entries

?ES6 提供三個新的方法 —— entries()猴娩,keys()和values() —— 用于遍歷數(shù)組。它們都返回一個遍歷器對象勺阐,可以用for...of循環(huán)進行遍歷卷中,唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷渊抽,entries()是對鍵值對的遍歷

for?(let?index of ['a',?'b'].keys()) {

console.log(index);

}

// 0

// 1

for?(let?elem of ['a',?'b'].values()) {

console.log(elem);

}

// 'a'

// 'b'

for?(let?[index, elem] of ['a',?'b'].entries()) {

console.log(index, elem);

}

// 0 "a"

// 1 "b"

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蟆豫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子懒闷,更是在濱河造成了極大的恐慌十减,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件愤估,死亡現(xiàn)場離奇詭異帮辟,居然都是意外死亡,警方通過查閱死者的電腦和手機玩焰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門由驹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人昔园,你說我怎么就攤上這事蔓榄。” “怎么了默刚?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵甥郑,是天一觀的道長。 經(jīng)常有香客問我羡棵,道長壹若,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任皂冰,我火速辦了婚禮店展,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘秃流。我一直安慰自己赂蕴,他們只是感情好,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布舶胀。 她就那樣靜靜地躺著概说,像睡著了一般碧注。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上糖赔,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天萍丐,我揣著相機與錄音,去河邊找鬼放典。 笑死逝变,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的奋构。 我是一名探鬼主播壳影,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼弥臼!你這毒婦竟也來了宴咧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤径缅,失蹤者是張志新(化名)和其女友劉穎掺栅,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體芥驳,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡柿冲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了兆旬。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片假抄。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖丽猬,靈堂內(nèi)的尸體忽然破棺而出宿饱,到底是詐尸還是另有隱情,我是刑警寧澤脚祟,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布谬以,位于F島的核電站,受9級特大地震影響由桌,放射性物質(zhì)發(fā)生泄漏为黎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一行您、第九天 我趴在偏房一處隱蔽的房頂上張望铭乾。 院中可真熱鬧,春花似錦娃循、人聲如沸炕檩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽笛质。三九已至泉沾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間妇押,已是汗流浹背跷究。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留舆吮,地道東北人揭朝。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓队贱,卻偏偏與公主長得像色冀,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子柱嫌,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348