JavaScript reduce方法详解：从基础累加到复杂对象处理

前言

reduce与forEach的实现差异

通常来说，凡是能用reduce方法实现的逻辑，基本也能通过forEach方法间接实现。尽管我们不清楚浏览器JavaScript引擎在C++底层具体是如何实现这两个方法的，但可以确定的是，reduce方法内部必然涉及数组的遍历过程。至于其具体实现细节中是否针对数组项的操作和存储进行了特定优化，目前尚不明确。

数组的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中Array.prototype.reduce方法的深度应用与实战解析

reduce与forEach的实现差异

reduce方法基础用法与参数解析

利用分治思想处理多维数据叠加

实用工具推荐