zoukankan      html  css  js  c++  java
  • JS的内建函数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);
    
  • 相关阅读:
    ubuntu 安装 redis desktop manager
    ubuntu 升级内核
    Ubuntu 内核升级,导致无法正常启动
    spring mvc 上传文件,但是接收到文件后发现文件变大,且文件打不开(multipartfile)
    angular5 open modal
    POJ 1426 Find the Multiple(二维DP)
    POJ 3093 Margritas
    POJ 3260 The Fewest Coins
    POJ 1837 Balance(二维DP)
    POJ 1337 A Lazy Worker
  • 原文地址:https://www.cnblogs.com/accordion/p/5230287.html
Copyright © 2011-2022 走看看