当前位置：首页 > 资讯 > 技术文档

Javascript中内建函数reduce的应用详解

时间：2020-02-07 11:57 编辑：来源：阅读：
扫一扫，手机访问

摘要：Javascript中内建函数reduce的应用详解

[b]前言[/b] 一般而言，可以通过[code]reduce[/code]方法实现的逻辑都可以通过[code]forEach[/code]方法来变相的实现，虽然不清楚浏览器的js引擎是如何在C＋＋层面实现这两个方法，但是可以肯定的是[code]reduce[/code]方法肯定也存在数组的遍历，在具体实现细节上是否针对数组项的操作和存储做了什么优化，则不得而知。 [b]数组的reduce方法的应用[/b] [code]reduce[/code]方法有两个参数，第一个参数是一个[code]callback[/code]，用于针对数组项的操作；第二个参数则是传入的初始值，这个初始值用于单个数组项的操作。需要注意的是，[code]reduce[/code]方法返回值并不是数组，而是形如初始值的经过叠加处理后的操作。 [b]reduce方法最常见的场景就是叠加。[/b]

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

可以看出，[code]reduce[/code]函数根据初始值0，不断的进行叠加，完成最简单的总和的实现。前文中也提到，[code]reduce[/code]函数的返回结果类型和传入的初始值相同，上个实例中初始值为[code]number[/code]类型，同理，初始值也可为[code]object[/code]类型。

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}

[b]多重叠加[/b] 使用reduce方法可以完成多维度的数据叠加。如上例中的初始值[code]{sum: 0} [/code]，这仅仅是一个维度的操作，如果涉及到了多个属性的叠加，如[code]{sum: 0,totalInEuros: 0,totalInYen: 0} [/code]，则需要相应的逻辑进行处理。在下面的方法中，采用分而治之的方法，即将[code]reduce[/code]函数第一个参数[code]callback[/code]封装为一个数组，由数组中的每一个函数单独进行叠加并完成[code]reduce[/code]操作。所有的一切通过一个[code]manager[/code]函数来管理流程和传递初始参数。

var manageReducers = function(reducers) {
 return function(state, item) {
 return Object.keys(reducers).reduce(
  function(nextState, key) {
  reducers[key](state, item);
  return state;
  },
  {}
 );
 }
};

上面就是[code]manager[/code]函数的实现，它需要reducers对象作为参数，并返回一个[code]callback[/code]类型的函数，作为[code]reduce[/code]的第一个参数。在该函数内部，则执行多维的叠加工作（ [code]Object.keys（） [/code]）。通过这种分治的思想，可以完成目标对象多个属性的同时叠加，完整代码如下：

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

[b]总结[/b] 以上就是Javascript中内建函数reduce应用的全部内容，希望本文的内容对大家的学习或者工作能有所帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：动态的改变IFrame的高度实现IFrame自动伸展适应高度
下一篇：JS组件Bootstrap按钮组与下拉按钮详解

资讯排行榜
更多>>