摘要:我们在的第二个参数里面初始了回调函数第一个参数的类型和值,将字符串转化为数组,那么迭代的结果将是一个对象,对象的每一项值就是字符串的字母。
因为用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个参数,意思分别为
prev: 第一项的值或者上一次叠加的结果值
cur: 当前会参与叠加的项
index: 当前值的索引
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但是我们的宗旨就是抛弃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) { console.log(prev); 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一下的浏览器中,并不支持该方法 !
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79957.html
摘要:基本概念方法接收一个函数作为累加器,数组中的每个值从左到右开始缩减,最终为一个值。例进阶应用使用方法可以完成多维度的数据叠加。在该函数内部,则执行多维的叠加工作。参考的内建函数数组方法的高级技巧 基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数,不包括...
摘要:我们在的第二个参数里面初始了回调函数第一个参数的类型和值,将字符串转化为数组,那么迭代的结果将是一个对象,对象的每一项值就是字符串的字母。 因为用for循环被老大鄙视之后,这几天都在偷偷摸摸的研究数组的那几个迭代方法。使用下来,感觉确实妙用无穷,仿佛自己的逼格在无形中变得高大了一点点,哈哈,上一篇文章的简单介绍确实有点糙,因此决定重新一些总结文章。 这篇文章就是专门总结reduce方法...
摘要:我们在的第二个参数里面初始了回调函数第一个参数的类型和值,将字符串转化为数组,那么迭代的结果将是一个对象,对象的每一项值就是字符串的字母。 因为用for循环被老大鄙视之后,这几天都在偷偷摸摸的研究数组的那几个迭代方法。使用下来,感觉确实妙用无穷,仿佛自己的逼格在无形中变得高大了一点点,哈哈,上一篇文章的简单介绍确实有点糙,因此决定重新一些总结文章。 这篇文章就是专门总结reduce方法...
本文主要介绍一些JS中用到的小技巧,可以在日常Coding中提升幸福度,将不定期更新~ 1. 类型强制转换 1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法)然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN 32 * 1 // 32 ds * 1 ...
阅读 1963·2021-11-19 09:40
阅读 1902·2021-09-28 09:36
阅读 2191·2021-09-22 10:02
阅读 2681·2019-08-30 14:00
阅读 1910·2019-08-29 15:31
阅读 2855·2019-08-29 15:11
阅读 2860·2019-08-29 13:04
阅读 1050·2019-08-27 10:55