reducer是什么意思？用法、例句，深入理解全能的 Reducer

大家好，今天来为大家分享reducer是什么意思？用法、例句的一些知识点，和深入理解全能的 Reducer的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

1、首先祝愿有伴侣的小伙伴们情人节快乐！

2、其次祝愿没有的小伙伴们早日脱单！

3、有一些小伙伴，对JavaScript的reduce方法还不够理解，我们来看下面两段代码：

4、constnums=[1,2,3];\nletvalue=0;\nfor(leti=0;i<nums.length;i++){\nvalue+=nums[i];\n}\n复制代码\nconstnums=[1,2,3];\nconstvalue=nums.reduce((ac,next)=>ac+next,0);\n

这两段代码在功能上是等价的，都是数组中所有数字的总和，但是它们之间有一些理念差异。让我们先研究一下reducer，因为它们功能强大，而且在编程中很重要。

5、reducer是什么

6、要理解reducer的第一点也是最重要的一点是它永远返回一个值，这个值可以是数字、字符串、数组或对象，但它始终只能是一个。reducer对于很多场景都很适用，但是它们对于将一种逻辑应用到一组值中并最终得到一个单一结果的情况特别适用。

7、另外需要说明：reducer本质上不会改变你的初始值；相反，它们会返回一些其他的东西。

8、constnums=[1,2,3];\nletvalue=0;\nfor(leti=0;i<nums.length;i++){\nvalue+=nums[i];\n}\n

数组nums([1,2,3])，数组中的每个数字的第一个值将被添加到value(0)。我们遍历数组并将其每一项添加到value。

9、让我们尝试一下不同的方法来实现此功能：

10、constnums=[1,2,3];\nconstinitialValue=0;\nconstreducer=function(acc,item){\nreturnacc+item;\n}\nconsttotal=nums.reduce(reducer,initialValue);\n

现在我们有了相同的数组，但这次我们不会改变初始值(即前段代码中的value)。这里，我们有一个仅在开始时使用的初始值。接下来，我们可以创建一个函数，它接受一个累加器(acc)和一个项(item)。累加器是在上一次调用中返回的累积值(或者是initialValue)，是下一个回调的输入值。在这个例子中，你可以把它想象成一个滚下一座山的雪球，当它以每一个吃过的值的大小增长时，它会吃掉它路径中的每个值。

11、我们将使用.reduce()来接收这个函数并从初始值开始。可以使用箭头函数简写：

12、constnums=[1,2,3];\nconstinitialValue=0;\nconstreducer=(acc,item)=>{\nreturnacc+item;\n}\nconsttotal=nums.reduce(reducer,initialValue);\n

进一步缩短代码长度，我们知道箭头函数，在没有{}时，默认return;

13、constnums=[1,2,3];\nconstinitialValue=0;\nconstreducer=(acc,item)=>acc+item;\nconsttotal=nums.reduce(reducer,initialValue);\n

现在我们可以在调用它的地方应用这个函数，也可以直接设置初始值，如下:

14、constnums=[1,2,3];\nconsttotal=nums.reduce((acc,item)=>acc+item,0);\n复制代码\n

累加器可能是一个令人生畏的术语，所以当我们在回调调用上应用逻辑时，你可以将它想象成数组的当前状态。

15、如果不清楚发生了什么，让我们记录下每次迭代的情况。reduce使用的回调函数将针对数组中的每个项运行。下面的演示将有助于更清楚地说明这一点。我使用了一个不同的数组（[1，3，6]），因为数字与索引相同可能会令人困惑。

16、constnums=[1,3,6];\nconstreducer4=function(acc,item){\nconsole.log(`Acc:${acc},Item:${item},Returnvalue:${acc+item}`);\nreturnacc+item;\n}\nconsttotal4=nums.reduce(reducer4,0);\n

当我们执行这段代码时，我们会在控制台看到以下输出:

17、Acc:0,Item:1,Returnvalue:1\nAcc:1,Item:3,Returnvalue:4\nAcc:4,Item:6,Returnvalue:10\n

下面是一个更直观的分解：

18、既然我们已经掌握了这一点，那么让我们来看看reducer可以做的一些常见和有用的事情。

19、假设您有一个数字数组，并且希望返回一个报告这些数字在数组中出现的次数的对象。请注意，这同样适用于字符串。

20、constnums=[3,5,6,82,1,4,3,5,82];\nconstresult=nums.reduce((tally,amt)=>{\ntally[amt]?tally[amt]++:tally[amt]=1;\nreturntally;\n},{});\nconsole.log(result);\n//{'1':1,'3':2,'4':1,'5':2,'6':1,'82':2}\n

最初，我们有一个数组和将要放入其中的对象。在reducer中，我们首先判断这个item是否存在于累加器中，如果是存在，加1。如果不存在，添加这一项并设置为1。最后，请返回每一项出现的次数。然后，我们运行reduce函数，同时传递reducer和初始值。

21、获取一个数组并将其转换为显示某些条件的对象

22、假设我们有一个数组，我们希望基于一组条件创建一个对象。reduce在这里非常适用！现在，我们希望从数组中任意一个数字项创建一个对象，并同时显示该数字的奇数和偶数版本。

23、constnums=[3,5,6,82,1,4,3,5,82];\n//we'regoingtomakeanobjectfromanevenandodd\n//versionofeachinstanceofanumber\nconstresult=nums.reduce((acc,item)=>{\nacc[item]={\nodd:item%2?item:item-1,\neven:item%2?item+1:item\n}\nreturnacc;\n},{});\nconsole.log(result);\n

控制台输出结果:

24、\n{'1':{odd:1,even:2},\n'3':{odd:3,even:4},\n'4':{odd:3,even:4},\n'5':{odd:5,even:6},\n'6':{odd:5,even:6},\n'82':{odd:81,even:82}\n}\n

当我们遍历数组中的每一项时，我们为偶数和奇数创建一个属性，并且基于一个带模数运算符的内联条件，我们要么存储该数字，要么将其递增1。模算符非常适合这样做，因为它可以快速检查偶数或奇数——如果它可以被两个整除，它是偶数，如果不是，它是奇数。

25、链接：https://juejin.im/post/5d499b38518825052b0ecc1c

关于reducer是什么意思？用法、例句，深入理解全能的 Reducer的介绍到此结束，希望对大家有所帮助。