詳解陣列reduce方法以及用法

2022-05-10 12:35:09 字數 2396 閱讀 3886

一、語法

arr.reduce(callback,[initialvalue])

這個方法接收兩個引數:

1.要執行的函式

要執行的函式中也可傳入引數,分別為

prev:上次呼叫函式的返回值

cur:當前元素

index:當前元素索引

arr:被遍歷的陣列

2.函式迭代的初始值

例子:

eg1:

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

var sum = arr.reduce(function

(prev, cur, index, arr) )

console.log(arr, sum);

列印結果:

1 2 1

3 3 2

6 4 3[1, 2, 3, 4] 10eg2:

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

var sum = arr.reduce(function

(prev, cur, index, arr) ,0) //

注意這裡設定了初始值

console.log(arr, sum);

列印結果:

0 1 0

1 2 1

3 3 2

6 4 3[1, 2, 3, 4] 10

如果沒有提供initialvalue,reduce 會從索引1的地方開始執行 callback 方法,跳過第乙個索引。如果提供initialvalue,從索引0開始。

注意:如果這個陣列為空,運用reduce會報錯,設定了初始值就不會報錯。

二、reduce用法

1.reduce初級用法

求和或乘積

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

console.log(arr.reduce((a,b) => a + b))//

15console.log(arr.reduce((a,b) => a * b))//

120

2.reduce高階用法

eg1:計算陣列中每個元素出現的次數

let arr = ['name','age','long','short','long','name','name'] 

let arrresult = arr.reduce((pre,cur) =>

else

return

pre},{})

console.log(arrresult)

//結果:

eg2:去除陣列中重複的元素

let arrresult = arr.reduce((pre,cur) =>

return

pre;

},)console.log(arrresult)

//結果:["name", "age", "long", "short"]

eg3:物件的屬性求和

let person =[

,,]let result = person.reduce((a,b) =>,0)

console.log(result)

//結果:54

eg4:將二維陣列轉化為一維

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

let newarr = arr.reduce((pre,cur)=>,)

console.log(newarr);

//[0, 1, 2, 3, 4, 5]

eg5:將多維陣列轉化為一維

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

const newarr = function

(arr)

console.log(newarr(arr));

//[0, 1, 2, 3, 4, 5, 6, 7]

拓展:reduceright()方法

reduceright() 方法的功能和reduce()功能是一樣的,不同的是reduceright() 從陣列的末尾向前將陣列中的陣列項做累加。

reduceright() 首次呼叫**函式callbackfn 時,prevalue 和 curvalue 可以是兩個值之一。如果呼叫reduceright()時提供了第二個引數,則prevalue等於該引數,curvalue等於陣列中的最後乙個值。如果沒有提供,則prevalue等於陣列最後乙個值,curvalue等於陣列中倒數第二個值。

詳解陣列中的reduce方法

這幾天面試被問到了陣列的方法有哪些,回答得簡直一塌糊塗,面試官說reduce的功能很強大,於是想對這個方法進行總結,在紅寶書中對這個方法的描述並不算多,我也是參考了其他文章才進行總結的,下面就開始吧 在紅寶書中,將這個方法定義為陣列的歸併方法,這個方法和迭代方法 map,foreach,filter...

詳解陣列中的reduce方法

在紅寶書中,將這個方法定義為陣列的歸併方法,這個方法和迭代方法 map,foreach,filter.一樣,都會對陣列進行遍歷,reduce與他們不同的是函式的第乙個引數得到的是迭代計算後的效果 看不懂沒關係,繼續往下看就會懂了 這個方法接收兩個引數 函式迭代的初始值 let arr 1,2,3,4...

手寫redux方法以及陣列reduce方法

在了解reduce的好處之前,我們先知道reduce是什麼?reduce是陣列的乙個方法,函式接受的引數有四個,函式上一次的結果,當前的結果,索引,當前執行的陣列 在尾巴處也可以加乙個初始的值。每乙個引數都有很大的用處,運用好的話,可以幻化出各種變化。let r 1,2,3 reduce 上一次返回...