今天给大家带来的是上一篇reduce《JavaScript数组reduce()方法详解及千奇百怪的技巧》,我觉得真的不错,出乎意料。一、前言reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始递减,最后计算为一个值。reduce()可以用作函数compose的高阶函数。reduce()方法可以处理事情,for循环,或者forEach方法有时候也可以处理事情,为什么要用reduce()呢?我以前也想过这个问题。如果我找不到原因,我唯一能找到的是:通往成功的道路有很多,但总有一条路是最短的,或者说reduce()更引人注目。2.语法arr.reduce(callback,initialValue)返回最后一个值。reduce依次对数组中的每个元素执行回调函数,不包括数组中被删除或从未赋值的元素。它接受四个参数:初始值(或前一个回调函数的返回值)、当前元素值、当前索引和调用reduce的数组。三、intialValue参数实例分析1、第一个例子:vararr=[1,2,3,4];varsum=arr.reduce(function(prev,cur,index,arr){console.log(prev,cur,index);returnprev+cur;})console.log(arr,sum);打印结果:121332643[1,2,3,4]102,第二个例子vararr=[1,2,3,4];varsum=arr.reduce(function(prev,cur,index,arr){console.log(prev,cur,index);returnprev+cur;},0)//注意这里设置了初始值console.log(arr,总和);printresult:010121332643[1,2,3,4]10本例中index从0开始,第一个prev的值就是我们设置为0的初始值,数组长度为4,reduce函数循环4次。结论:如果没有提供initialValue,reduce将从索引1开始执行回调方法,跳过第一个索引。如果提供了initialValue,它从索引0开始。注意:如果数组为空,使用reduce时会发生什么?vararr=[];varsum=arr.reduce(function(prev,cur,index,arr){console.log(prev,cur,index);returnprev+cur;})//报错,"TypeError:Reduceofemptyarraywithnoinitialvalue"但是如果我们设置初始值,则不会报错,如下:vararr=[];varsum=arr.reduce(function(prev,cur,index,arr){console.log(prev,cur,index);returnprev+cur;},0)控制台。日志(arr,总和);//[]0所以一般来说,提供一个初始值比较安全。四、reduce的简单用法当然最简单的就是我们常用的数组的求和乘法。vararr=[1,2,3,4];varsum=arr.reduce((x,y)=>x+y)varmul=arr.reduce((x,y)=>x*y)console.log(sum);//求和,10console.log(mul);//乘法,245.reduce的高??级用法(1)计算数组中每个元素出现的次数letnames=['Alice','Bob','Tiff','Bruce','Alice'];letnameNum=names.reduce((pre,cur)=>{if(curinpre){pre[cur]++}else{pre[cur]=1}returnpre},{})console.log(nameNum);//{Alice:2,Bob:1,Tiff:1,Bruce:1}(2)数组去重letarr=[1,2,3,4,4,1]letnewArr=arr.reduce((pre,cur)=>{if(!pre.includes(cur)){returnpre.concat(cur)}else{returnpre}},[])console.log(newArr);//[1,2,3,4](3)将二维数组转化为一维letarr=[[0,1],[2,3],[4,5]]letnewArr=arr.reduce((pre,cur)=>{returnpre.concat(cur)},[])console.log(newArr);//[0,1,2,3,4,5](4)将多维数组转换为一维数组dimensionalletarr=[[0,1],[2,3],[4,[5,6,7]]]constnewArr=function(arr){returnarr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])}console.log(newArr(arr));//[0,1,2,3,4,5,6,7](5)object属性sumvarresult=[{subject:'math',score:10},{subject:'chinese',score:20},{subject:'english',score:30}];varsum=result.reduce(function(prev,cur){returncur.score+prev;},0);console.log(sum)//60(6)将[1,3,1,4]转换为数字1314functionaddDigitValue(prev,curr,curIndex,array){varexponent=(array.length-1)-curIndex;vardigitValue=curr*Math.pow(10,exponent);returnprev+digitValue;}vararr6=[1,3,1,4];varresult7=arr6.reduce(addDigitValue,0);console.info('result7',result7);本文转载自微信公众号《松宝写代码》
