作者 |风雨后见彩虹来源 |基本概念

  reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

  reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

  语法:

  arr.reduce(callback,[initialValue])

  简单应用

  例1：

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">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); <p>console.log(total); // 1130
  
</pre></p>
  可以看出，reduce函数根据初始值0，不断的进行叠加，完成最简单的总和的实现。

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

  例2：

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">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}</pre>

  进阶应用

  使用reduce方法可以完成多维度的数据叠加。如上例中的初始值{sum: 0}，这仅仅是一个维度的操作js数组应用，如果涉及到了多个属性的叠加，如{sum: 0,totalInEuros: 0,totalInYen: 0}，则需要相应的逻辑进行处理。

  在下面的方法中，采用分而治之的方法，即将reduce函数第一个参数callback封装为一个数组，由数组中的每一个函数单独进行叠加并完成reduce操作。所有的一切通过一个manager函数来管理流程和传递初始参数。

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">var manageReducers = function(reducers) { return function(state, item) { return Object.keys(reducers).reduce( function(nextState, key) { reducerskey; return state; }, {} ); } <p>};
  
</pre></p>
  上面就是manager函数的实现，它需要reducers对象作为参数js数组应用，并返回一个callback类型的函数，作为reduce的第一个参数。在该函数内部，则执行多维的叠加工作（Object.keys（））。

  通过这种分治的思想，可以完成目标对象多个属性的同时叠加，完整代码如下：

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">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) { reducerskey; 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);</pre>

  在来一个例子：

  某同学的期末成绩如下表示

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">var result = [ { subject: 'math', score: 88 }, { subject: 'chinese', score: 95 }, { subject: 'english', score: 80 } <p>];
  
</pre></p>
  如何求该同学的总成绩？

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">var sum = result.reduce(function(prev, cur) { return cur.score + prev; <p>}, 0);
  
</pre></p>
  假设该同学因为违纪被处罚在总成绩总扣10分，只需要将初始值设置为-10即可。

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">var sum = result.reduce(function(prev, cur) { return cur.score + prev; <p>}, -10);
  
</pre></p>
  我们来给这个例子增加一点难度。假如该同学的总成绩中，各科所占的比重不同，分别为50%，30%，20%，我们应该如何求出最终的权重结果呢？

  解决方案如下：

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">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) <p>console.log(sum, qsum);
  
</pre></p>
  再看一个例子，如何知道一串字符串中每个字母出现的次数？

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">var arrString = 'abcdaabc'; arrString.split('').reduce(function(res, cur) { res[cur] ? res[cur] ++ : res[cur] = 1 return res; <p>}, {})
  
</pre></p>
  由于可以通过第二参数设置叠加结果的类型初始值，因此这个时候reduce就不再仅仅只是做一个加法了，我们可以灵活的运用它来进行各种各样的类型转换，比如将数组按照一定规则转换为对象，也可以将一种形式的数组转换为另一种形式的数组，大家可以动手去尝试一样。

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">[1, 2].reduce(function(res, cur) { res.push(cur + 1); return res; <p>}, [])
  
</pre></p>
  koa的源码中，有一个only模块，整个模块就一个简单的返回reduce方法操作的对象：

  <pre class="cm-s-default" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">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; }, {}); <p>};
  
</pre></p>
  通过对reduce概念的理解，这个模块主要是想新建并返回一个obj对象中存在的keys的object对象。

  <pre class="cm-s-default"><p>
  var a = {
env : 'development', proxy : false, subdomainOffset : 2 }   only(a,['env','proxy']) // {env:'development',proxy : false}
  
</pre></p>