详解JS数组Reduce()方法详解及高级技巧


Posted in Javascript onAugust 18, 2017

基本概念

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}

总结

以上所述是小编给大家介绍的详解JS数组Reduce()方法详解及高级技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
javascript将url解析为json格式的两种方法
Aug 18 #Javascript
Vue组件选项props实例详解
Aug 18 #Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 #Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 #Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 #Javascript
Vue中引入样式文件的方法
Aug 18 #Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
You might like
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python实现Event回调机制的方法
2019/02/13 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
美国五金商店:Ace Hardware
2018/03/27 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
户外婚礼策划方案
2014/02/08 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
春节联欢会主持词
2014/03/24 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
跳高加油稿
2015/07/21 职场文书
2016年教师新年寄语
2015/08/18 职场文书