Javascript中内建函数reduce的应用详解


Posted in Javascript onOctober 20, 2016

前言

一般而言,可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实现,虽然不清楚浏览器的js引擎是如何在C++层面实现这两个方法,但是可以肯定的是reduce方法肯定也存在数组的遍历,在具体实现细节上是否针对数组项的操作和存储做了什么优化,则不得而知。

数组的reduce方法的应用

reduce方法有两个参数,第一个参数是一个callback,用于针对数组项的操作;第二个参数则是传入的初始值,这个初始值用于单个数组项的操作。需要注意的是,reduce方法返回值并不是数组,而是形如初始值的经过叠加处理后的操作。

reduce方法最常见的场景就是叠加。

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类型。

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);

总结

以上就是Javascript中内建函数reduce应用的全部内容,希望本文的内容对大家的学习或者工作能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jquery解析JSON数据示例代码
Mar 17 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 #Javascript
分享javascript、jquery实用代码段
Oct 20 #Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 #Javascript
纯JavaScript手写图片轮播代码
Oct 20 #Javascript
Zabbix添加Node.js监控的方法
Oct 20 #Javascript
Javascript实现图片懒加载插件的方法
Oct 20 #Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 #Javascript
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
几个学习PHP的网址
2006/11/25 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP实现验证码校验功能
2017/11/16 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
对pandas中Series的map函数详解
2018/07/25 Python
python:接口间数据传递与调用方法
2018/12/17 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python字典的遍历3种方法详解
2019/08/10 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
党章学习思想汇报
2014/01/14 职场文书
会计专业求职信范文
2014/03/16 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python