欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

重新学习在 JS 中使用 Reduce 方法

最编程 2024-03-15 20:14:27
...

今天在上看了reduce方法的使用以及别的程序员总结的reduce方法注意事项,总觉得有些地方还是很难让初学者理解。 我在这里为了自己和更多的初学者能真正理解,将这个方法用我自己的大白话总结一遍,希望对搞不清楚reduce()的同学有所帮助。 首先,reduce是数组的一个方法,也就是说最基本的语法是arr.reduce(function(prev, cur),initialValue),这里的prev和cur都是reduce()方法中function这个匿名函数的的固有参数, 而function这里被叫做迭代器(累加器)函数,上是这么解释的: reduce() 方法接收一个函数作为累加器,累加器的意思我们后面再说,先看prev和cur: prev---必需。初始值, 或者计算结束后的返回值,该网站把这里的prev写作total,大家适应一下,其实是一个东西。 这里我来举个例子说明,因为至少我一眼看上去,完全不懂这说的是啥, 比如一个数组arr=[5,6,7,1,2], 如果initialValue(翻译成中文就是初始值)不写的话, prev就是arr中的5(arr中的第一个值),如果initialValue写了,那么prev的值就是initialValue。 然后来看cur这个参数,上是这么解释的:必需。当前元素,也就是说这个参数cur和prev都是必传的参数, 但是当前元素是什么?我怎么知道数组中哪一个是当前元素?所以理解起来就很费劲, 这里我也来做一下解释:第一种情况,在没有写initialValue的情况下,prev就是arr中的5,而cur就是指做每一次运算的时候 除了5以外的其他元素。第二种情况,在给了initialValue的情况下,prev=initialValue,这里的意思是initialValue赋值给了prev. 而cur指的是每一次运算时数组arr中的所有元素,每一次运算可以看做是一次迭代。看到这里别急,接下来具体示例分析:

这张图的情况就是没有initialValue,如图所示,这是一个reduce()方法的综合示例,我把prev和cur都分别打印出来,方便理解。 prev的第一个值就是3,接着reduce()方法会执行prev + cur这个运算,第一次运算的cur就是8,所以prev+cur=11,而11被作为prev的下一次值保存起来,所以第二个(次)的prev=11,而第二次运算的cur就是56,因为8已经被第一次运算使用了,迭代后的cur就是56,说到这里不得不提一句,其实迭代的意思可以勉强理解为更新,更替。第二次运算的prev+cur就是11+56=67,而67又被作为第三次的prev保存起来,第三次运算的cur就是0,所以第三次运算的prev+cur就是67+0=67,就这样一次次的累加,最后得到的prev就是return prev+cur的结果203

arr1还是上图的那个arr1 = [3,8,56,0,12,1,100,3,8,12] 此图情况就是添加了initialValue=20,那么根据我们最开始讲的reduce()语法规则,prev=initialValue=20, 所以第一次打印出的prev就是20,而第一次运算时的cur就是arr1中的第一个元素3,第一次prev+cur=23,23作为下一次运算的prev被保存起来,由于3作为cur已经被使用过,迭代后的第二次的cur就是8,第二次运算prev+cur就是23+8=31,31作为第三次运算的prev被保存起来,第三次运算的cur就是56(8已被使用),所以第三次prev+cur就是31+56=87,依次往复,得出后面的结果,后面的过程与上一张图一样,这里不再赘述。

上述为reduce()作为累加器,可以应用于数组求和。接下来为大家提供reduce()应用在数组去重的使用:

更加优雅的写法如下:

综上所述,reduce()方法的理解与使用到此结束,希望大家学得开心!有问题或者发觉哪里写得不合适的话, 欢迎交流,批评指正!

推荐阅读