JS中 reduce 的用法

過去有很長一段時間，我一直很難理解reduce()這個方法的具體用法，平時也很少用到它。事實上，如果你能真正了解它的話，其實在很多地方我們都可以用得上，那麼今天我們就來簡單聊聊js中 reduce() 的用法。

arr.reduce(function(prev,cur,index,arr), init);

其中，

arr表示原陣列；

prev表示上一次呼叫**時的返回值，或者初始值 init;

cur表示當前正在處理的陣列元素；

index表示當前正在處理的陣列元素的索引，若提供 init 值，則索引為0，否則索引為1；

init表示初始值。

看上去是不是感覺很複雜？沒關係，只是看起來而已，其實常用的引數只有兩個：prev和cur。接下來我們跟著例項來看看具體用法吧~

先提供乙個原始陣列：

var arr = [3,9,4,3,6,0,9];

實現以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是實現起來比較簡潔的一種吧。

var sum = arr.reduce(function
(prev, cur) ,0);

由於傳入了初始值0，所以開始時prev的值為0，cur的值為陣列第一項3，相加之後返回值為3作為下一輪**的prev值，然後再繼續與下乙個陣列項相加，以此類推，直至完成所有陣列項的和並返回。

var max = arr.reduce(function
(prev, cur) );

由於未傳入初始值，所以開始時prev的值為陣列第一項3，cur的值為陣列第二項9，取兩值最大值後繼續進入下一輪**。

var newarr = arr.reduce(function
(prev, cur) ,);

實現的基本原理如下：

① 初始化乙個空陣列

② 將需要去重處理的陣列中的第1項在初始化陣列中查詢，如果找不到（空陣列中肯定找不到），就將該項新增到初始化陣列中

③ 將需要去重處理的陣列中的第2項在初始化陣列中查詢，如果找不到，就將該項繼續新增到初始化陣列中

④ ……

⑤ 將需要去重處理的陣列中的第n項在初始化陣列中查詢，如果找不到，就將該項繼續新增到初始化陣列中

⑥ 將這個初始化陣列返回

該方法用法與reduce()其實是相同的，只是遍歷的順序相反，它是從陣列的最後一項開始，向前遍歷到第一項。

詳情請戳→簡述foreach()、map()、every()、some()和filter()的用法

reduce() 是陣列的歸併方法，與foreach()、map()、filter()等迭代方法一樣都會對陣列每一項進行遍歷，但是reduce() 可同時將前面陣列項遍歷產生的結果與當前遍歷項進行運算，這一點是其他迭代方法無法企及的

array.reduce(function(total, currentvalue, currentindex, arr), initialvalue);
/*  total: 必需。初始值, 或者計算結束後的返回值。
currentvalue： 必需。當前元素。
currentindex： 可選。當前元素的索引；                     
arr： 可選。當前元素所屬的陣列物件。
initialvalue: 可選。傳遞給函式的初始值，相當於total的初始值。
*/

陣列求和

const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total +num);
const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num, 10);  //
以10為初始值求和
var result =[
,  ,
];const sum = result.reduce((accumulator, cur) => accumulator + cur.score, 0); 
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, -10);  //
總分扣除10分

陣列最大值

const a = [23,123,342,12];
const max = a.reduce(function(pre,cur,inde,arr)); //
342

陣列物件中的用法

const objarr = [, , ];
const res = objarr.reduce((pre, cur, index, arr) =>
else
if (index === (arr.length - 1)) 
else
}, '');

求字串中字母出現的次數

const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => , {});

陣列轉陣列

var arr1 = [2, 3, 4, 5, 6]; //
每個值的平方
var newarr = arr1.reduce((accumulator, cur) => , );

陣列轉物件

var streams = [, ];
var obj = streams.reduce((accumulator, cur) => , {});

多維的疊加執行操作

var result =[
,  ,
];var dis =;
var res = result.reduce((accumulator, cur) => dis[cur.subject] * cur.score + accumulator, 0);

var prices = [, , ];
var rates =;
var initialstate = ;
var res = prices.reduce((accumulator, cur1) => object.keys(rates).reduce((prev2, cur2) =>total`] += cur1.price *rates[cur2];
return
accumulator;
}, {}), initialstate);
var managereducers = function
() total`] += item.price *rates[key];
return
state;
}, {});
}};var res1= prices.reduce(managereducers(), initialstate);

扁平乙個二維陣列

var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((x, y) => x.concat(y), );

物件陣列去重

const hash ={};
chatlists = chatlists.reduce((obj, next: object) =>_$`;
if (!hash[hashid]) _$`] = true
;      obj.push(next);
}return
obj;
}, );

compose函式

redux compose原始碼實現

function
compose(...funs) 
if (funs.length === 1) 
return funs.reduce((a, b) => (...arg) =>a(b(...arg)))
}

JS中 reduce 的用法

JS 陣列中物件去重 reduce 用法

Python中reduce 函式的用法

reduce函式的用法

JS中 reduce 的用法

JS 陣列中物件去重 reduce 用法

Python中reduce 函式的用法

reduce函式的用法

相關推薦