JavaScript—数组reduce()方法详解及高级技巧(18)
基本概念
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); // 1130
可以看出,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);
我们来给这个例子增加一点难度。假如该同学的总成绩中,各科所占的比重不同,分别为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}
这里推荐一下我的前端学习交流群:731771211,里面都是学习前端的,群里会不定期更新最新的教程和学习方法,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的web前端党欢迎加入。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
20本新书免费送,再不上车真的会错过一个亿
在人类思想史的长河中,有几个巨星闪耀的黄金时代。从爱因斯坦提出相对论开始,随后普朗克、波尔、海森堡等人创立量子力学,冯·诺伊曼、图灵、香农等人开创电子计算机、人工智能和通信网络,沃森和克里克发现了脱氧核糖核酸(DNA)的双螺旋结构,阿波罗计划将人类送上月球,人类文明进入崭新的发展阶段。 历史告诉我们,一个新兴产业的崛起势必造成相关领域工作出现巨大人才缺口。高薪和机遇的双重诱惑让众多人才想要跨入AI的大门。 十一黄金假期将至,人民邮电出版社将出版一系列最新的人工智能学习图书,为了回馈读者,人民邮电出版社联合昂钛客人工智能社群及联盟社群,举办”我的AI学习之路“主题征文比赛,为大家送出一份有意义的礼物。 征文比赛 征文主题 我的AI学习之路 活动时间 2018年9月25日-2018年10月20日 活动奖品 1、异步纸质新书20本(赠书书目在下方哦) 2、异步社区e读版电子书20元代金券1000张(20元以下图书共计200余种,可免费选择) 参加方式 1、添加小秘书微信号bjtq2015 ,并在文末留言”异步图书“ 2、将参与征文比赛的原创文章发给小秘书。 3、小秘书拉你进入参赛活动微信群...
- 下一篇
JavaScript—ES6关于Promise的用法(19)
Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发。 当然,这并不代表迸发成了全栈。全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交互,后台熟悉数据库的增删查改。 想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行,这样按照Node的一般执行规律,要实现有序的异步操作,通常是一层加一层嵌套下去。 为了解决这个问题,ES6提出了Promise的实现。 含义Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作。 它的一般表示形式为: new Promise( /* executor */ function(resolve, reject) { if (/* success */) { // ...执行代码 resolve(); } else { /...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Hadoop3单机部署,实现最简伪集群
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- 2048小游戏-低调大师作品
- CentOS8编译安装MySQL8.0.19
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果