JS的内建函数reduce

mrcode 发布于2019-08-19 17:43 / 1344人阅读

摘要：函数，是规范中出现的数组方法。所有的一切通过一个函数来管理流程和传递初始参数。上面就是函数的实现，它需要对象作为参数，并返回一个类型的函数，作为的第一个参数。在该函数内部，则执行多维的叠加工作。

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

GPU云服务器云服务器内建函数 python内建函数 vps的内 reducer

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78787.html

[这段代码很Pythonic]Python中的内建函数（Built_in Funtions）

摘要：前言在官方文档的标准库章节中，第一节是简介，第二节就是，可见内建函数是标准库的重要组成部分，而有很多内建函数我们平时却很少用到或根本就不知道原来还有这么好用的函数居然直接就可以拿来用。接下来为大家介绍一些我认为被大家忽略掉的内建函数。前言在Python官方文档的标准库章节中，第一节是简介，第二节就是Built_in Functions，可见内建函数是Python标准库的重要组成部分...

zgbgx 2019-07-25 11:34 评论0 收藏0
Redux概念之四: reducer(归纳函数)与纯函数

摘要：函数的区分是以纯函数与不纯函数两者来区分，但这不光只有无副作用的差异，还有其他的条件。现在已经有一些新式的函数库或框架例如，会特别强制要求在某些地方只能使用纯函数，而具有副作用的不纯函数只能在特定的情况下才能使用。 reducer(归纳函数) reducer(归纳函数)这种函数的名称，是由数组的一个迭代方法reduce(归纳)而来，你可以参考MDN中的相关说明: 在JS语言中的数组re...

wangjuntytl 2019-08-20 13:58 评论0 收藏0
JS进阶篇--JS数组reduce()方法详解及高级技巧

摘要：基本概念方法接收一个函数作为累加器，数组中的每个值从左到右开始缩减，最终为一个值。例进阶应用使用方法可以完成多维度的数据叠加。在该函数内部，则执行多维的叠加工作。参考的内建函数数组方法的高级技巧基本概念 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数，不包括...

jerryloveemily 2019-08-21 12:00 评论0 收藏0
看例子，学 Python（三）

摘要：看例子，学三看例子，学一看例子，学二包创建一个目录，把挪到里面，再添加一个空文件便是一个包。对来说，对象由引用计数管理，计数为时对象会自动销毁。给定请问看例子，学一看例子，学二看例子，学 Python（三）看例子，学 Python（一）看例子，学 Python（二）包创建一个目录 myutil，把 mymath.py 挪到里面，再添加一个空文件 __init__.py： myu...

darkerXi 2019-07-25 12:01 评论0 收藏0
小李飞刀：python请你轻轻轻点虐

摘要：迭代器可以直接作用于循环的对象统称为可迭代对象。可以被函数调用并不断返回下一个值的对象称为迭代器。这个高阶函数，关键在于正确实现一个筛选函数。又是日常唠嗑的一小段真的是非常话唠的在下，日常给自己打点鸡血吧。昨晚和老妈聊了一整晚，所以昨天并没有更新。然后因为很快要开始算个税减免的部分，对于温饱线的在下而言，其实减免的可能就只是奶茶钱吧。工作的本质是赚钱，我也很想在30岁之前完成财务自...

Keagan 2019-07-30 18:41 评论0 收藏0