当前位置:首页 > 日记 > 正文

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

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

基本概念

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 functionvar reducer = function add(sumSoFar, item) { return sumSoFar + item; };// do the jobvar total = items.reduce(reducer, 0);console.log(total); // 1130

可以看出,reduce函数根据初始值0,不断的进行叠加,完成最简单的总和的实现。

reduce函数的返回结果类型和传入的初始值相同,上个实例中初始值为number类型,同理,初始值也可为object类型。

例2:

var items = [10, 120, 1000];// our reducer functionvar reducer = function add(sumSoFar, item) { sumSoFar.sum = sumSoFar.sum + item; return sumSoFar;};// do the jobvar 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()方法详解及高级技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

如何设置和使用Excel中的数据有效

如何设置和使用Excel中的数据有效

数据有效性,步骤,如何设置,电脑软件,strong,  我们在使用Excel工作表来工作时,有时候为了防止和避免输入重复的数据,会使用到数据有效性。如何设置和使用Excel中的数据有效性呢?下面小编来告诉你吧。Excel中数据有效性的使用步骤首先我们打…

ppt2007中文版怎么设弄背景

ppt2007中文版怎么设弄背景

设置,方法,背景,中文版,技巧,  怎么在ppt2007中设置一张漂亮的图片做背景呢?一份好的PPT不仅可以吸引观众的眼球同时还可以反映自己的制作能力,下面小编就为你提供ppt2007怎样设置背景的方法啦,欢迎大家来到学习。ppt2007设置背景的方法技…

使用vue-resource进行数据交互的实

使用vue-resource进行数据交互的实

数据交互,实例,电脑软件,vue,resource,一.使用vue-resource插件进行数据交互式,返回的并不是直接的json数据,其实还封装了一层。如下代码:直接使用 res.result.list 取不到数据。methods:{ cartview:function(){ var _this = this; this.…

如何删除Excel工作表中数据区域中

如何删除Excel工作表中数据区域中

区域,数据,删除,奇数,工作,  在Excel工作表中,有时需要删除数据区域中的某些特定行,如数据区域中的奇数行。如果由操作者一行一行地删除,则效率较低。以下是小编为您带来的关于删除Excel工作表中数据区域中的奇数行,希望对您有所帮助。删除Ex…

excel 2010自动筛选的使用教程exce

excel 2010自动筛选的使用教程exce

筛选,使用教程,电脑软件,excel,strong,  在Excel2010中,界面改动得相当大,所以有很多用户都不知道该如何去把自动筛选的功能用出来,接下来请欣赏小编给大家网络收集整理的excel 2010自动筛选的使用教程。excel 2010自动筛选的使用教程自动筛…

excel怎么设置表格设置兼容模式

excel怎么设置表格设置兼容模式

设置,兼容模式,方法,表格,电脑软件,  Excel中的表格具体该如何从兼容模式改到正常模式呢?对于新手来说还是有一定难度,怎么办?下面是小编带来的关于excel表格兼容模式改正常模式的方法,希望阅读过后对你有所启发!excel表格设置兼容模式的方…

JavaScript中在光标处插入添加文本

JavaScript中在光标处插入添加文本

文本标签,光标,节点,方法,详细,正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样…

js实现日历的简单算法

js实现日历的简单算法

简单算法,日历,电脑软件,js,最近有用到日历可需要编辑文本的日历,为了绑定数据的方便,所以用js写了一套日历,其实思想也是很简单。实现步骤如下:1、首先取得处理月的总天数JS不提供此参数,我们需要计算。考虑到闰年问题会影响二月份的天数,我们先…

QQ怎么打开临时会话功能QQ开启临时

QQ怎么打开临时会话功能QQ开启临时

方法,屏蔽,教程,功能,电脑软件,  临时会话功能是针对双方非对方QQ好友进行对话的一个功能,我们怎么打开临时会话的功能呢?下面是小编为大家整编的QQ开启临时会话的教程,大家快来看看吧。QQ打开临时会话功能的方法1、登录QQ,点击打开系统设置2…

excel表格如何保留两位小数点

excel表格如何保留两位小数点

保留两位小数,设置,方法,表格,电脑软件,  excel是工作中最常用到的表,如果在对数据进行接触的过程中遇到小数点后出现很多位,怎么设置表格保留两位小数呢?接下来小编举例简单的例子告诉大家Excel表格设置保留两位小数的方法吧。Excel表格设…

如何使用ppt破解加密演示文稿

如何使用ppt破解加密演示文稿

加密,破解,演示文稿,如何使用,电脑软件,  在平时的生活中,我们经常会使用到PPT软件,如果我们之前加密的文稿忘记了密码,有破解的方法吗?以下是小编为您带来的关于使用ppt破解加密演示文稿,希望对您有所帮助。使用ppt破解加密演示文稿1:找到你…

wps文字怎么上传文件

wps文字怎么上传文件

文字,上传文件,方法,上传,文件,  wps的云文档功能是可以将我们是所编辑的文档上传到云端,上传到云端的文档是可以在移动设备上查看的。那么我们怎么上传云文件呢?下面就让小编告诉你wps如何上传云文件,希望小编整理的资料对大家有帮助。wps…