数组reduce方法以及高级技巧
基本概念:
reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值。
reduce为数组中的每一个元素依次执行回调函数。不包括数组中被删除或从未赋值的元素,接受两个参数。第一参数是一个回调函数,又接收四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用reduce的数组。第二个参数是作为第一次调用callback的第一个参数即初始参数。
语法:
arr.reduce(callback, [initialValue])
* callback(执行数组中每一个值得函数,包含四个参数)
previousValue(上一次调用回返回的值,或者是提供的初始值(initialValue))
currentValue(数组中当前被处理的元素)
index(当前元素在数组中的索引)
array(调用reduce的数组)
* inatialValue(作为第一次调用callback的第一个参数)
简单应用

可以看出,reduce函数根据初始值1,不断地进行叠加,完成最简单的递归
reduce函数的返回值结果类型和传入的初始值相同,上个实例中初始值为number类型,同理,初始值也可以为object类型

进阶应用
使用reduce方法可以完成多维的数据叠加,如上例中的初始值{sum: 0},这仅仅是一个维度的操作,如果涉及到了多个属性的叠加,如: {sum: 0, totalInEuros: 0, totalInYen: 0}, 则需要相应逻辑进行处理。
在下面的方法中,采用分而治之的方法,即将reduce函数第一个参数callback封装一个数组,有数组中的每一个函数单独进行叠加并完成reduce操作。所有的一切通过一个manager函数来管理流程和传递初始参数。
前方高能!!!!!我也是花了半个多小时才看懂研究出来的,已经加上注释了,希望能够帮助你,有兴趣的可以研究下

上面manager函数的实现,他需要reducers对象作为参数,并返回一个callback类型的函数,作为reduce的第一个参数,在该函数内部,则执行多维的叠加工作(Object.key())。通过这种分而治之的思想,可以完成对象的多个属性同时叠加。
再来举一个例子:某个同学的期末成绩如下表示

如何求该同学的总成绩?

假设同学因为违纪被处罚在总成绩扣10分,只需要将初始值-10即可。

接下来举的这个例子,增加一点难度。假设该同学的总成绩中,各科所占的比重不同,分别为:50%, 30%, 20%,我们应该如何求出最终的权重结果呢?

再来看一个例子, 如何知道一串字符串中每个字母出现的次数

由于可以通过第二个参数设置叠加结果的类型初始值,因此这个时候reduce就不仅仅是做一个加法了, 我们可以灵活运用它来进行各式各样的类型转换为对象,也可以将一种形式的数组转换为另一种形式的数组。可以动手尝试一下。
koa(node的框架)源码中,有一个only模块,整个模块就一个简单的返回reduce方法操作的对象:

希望以上的内容会对你对reduce有更深层次的了解,谢谢!
数组reduce方法以及高级技巧的更多相关文章
- JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
- es 5 数组reduce方法记忆
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值. 概念:对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并 ...
- js数组reduce()方法的使用和一些应用场景
reduce()的使用 reduce()方法为归并类方法,最常见的应用场景就是,计算数组中每一项的总和. reduce()方法会遍历数组的每一项,它接收两个参数: 第一个参数是:每次遍历都会调用的函数 ...
- 手写redux方法以及数组reduce方法
reduce能做什么? 1)求和 2)计算价格 3)合并数据 4)redux的compose方法 这篇文章主要内容是什么? 1)介绍reduce的主要作用 2)手写实现reduce方法 0)了解red ...
- ES6中的数组reduce()方法详解
reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...
- JS数组reduce()方法详解及高级技巧
1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...
- JS数组reduce()方法
1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...
- 数组-reduce方法
转自: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/139 实现 convert 方法,把原始 list ...
- JS reduce()方法详解,使用reduce数组去重
壹 ❀ 引 稍微有了解JavaScript数组API的同学,对于reduce方法至少有过一面之缘,也许是for与forEach太强大,或者filter,find很实用,在实际开发中我至始至终没使用过 ...
随机推荐
- libtar 和 libz 的使用
libtar 和 libz 的使用 用c代码生成 tar.gz 文件 实现的功能和 tar -zcf 命令一样 大概流程为 1.先用libtar相关函数对某个目录生成tar文件 2.然后对tar文件 ...
- OLEDB 简单数据查找定位和错误处理
在数据库查询中,我们主要使用的SQL语句,但是之前也说过,SQL语句需要经历解释执行的步骤,这样就会拖慢程序的运行速度,针对一些具体的简单查询,比如根据用户ID从用户表中查询用户具体信息,像这样的简单 ...
- Scrapy框架之代理和cookie
Cookie 是在 HTTP 协议下,服务器或脚本可以维护客户工作站上信息的一种方式.Cookie 是由 Web 服务器保存在用户浏览器(客户端)上的小文本文件,它可以包含有关用户的信息.无论何时用户 ...
- C++基础--结构体声名
struct是一种数据结构,当需要存储的相关数据为一个集合时,struct是很好的选择;例如,当存储student,学生的学号, 名字,年龄,身高,就构成了一个集合,用stuct声名为: typede ...
- 01_Quartz基础结构
[各种任务调度的使用场景] 论坛每天凌晨统计论坛用户的积分排名. 论坛每半个小时生成精华文章. 每隔30分钟对锁定过期的用户解锁. 每月1号统计上个月各部门的业务数据. [Quartz 简介] Qua ...
- 20_AOP_Advice增强1(前置、后置、环绕)
[增强的类型] 1.前置增强:org.springframework.aop.BeforeAdvice. 由于Spring只支持方法级别的增强,所以MethodBeforeAdvice是目前可用的前置 ...
- Latex 中cite的使用
(一).设置上标显示的命令 可以在引言区增加类似如下的重定义命令: \newcommand{\upcitep}[1]{\textsuperscript{\textsuperscript{\cite ...
- 文件读取方法(FileHelpers) z
using System; using System.Collections.Generic; using System.Linq; using System.Text; using FileHelp ...
- Linux获取系统当前时间(精确到毫秒)
#include <stdio.h> #include <time.h> #include <sys/time.h> void sysLocalTime() { t ...
- win8中 用office 提示值不在预期的范围内
原文:http://bbs.kafan.cn/thread-1401951-1-1.htmlhttp://bbs.kafan.cn/thread-1401951-1-1.html 错误如下: 名称: ...