基本概念

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

语法:

arr.reduce(callback,[initialValue])
  • callback (执行数组中每个值的函数,包含四个参数)

    • previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
    • currentValue (数组中当前被处理的元素)
    • index (当前元素在数组中的索引)
    • array (调用 reduce 的数组)
  • initialValue (作为第一次调用 callback 的第一个参数。)

简单应用

例1:

var items = [10, 120, 1000];

// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; }; // do the job
var total = items.reduce(reducer, 0); console.log(total); //

可以看出,reduce函数根据初始值0,不断的进行叠加,完成最简单的总和的实现。

reduce函数的返回结果类型和传入的初始值相同,上个实例中初始值为number类型,同理,初始值也可为object类型。

例2:

var items = [10, 120, 1000];

// our reducer function
var reducer = function add(sumSoFar, item) {
sumSoFar.sum = sumSoFar.sum + item;
return sumSoFar;
}; // do the job
var total = items.reduce(reducer, {sum: 0}); console.log(total); // {sum:1130}

进阶应用

使用reduce方法可以完成多维度的数据叠加。如上例中的初始值{sum: 0},这仅仅是一个维度的操作,如果涉及到了多个属性的叠加,如{sum: 0,totalInEuros: 0,totalInYen: 0},则需要相应的逻辑进行处理。

在下面的方法中,采用分而治之的方法,即将reduce函数第一个参数callback封装为一个数组,由数组中的每一个函数单独进行叠加并完成reduce操作。所有的一切通过一个manager函数来管理流程和传递初始参数。

var manageReducers = function(reducers) {
return function(state, item) {
return Object.keys(reducers).reduce(
function(nextState, key) {
reducers[key](state, item);
return state;
},
{}
);
}
};

上面就是manager函数的实现,它需要reducers对象作为参数,并返回一个callback类型的函数,作为reduce的第一个参数。在该函数内部,则执行多维的叠加工作(Object.keys())。

通过这种分治的思想,可以完成目标对象多个属性的同时叠加,完整代码如下:

var reducers = {
totalInEuros : function(state, item) {
return state.euros += item.price * 0.897424392;
},
totalInYen : function(state, item) {
return state.yens += item.price * 113.852;
}
}; var manageReducers = function(reducers) {
return function(state, item) {
return Object.keys(reducers).reduce(
function(nextState, key) {
reducers[key](state, item);
return state;
},
{}
);
}
}; var bigTotalPriceReducer = manageReducers(reducers);
var initialState = {euros:0, yens: 0};
var items = [{price: 10}, {price: 120}, {price: 1000}];
var totals = items.reduce(bigTotalPriceReducer, initialState);
console.log(totals);

在来一个例子:
某同学的期末成绩如下表示

var result = [
{
subject: 'math',
score: 88
},
{
subject: 'chinese',
score: 95
},
{
subject: 'english',
score: 80
}
];

如何求该同学的总成绩?

var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);

假设该同学因为违纪被处罚在总成绩总扣10分,只需要将初始值设置为-10即可。

var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, -10);

如何求该同学三门课程的最大值和最小值

var max = result.reduce(function(prev, cur) {
var prev = parseInt(prev);
var curr = parseInt(cur.score);
if(prev>curr){
return prev;
}else{
return curr;
}
}, 0); var min = result.reduce(function(prev, cur) {
var prev = parseInt(prev);
var curr = parseInt(cur.score);
if(prev>curr){
return curr;
}else{
return prev;
}
}, 0);

我们来给这个例子增加一点难度。假如该同学的总成绩中,各科所占的比重不同,分别为50%,30%,20%,我们应该如何求出最终的权重结果呢?

解决方案如下:

var dis = {
math: 0.5,
chinese: 0.3,
english: 0.2
} var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, -10); var qsum = result.reduce(function(prev, cur) {
return cur.score * dis[cur.subject] + pre;
}, 0) console.log(sum, qsum);

再看一个例子,如何知道一串字符串中每个字母出现的次数?

var arrString = 'abcdaabc';

arrString.split('').reduce(function(res, cur) {
res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})

由于可以通过第二参数设置叠加结果的类型初始值,因此这个时候reduce就不再仅仅只是做一个加法了,我们可以灵活的运用它来进行各种各样的类型转换,比如将数组按照一定规则转换为对象,也可以将一种形式的数组转换为另一种形式的数组,大家可以动手去尝试一样。

[1, 2].reduce(function(res, cur) {
res.push(cur + 1);
return res;
}, [])

koa的源码中,有一个only模块,整个模块就一个简单的返回reduce方法操作的对象:

var only = function(obj, keys){
obj = obj || {};
if ('string' == typeof keys) keys = keys.split(/ +/);
return keys.reduce(function(ret, key){
if (null == obj[key]) return ret;
ret[key] = obj[key];
return ret;
}, {});
};

通过对reduce概念的理解,这个模块主要是想新建并返回一个obj对象中存在的keys的object对象。

var a = {
env : 'development',
proxy : false,
subdomainOffset : 2
}
only(a,['env','proxy']) // {env:'development',proxy : false}
本文转自:https://segmentfault.com/a/1190000010731933

最新文章

  1. vSphere Client 编辑虚拟机属性的问题
  2. September 17th 2016 Week 38th Saturday
  3. sql order by按俩个字段排序
  4. How many instances created in the WebContainer
  5. C#各版本特性
  6. MD5加密帮助类
  7. UVA Knight Moves
  8. 17.1.1.5 Creating a Data Snapshot Using mysqldump
  9. Android-------手机屏幕适配之文件适配
  10. shell中判断用法
  11. 海蜘蛛网络科技官方网站 :: 做最好的中文软路由 :: 软件路由器 :: 软路由 :: 软件路由 :: RouterOs
  12. LeetCode 533. Lonely Pixel II (孤独的像素之二) $
  13. 在Winform开发框架中使用DevExpress的内置图标资源
  14. [模板] k短路
  15. spring cloud(五)熔断监控Hystrix Dashboard和Turbine
  16. Render Functions & JSX
  17. BZOJ4962 : 简单的字符串
  18. 关于vue项目中,手动定义的scrollTop的值
  19. MacOS统计TCP/UDP端口号与对应服务
  20. mfc Unicode转 ASNI ,WCHAR 转 CHAR

热门文章

  1. Gerrit代码审核服务器搭建全过程
  2. [Algorithm] Coding Interview Question and Answer: Longest Consecutive Characters
  3. (算法)Hanoi Problem汉诺塔问题
  4. Selenium中定位元素的方法
  5. ibatis 批量插入
  6. 【VBA】点击工作簿中的每个单元格,整行整列变色
  7. java反射-获取方法信息
  8. spring spel表达式语言
  9. nyoj847 S + T(贪心)
  10. PHP-php.ini中文版