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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
javascript canvas实现简易时钟例子
Sep 05 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 多个submit提交表单 处理方法
2009/07/07 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
JavaScript中的其他对象
2008/01/16 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python 创建弹出式菜单的实现代码
2017/07/11 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python如何统计代码运行的时长
2019/07/24 Python
Python中断多重循环的思路总结
2019/10/04 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
python性能测试工具locust的使用
2020/12/28 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
课前一分钟演讲稿
2014/08/26 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
5个实用的JavaScript新特性
2022/06/16 Javascript