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 相关文章推荐
javascript常用对话框小集
Sep 13 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
vue devtools的安装与使用教程
Aug 08 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php无限极分类实现的两种解决方法
2013/04/28 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
js导出格式化的excel 实例方法
2013/07/17 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JSONP之我见
2015/03/24 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
详解weex默认webpack.config.js改造
2018/01/08 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
Vuex实现数据共享的方法
2019/12/20 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
分享vim python缩进等一些配置
2018/07/02 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python extract及contains方法代码实例
2020/09/11 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android