JS的内建函数reduce

2019年8月30日 57次阅读 来源: RoyalRover

@(js)

reduce函数，是ECMAScript5范例中涌现的数组要领。在日常平凡的事情中，置信人人运用的场景并不多，一般而言，能够经由过程reduce要领完成的逻辑都能够经由过程forEach要领来变相的完成，虽然不清楚浏览器的js引擎是如安在C＋＋层面完成这两个要领，然则能够一定的是reduce要领一定也存在数组的遍历，在详细完成细节上是不是针对数组项的操纵和存储做了什么优化，则不得而知。

[TOC]

数组的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);
    原文作者：RoyalRover
    原文地址: https://segmentfault.com/a/1190000004520428
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞