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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
全面了解js中的script标签
Jul 04 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
bootstrap中的 form表单属性role="form"的作用详解
Jan 20 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
vue实现底部菜单功能
Jul 24 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 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实现ODBC数据分页显示一例
2006/10/09 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
解决laravel session失效的问题
2019/10/14 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
基于Python的OCR实现示例
2020/04/03 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
python两种注释用法的示例
2020/10/09 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
应届毕业生应聘自荐信
2013/12/07 职场文书
给领导的检讨书
2014/02/16 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
个人授权委托书样本
2014/09/13 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
合作协议书格式范本
2016/03/21 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫