JS中常用數(shù)組遍歷方法總結(jié)

?1、Array.map()

????此方法是將數(shù)組中的每個元素調(diào)用一個提供的函數(shù)妆兑,結(jié)果作為一個新的數(shù)組返回,并沒有改原來的數(shù)組??

? ??//有三個參數(shù)

? ? 第一個是遍歷的數(shù)組內(nèi)容

? ? 第二個是參數(shù)是對應(yīng)的數(shù)組索引

? ? 第三個參數(shù)是數(shù)組本身

????let?arr = [1, 2, 3, 4, 5]

????let?newArr = arr.map(x => x*2)

????//arr= [1, 2, 3, 4, 5]?? 原數(shù)組保持不變

????//newArr = [2, 4, 6, 8, 10] 返回新數(shù)組


?2. Array.forEach()

? ??此方法是將數(shù)組中的每個元素執(zhí)行傳進(jìn)提供的函數(shù),沒有返回值,注意和map方法區(qū)分

????//有三個參數(shù)

? ? 第一個是遍歷的數(shù)組內(nèi)容

? ? 第二個是參數(shù)是對應(yīng)的數(shù)組索引

? ? 第三個參數(shù)是數(shù)組本身地

????let?arr = [1, 2, 3, 4, 5]

? ? arr.forEach(function(value,index,arr){

? ? ? ? console.log(value+1)

????????)

???// arr = [1, 2, 3, 4, 5]? 數(shù)組未改變,注意和map區(qū)分


3.Array.filter()

次方法是對數(shù)組中所有元素進(jìn)行判斷秉沼,將滿足條件的元素作為一個新的數(shù)組返回

同理有三個參數(shù)

let arr = [1,2,3,4,5]

let newArr = arr.filter(x=>x>2)

//newArr [3,4,5]

4.Array.every()

此方法是對數(shù)組中所有元素進(jìn)行判斷返回一個布爾值,如果所有元素都滿足判斷條件矿酵,則返回true氧猬,否則為false,不改變原來數(shù)組

同理有三個參數(shù)

let arr = [1,2,3,4]

arr.every(x=>x>=1) // true

arr.every(x=>x>2) // false


5.Array.some()

次方法是判斷數(shù)組中是否有滿足條件的選項坏瘩,只要一項滿足條件就返回true 否則返回false? 不改變原來數(shù)組

同理有三個參數(shù)

let arr = [1,2,3,4]

arr.some(x=>x>1)? //true

arr.some(x=>x>5) // false

6.Array.reduce()

次方法是數(shù)組中每一個元素一次執(zhí)行回調(diào)函數(shù),不包括數(shù)組中被刪除或者未被賦值的元素

有四個參數(shù)

????1漠魏、previousValue (上一次調(diào)用回調(diào)返回的值倔矾,或者是提供的初始值(initialValue))

????2、currentValue (數(shù)組中當(dāng)前被處理的元素)

????3柱锹、index (當(dāng)前元素在數(shù)組中的索引)

????4哪自、array (調(diào)用 reduce 的數(shù)組)

arr.reduce(callback,[initialValue])

例1

let arr = [1, 2, 3, 4];

let sum = arr.reduce(function(prev, cur, index, arr) {

????console.log(prev, cur, index);

????return prev + cur;

????})

console.log(arr, sum);

打印結(jié)果:

1 2 1

3 3 2

6 4 3

[1, 2, 3, 4] 10

這里可以看出,上面的例子index是從1開始的禁熏,第一次的prev的值是數(shù)組的第一個值壤巷。數(shù)組長度是4,但是reduce函數(shù)循環(huán)3次瞧毙。

例2

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

var sum = arr.reduce(function(prev, cur, index, arr) {

????console.log(prev, cur, index);

????return prev + cur;

????}胧华,0) //注意這里設(shè)置了初始值

console.log(arr, sum);

打印結(jié)果:

0 1 0

1 2 1

3 3 2

6 4 3

[1, 2, 3, 4] 10?

這個例子index是從0開始的,第一次的prev的值是我們設(shè)置的初始值0宙彪,數(shù)組長度是4矩动,reduce函數(shù)循環(huán)4次。

結(jié)論:如果沒有提供initialValue释漆,reduce 會從索引1的地方開始執(zhí)行 callback 方法悲没,跳過第一個索引。如果提供initialValue男图,從索引0開始示姿。

注意:如果這個數(shù)組為空甜橱,運用reduce是什么情況?

var arr = [];

var sum = arr.reduce(function(prev, cur, index, arr) {

console.log(prev, cur, index); return prev + cur;})

//報錯栈戳,"TypeError: Reduce of empty array with no initial value"

但是要是我們設(shè)置了初始值就不會報錯岂傲,如下:

var arr = [];

var sum = arr.reduce(function(prev, cur, index, arr) {

console.log(prev, cur, index); return prev + cur;},0)

console.log(arr, sum); // [] 0

所以一般來說我們提供初始值通常更安全

//reduce 高級用法

1 計算數(shù)組中每個元素出現(xiàn)的次數(shù)

let?names?=?['aa','bb','cc','dd','aa','dd']????????

let?NewName?=?names.reduce(function(pre,cut){?????????

???if(cut?in??pre){??????????????

??????pre[cut]++????????????

????}else{????

????????????pre[cut]?=?1??????

??????}????????????return?pre????????},{})????

????console.log(NewName)?//['aa':2,'bb':1,'cc':1,'dd':2]

2 數(shù)組去重

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

??let?newArr?=?arr.reduce(function(pre,cut){????????

????if(!pre.includes(cut)){??????????????

??????return?pre.concat(cut)????????????

????}else{????????????????

????????????return?pre?????????

???????}???????},[])??????

?console.log(newArr)?

3將二維數(shù)組轉(zhuǎn)化為一維數(shù)組

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

????let?newArr?=?arr.reduce(function(pre,cut){????

????????if(!pre.includes(cut)){????

????????????return?pre.concat(cut)????????

????}else{????????????????return?pre??????????

??????????}??????

?????},[])???

????console.log(arr.includes(2,3))?

4將二維數(shù)組轉(zhuǎn)化為一維數(shù)組

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

??let?newArr?=?arr.reduce(function(pre,cut){???????????

?return?pre.concat(cut)?????

???},[])??????

??console.log(newArr)?

4將多維數(shù)組轉(zhuǎn)化為一維數(shù)組

let?arr?=?[[0,?1],?[2,?3],?[4,[5,6,7]],55]?????

???const?fnc?=?function(arr){???????

?????return?arr.reduce(function(pre,cut){????????

???????return?pre.concat(Array.isArray(cut)?fnc(cut):cut)??????????

??????},[])????????}???????

?let?newArr?=?fnc(arr)????????

console.log(newArr)?

5對象屬性求和

let?result?=?[??????????

? ? ? ? ?{? ? ? ? ? ? ? ? ?subject:'math',????????????????score:90????????????},? ? ? ? ? ? ? ? ? ?????????{????????????????subject:'chinese',????????????????score:80????????????},? ????????{????????????????subject:'english',????????????????score:80????????????}??

??????]????????

const?sum?=?result.reduce((pre,cut)=>pre+cut.score,0)????????

console.log(sum)?


7 sort()

數(shù)組排序 默認(rèn)升序 按照字母編碼排序? ?

有一個參數(shù)為函數(shù)

let?array?=?[1,3,4,5,32,345,6]?????

???console.log(array.sort())? ? ? ?//[1, 3, 32, 345, 4, 5, 6]

??console.log(array.sort((pre,cut)=>pre>cut?1:-1)) //?[1, 3, 4, 5, 6, 32, 345]

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末荧琼,一起剝皮案震驚了整個濱河市譬胎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌命锄,老刑警劉巖堰乔,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異脐恩,居然都是意外死亡镐侯,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進(jìn)店門驶冒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來苟翻,“玉大人,你說我怎么就攤上這事骗污〕缑ǎ” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵需忿,是天一觀的道長诅炉。 經(jīng)常有香客問我,道長屋厘,這世上最難降的妖魔是什么涕烧? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮汗洒,結(jié)果婚禮上议纯,老公的妹妹穿的比我還像新娘。我一直安慰自己溢谤,他們只是感情好瞻凤,可當(dāng)我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著溯香,像睡著了一般鲫构。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上玫坛,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天结笨,我揣著相機與錄音,去河邊找鬼。 笑死炕吸,一個胖子當(dāng)著我的面吹牛伐憾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赫模,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼树肃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了瀑罗?” 一聲冷哼從身側(cè)響起胸嘴,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎斩祭,沒想到半個月后劣像,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡摧玫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年耳奕,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诬像。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡屋群,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出坏挠,到底是詐尸還是另有隱情芍躏,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布降狠,位于F島的核電站纸肉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏喊熟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一姐刁、第九天 我趴在偏房一處隱蔽的房頂上張望芥牌。 院中可真熱鬧,春花似錦聂使、人聲如沸壁拉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽弃理。三九已至,卻和暖如春屎蜓,著一層夾襖步出監(jiān)牢的瞬間痘昌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留辆苔,地道東北人算灸。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像驻啤,于是被迫代替她去往敵國和親菲驴。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,627評論 2 350

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

  • 數(shù)組方法 下面開始介紹數(shù)組的方法骑冗,數(shù)組的方法有數(shù)組原型方法赊瞬,也有從object對象繼承來的方法,這里我們只介紹數(shù)組...
    祈求者閱讀 369評論 0 2
  • JavaScript中創(chuàng)建數(shù)組有兩種方式 (一)使用 Array 構(gòu)造函數(shù): var arr1 = new Arr...
    landry閱讀 147評論 0 0
  • 1.join() var arr = [1,2,3]; console.log(arr.join()); // 1...
    _楊柳_閱讀 512評論 0 0
  • 1贼涩、join() join(separator): 將數(shù)組的元素組起一個字符串巧涧,以separator為分隔符,省略...
    澤玲_d7fb閱讀 562評論 0 1
  • 數(shù)組創(chuàng)建 JavaScript中創(chuàng)建數(shù)組有兩種方式磁携,第一種是使用 Array 構(gòu)造函數(shù): vararr1 = ne...
    劉松陽閱讀 262評論 0 0