美文网首页
JS的内建函数reduce

JS的内建函数reduce

作者: 秋天de童话 | 来源:发表于2017-11-08 19:57 被阅读27次

    数组的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}
    

    <a name="_label1"></a>

    多重叠加

    使用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);
    

    https://www.cnblogs.com/accordion/p/5230287.html

    性能
    http://www.w3cplus.com/javascript/array-part-8.html

    相关文章

      网友评论

          本文标题:JS的内建函数reduce

          本文链接:https://www.haomeiwen.com/subject/nvoymxtx.html