JS的内建函数reduce

目录

• 数组的reduce方法的应用
• 多重叠加

@(js)

reduce函数，是ECMAScript5规范中出现的数组方法。在平时的工做中，相信你们使用的场景并很少，通常而言，能够经过reduce方法实现的逻辑均可以经过forEach方法来变相的实现，虽然不清楚浏览器的js引擎是如何在C＋＋层面实现这两个方法，可是能够确定的是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);