数组reduce方法的高级用法
这是一篇多年前写的博文,今日再读,发现写得还可以,分享给大家
因为用for循环被老大鄙视之后,这几天都在偷偷摸摸的研究数组的那几个迭代方法。
使用下来,感觉确实妙用无穷,仿佛自己的逼格在无形中变得高大了一点点,哈哈,上一篇文章的简单介绍确实有点糙,因此决定重新一些总结文章。这篇文章就是专门总结reduce方法的,这个方法大有可研究的地方,值得大家get它并去动手实践一下。
上一篇文章我认为reduce是一个聚合或者减少方法,它可以将数组中的每一项通过叠加变成一项,但是其实这种说法似乎不太准确。先不管这个,我们来看看例子再说。
从最简单的例子开始。
var arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prevres, cur, index);
return prevres + cur;
})
console.log(arr, sum);
输出结果
1 2 1
3 3 2
6 4 3
10 5 4
[1, 2, 3, 4, 5] 15
回顾一下reduce中回调函数的参数,这个回调函数有4个参数,意思分别为
1.prev: 第一项的值或上一次叠加的结果值2.cur: 当前会参与叠加的项3.index:当前值的索引4.arr: 数组本身
首先我们要弄明白prev与cur这2个参数的区别,刚开始我以为他们是一种类型的,可是后来我发现我理解错了。prev表示每次叠加之后的结果,类型可能与数组中的每一项不同,而cur则表示数组中参与叠加的当前项。在后边我们可以结合实例来理解这个地方。
其次我们看到,上例中其实值遍历了4次,数组有五项。数组中的第一项被当做了prev的初始值,而遍历从第二项开始。
我们看下面一个例子。
某同学的期末成绩如下表示
var result = [
{
subject: 'math',
score: 88
},
{
subject: 'chinese',
score: 95
},
{
subject: 'english',
score: 80
}
];
如何求该同学的总成绩?
很显然,利用for循环可以很简单得出结论
var sum = 0;
for(var i=0; i<result.length; i++) {
sum += result[i].score;
}
但是我们的宗旨就是抛弃for循环,因此使用reduce来搞定这个问题
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
这个时候,我给reduce参数添加了第二个参数。通过打印我发现设置了这个参数之后,reduce遍历便已经从第一项开始了。
这第二个参数就是设置prev的初始类型和初始值,比如为0,就表示prev的初始值为number类型,值为0,因此,reduce的最终结果也会是number类型。
因为第二个参数为累计结果的初始值,因此假设该同学因为违纪被处罚在总成绩上扣10分,只需要将初始值设置为-10即可。
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, -10);
来给这个例子增加一点难度。假如该同学的总成绩中,各科所占的比重不同,分别为50%,30%,20%,我们应该如何求出最终的权重结果呢?
解决方案如下:
var dis = {
math: 0.5,
chinese: 0.3,
english: 0.2
}
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, -10);
var qsum = result.reduce(function(prev, cur) {
return prev + cur.score * dis[cur.subject]
}, 0)
console.log(sum, qsum);
为了计算出权重之后的总值,我们在回调函数内部修改了数组当前项,是使他和权重比例关联袭来,并重新返回一个一样的回调函数,将新修改的当前项传入,就和之前的例子是一样的了。
在segmentfault上看到一个面试题,问如何知道一串字符串中每个字母出现的次数?
可以运用reduce来解决这个问题。
如下代码,我在reduce的第二个参数里面初始了回调函数第一个参数的类型和值,将字符串转化为数组,那么迭代的结果将是一个对象,对象的每一项key值就是字符串的字母。运行感受一下吧。
var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})
由于可以通过第二参数设置叠加结果的类型初始值,因此这个时候reduce就不再仅仅只是做一个加法了,我们可以灵活的运用它来进行各种各样的类型转换,比如将数组按照一定规则转换为对象,也可以将一种形式的数组转换为另一种形式的数组,大家可以动手去尝试一样。
[1, 2].reduce(function(res, cur) {
res.push(cur + 1);
return res;
}, [])
这种特性使得reduce在实际开发中大有可为!但是需要注意点,在ie9一下的浏览器中,并不支持该方法 !
- 二叉树的基本概念和遍历
- Java中MD5加密算法实现方法——附上具体代码
- 新手,Visual Studio 2015 配置Boost库,如何编译和选择,遇到无法打开文件“libboost_thread-vc140-mt-gd-1_63.lib“的解决办法
- Java中处理正则表达式的工具类——总有一个适合你
- 【Spark研究】用Apache Spark进行大数据处理第一部分:入门介绍
- “一切都是消息”--MSF(消息服务框架)入门简介
- 【Spark研究】用Apache Spark进行大数据处理第二部分:Spark SQL
- Android基础总结(2)——活动Activity
- Java实现的IP处理工具类——可用于项目
- 使用SQLServer同义词和SQL邮件,解决发布订阅中订阅库丢失数据的问题
- 一次误报引发的DNS检测方案的思考:DNS隧道检测平民解决方案
- Andriod基础——Adapter类
- ORM查询语言(OQL)简介--高级篇:脱胎换骨
- 用Java实现处理日期的工具类——常用日期处理方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Helm工具安装配置——2.14.3
- 论程序的健壮性——就看Redis
- SAP Spartacus路由参数的默认配置
- 这次用近万字的讲解带你干掉堆!
- Postgresql PL/PGSQL 程序语言系列 1 (存储过程过时了吗,与函数)
- Postgresql 从那个点看要优于 ORACLE SQL SERVER MYSQL
- VBA解析VBAProject 04——run length encoding
- TRTC Android端开发接入学习之实现语音聊天室(九)
- VBA解析VBAProject 03——解析dir流
- VBA解析VBAProject 01——实现的功能
- VBA解析VBAProject 02——解析
- 光怪陆离的世界之Delaunay三角剖分和Voronoi图
- Angular里的routerLink不能按照期望工作的一个问题
- 哈希算法在判定树同构方面的应用(上)
- 为啥会内存泄漏?一个免费的检测工具来了