前端开发者必须知道的关于《[.reduce》的十个进阶技巧分享给大家10个关于它的进阶技巧，加油！1.使用“reduce”作为加法器和累加器，我们可以轻松实现加法的功能或累加多个数字。//adderconstsum=(...nums)=>returnnums.reduce((sum,num)=>};console.log(sum(1,2,3,4,10));//20//accumulatorconstaccumulator=(...nums)=>returnnums.reduce((acc,num)=>};console.log(accumulator(1,2,3));//62.计算一个数组的最大值和最小值有多少种方法可以得到一个数组的最大值或最小值？1).使用Math.max和Math.min我们不得不承认使用MathAPI是最简单的方法。constarray=[-1,10,6,5];constmax=Math.max(...array);//10constmin=Math.min(...array);//-12).Usingreduction是的，只有一个一行代码，你可以用Math的API实现同样的效果。constarray=[-1,10,6,5];constmax=array.reduce((max,num)=>(max>num?max:num));constmin=array.reduce((min,num)=>(minconst[key,value]=it.split("=");查询[键]=decodeURIComponent(值);});返回查询；}；2).使用reduceReduce其实可以做到这一点，而且看起来更简单。constparseQuery=()constsearch=window.location.search;返回搜索.replace(/(^\?)|(&$)/g,"").split("&")(query,it)=>const[key,value]=it.split("=");查询[键]=decodeURIComponent(值);返回查询；},{});};它是如何工作的？/urlhttps://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home//1.首先获取搜索参数constsearch=window.location.search;//？name=fatfish&age=100//2.去掉开头的“？”orending"&".search.replace(/(^\?)|(&$)/g,"");//?name=fatfish&age=100=>name=fatfish&age=100//3.使用reduce来collectparameters//...4.反序列化搜索参数当我们想跳转到某个链接并为其添加一些搜索参数时，手动拼接的方式不是很方便。如果有很多参数要串联，那将是一场灾难。constsearchObj={name:"fatfish",age:100,//...};constlink=`https://medium.com/?name=${searchObj.name}&age=${searchObj.age}`;//https://medium.com/?name=fatfish&age=100还好，"reduce”可以帮助我们轻松解决这个问题。conststringifySearch=(search={})=>returnObject.entries(search).reduce((t,v)=>`${t}${v[0]}=${encodeURIComponent(v[1])}&`,Object.keys(search).length?"?":"").replace(/&$/,"");};constsearch=stringifySearch({name:"fatfish",age:100,});constlink=`https://medium.com/${search}`;console.log(链接);//https://medium.com/?name=fatfish&age=1005。嵌套数组你知道如何展平多层嵌套数组吗？constarray=[1,[2,[3,[4,[5]]]]];//预期输出[1,2,3,4,5]constflatArray=array.平坦（无穷大）；//[1,2,3,4,5]"flat"是一个非常强大的API。而使用reduce可以实现和flatconstflat=(array)=>{returnarray.reduce((acc,it)=>acc.concat(Array.isArray(it)?flat(it):it)一样的功能，[]);};constarray=[1,[2,[3,[4,[5]]]]];constflatArray=flat(数组);//[1,2,3,4,5]6、模拟平面特征的功能虽然我们已经实现了对深度嵌套数组进行展平的功能，但是如何才能完全实现展平的功能呢？//默认展开一层Array.prototype.flat2=function(n=1){constlen=this.lengthletcount=0letcurrent=thisif(!len||n===0){returncurrent}//确认当前是否有数组项consthasArray=()current.some((it)=>Array.isArray(it))//每次循环后展开一层while(count++result=result.concat(it)returnresult},[])}returncurrent}constarray=[1,[2,[3,[4,[5]]]]]//展开一层console.log(array.flat())//[1,2,[3,[4,[5]]]]console.log(array.flat2())//[1,2,[3,[4,[5]]]]//例如pandallconsole.log(array.flat(Infinity))console.log(array.flat2(Infinity))很好，我们做到了7。保持数组唯一reduce保持数组唯一也很容易。constarray=[1,2,1,2,-1,10,11]constuniqueArray1=[...newSet(array)]constuniqueArray2=数组。reduce((acc,it)=>acc.includes(it)?acc:[...acc,it],[])8.统计数组成员个数如何计算数组中每个成员的个数？为什么使用地图而不是对象？constcount=(array)=>返回数组。reduce((acc,it)=>(acc.set(it,(acc.get(it)||0)+1),acc),newMap())}constarray=[1,2,1,2,-1,0,'0',10,'10']console.log(count(array))9。获取一个对象的多个属性现在，让我们考虑一个您在工作中可能遇到的场景。//有一个对象有很多属性constobj={a:1,b:2,c:3,d:4,e:5//...}//我们只想得到它上面的一些属性createanewobjectconstnewObj={a:obj.a,b:obj.b,c:obj.c,d:obj.d//...}//是不是觉得这样效率太低了？使用reduce来解决它。constgetObjectKeys=(obj={},keys=[])=>returnObject.keys(obj).reduce((acc,key)=>}constobj={a:1,b:2,c:3,d:4,e:5//...}constnewObj=getObjectKeys(obj,['a','b','c','d'])console.log(newObj)10.反转字符串constreverseString=(string)=>returnstring.split("").reduceRight((acc,s)=>}conststring='fatfish'console.log(reverseString(string))//hsiftaf写在最后关于reduce的10个知识和技巧分享给大家，希望大家能从中学到新的东西，希望对大家有用，如果觉得对我有帮助，请点赞关注我，分享这篇文章分享给各位开发者朋友最后，感谢阅读，祝编程愉快。
