当前位置: 首页 > 科技观察

JavaScript中array.reduce()数组方法的四个用法实例_0

时间:2023-03-12 05:53:51 科技观察

今天就为大家详细介绍一下这个方法吧,希望对大家有所帮助。这是reduce的基本用法:vararr=[1,2,3];functionreducer(parmar1,parmar2){}arr.reduce(reducer)reduce是数组原型对象上的一个方法,可以帮助我们对数组进行操作。它以另一个函数作为参数,可以称为reducer。减速器有两个参数。第一个参数param1是上次reducer运行的结果。如果这是第一次运行reducer,则param1的默认值是数组第一个元素的值。reduce方法迭代数组中的每个元素,就像在for循环中一样。并将当前值放入循环中作为参数2。遍历数组后,reduce会返回上一个reducer计算出的结果。让我们看一个详细的例子。vararr=['a','b','c','d','e'];函数添加(x,y){返回x+y;}arr.reduce(add)接下来,我们来探究上面的代码是如何执行的。在此代码中,reducer是add。首先,因为我们是第一次执行add,所以数组中的第一个元素'a'将作为add的第一个参数,然后循环将从数组的第二个元素'b'开始。这次,'b'是要添加的第二个参数。第一次计算后,我们得到结果“ab”。这个结果会被缓存起来,作为下次加法计算的param1。同时,数组中的第三个参数'c'将作为add的param2。同样,reduce将继续遍历数组中的元素,运行'abc'和'd'作为要添加的参数。最后,遍历完数组的最后一个元素后,返回计算结果。现在我们有了结果:'abcde'。所以,我们可以看出reduce也是一种遍历数组的方式!它依次取数组中每个元素的值,执行reducer函数。但是我们可以看到上面的循环并没有那种和谐的美感。因为我们取数组的第一个元素,也就是'a'作为初始的param1,然后循环从数组的第二个元素中得到param2。其实我们可以将reduce中的第二个参数指定为reducer函数的param1的初始值,这样param2就会从数组的第一个元素开始循环获取。代码如下:vararr=['a','b','c','d','e'];functionadd(x,y){returnx+y;}arr.reduce(add,'s')这一次,我们在第一次调用reducer时将's'作为param1传递,然后依次遍历数组从第一个元素。所以我们可以使用这个语法来重写我们的第一个代码片段。vararr=['a','b','c','d','e'];函数添加(x,y){返回x+y;}arr.reduce(add,'')接下来,我们将进入实际的编程章节,体验reduce的强大功能。1.累加与累加如果我们想得到一个数组中所有元素的和,你会怎么做呢?通常,您可能会这样写:functionaccumulation(arr){letsum=0;for(leti=0;ix+y,0);}一行代码搞定!当然,累积乘法和累积是完全一样的:functionmultiplication(arr){returnarr.reduce((x,y)=>x*y,1);}很多时候,我们需要加一个Weight,可以更能体现reduce的优雅。constscores=[{score:90,subject:"HTML",weight:0.2},{score:95,subject:"CSS",weight:0.3},{score:85,subject:"JavaScript",权重:0.5}];constresult=scores.reduce((x,y)=>x+y.score*y.weight,0);//892.获取一个数组的最大值和最小值如果想获取一个数组的最大值和最小值可以这样写:functionmax(arr){letmax=arr[0];for(leteleofarr){if(ele>max){max=ele;}}returnmax;}??这和之前一样,如果我们使用reduce,一行代码就可以搞定。让arr=[3.24,2.78,999];到。reduce((x,y)=>Math.max(x,y));到。减少((x,y)=>Math.min(x,y));3。计算数组中元素出现的频率我们经常需要统计数组中每个元素出现的次数。reduce方法可以帮助我们实现这一点。functioncountFrequency(arr){returnarr.reduce(function(result,ele){//判断这个元素之前是否被统计过if(result.get(ele)!=undefined){/***如果这个元素已经被统计过之前统计过,*将其出现的频率增加1*/result.set(ele,result.get(ele)+1)}else{/***如果之前没有统计过这个元素,*设置出现的频率itsoccurrenceto1*/result.set(ele,1);}returnresult;},newMap());}注意我们使用map对象而不是对象来存储统计频率,因为array可能是对象类型,对象的key只能是字符串或者符号类型。下面举两个例子:同样,如果要统计字符串中每个字符的出现频率,可以先将字符串转成字符数组,然后再按照上面的方法进行。让str='helloworld';str.split('').reduce((result,currentChar)=>{result[currentChar]?result[currentChar]++:result[currentChar]=1;returnresult;},{})因为字符类型可以是用作对象的键,我们这里不使用Map。4.多个数组的展平函数Flat(arr=[]){returnarr.reduce((t,v)=>t.concat(Array.isArray(v)?Flat(v):v),[])}通过reduce依次访问数组中的每个元素。如果发现元素还是数组,就递归调用flat方法。综上所述,以上就是今天给大家分享的arrayreduce的4种用法,希望对大家有所帮助。