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

更新时间：2017年08月18日 16:56:29 作者：风雨后见彩虹

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 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()方法详解及高级技巧，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

axios利用params/data发送参数给springboot controlle的正确获取方式
这篇文章主要给大家介绍了关于axios利用params/data发送参数给springboot controlle的正确获取方式,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-02-02
addeventlistener监听scroll跟touch(实例讲解)
下面小编就为大家带来一篇addeventlistener监听scroll跟touch(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
php读取sqlite数据库入门实例代码
本文介绍了php读取sqlite数据库的简单例子，php编程中操作sqlite入门实例，有需要的朋友可以参考下
2014-06-06
uniapp小程序之配置首页搜索框功能的实现
这篇文章主要介绍了uniapp小程序之配置首页搜索框,我们介绍一下本次开发使用的是uniapp，本次分享内容的搜索框为禁止输入搜索框，点击跳转专属搜索页面，需要的朋友可以参考下
2022-09-09
微信小程序开发常用功能点与使用方法总结
最近收集了一些小程序开发中常用到的知识点,记录一下,所以下面这篇文章主要给大家介绍了关于微信小程序开发常用功能点与使用方法的相关资料,需要的朋友可以参考下
2021-10-10
jquery 实现上下滚动效果示例代码
上下滚动的效果，不用说，大家都有看到过，本文为大家介绍下使用jquery实现上下滚动效果，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
Layui数据表格前后端json数据接收的方法
今天小编就为大家分享一篇Layui数据表格前后端json数据接收的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
这篇文章主要介绍了 JavaScript 实现自己的安卓手机自动化工具脚本,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
BootStrap 超链接变按钮的实现方法
这篇文章主要介绍了BootStrap 超链接变按钮的实现方法以及js按钮bootstrap超链接的操作方法，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-09-09
JavaScript“尽快失败”的原则实例详解
我第一次听说编码原则中有“尽快失败”这一条时，觉得很奇怪，为什么代码要失败？应该成功才对呀。下面小编通过实例代码给大家介绍js 尽快失败的原则，一起看看吧
2016-10-10