詳解陣列中的reduce方法

2022-06-07 15:30:15 字數 1972 閱讀 3149

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

這個方法接收兩個引數:

函式迭代的初始值

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

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

console.log(arr, sum);

執行結果:

分析:我們可以看到,在這裡reduce的作用就是對這個陣列進行求和,迭代了3次,函式迭代的初始值是1,也就是預設值(陣列的第一項),prev的值是每次計算後的值,現在理解了吧!

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

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

console.log(arr, sum);

執行結果:

分析:這裡我們新增了乙個初始的迭代值,也就是讓prev從5開始計算,可以看到,這裡迭代了4次,結果也加上了初始值。

最常見的應用一般就是求和以及求乘積了,比如說下面的例子:

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

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

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

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

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

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

return pre

},{})

console.log(arrresult)//結果:

執行結果:(第乙個console.log)

分析:大概的解釋一下,執行過程是這樣的:

由於設定了迭代初始值,pre的第乙個值是乙個空物件,此時cur為name,然後進行判斷,發現在pre中沒有name屬性,所以就將name對應的屬性值賦為1;

後面沒有重複的是一樣的道理,如果碰到重複值,就會將該屬性值加1,這樣就能計算元素重複的次數了。(有沒有覺得很神奇呀~)

去除陣列中重複的元素

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

return pre;

},)console.log(arrresult)//結果:["name", "age", "long", "short"]

分析:

這裡主要是借助迭代功能實現陣列的擴充套件,判斷當前元素是否已經新增到陣列中,如果不存在就從尾部新增,這個方法在去重方法中應該算比較簡單高效的。

對物件的屬性求和

let person = [

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

console.log(result)//結果:54

分析:

這裡主要就是利用reduce第乙個引數是迭代,可以通過初始化這個引數的資料型別,達到想實現的效果。

詳解陣列中的reduce方法

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

詳解陣列reduce方法以及用法

一 語法 arr.reduce callback,initialvalue 這個方法接收兩個引數 1.要執行的函式 要執行的函式中也可傳入引數,分別為 prev 上次呼叫函式的返回值 cur 當前元素 index 當前元素索引 arr 被遍歷的陣列 2.函式迭代的初始值 例子 eg1 var arr...

陣列reduce 方法

reduce 函式接收的引數和map 類似,乙個函式f,乙個list,但行為和map 不同,reduce 傳入的函式f必須接收兩個引數,reduce 對list的每個元素反覆呼叫函式f,並返回最終結果值。例子def f x,y return x y reduce f,1,3,5,7,9 返回結果為2...