定义：reduce()方法对数组中的每个元素执行你提供的reducer函数（按升序排列），并将其结果聚合成一个单一的返回值.reduce()和forEach()、map()、filter()一样，也会遍历数组中的每一项，但是reduce()可以结合上一个遍历的数组项和当前遍历的项的结果进行计算。语法：array.reduce(function(prev,cur,index,array){...},init)回调函数中的参数：prev必需。表示调用回调时的返回值，或者初始值init。当前必需。指示当前元素。索引是可选的。指示当前元素的索引。array表示原始数组。初始化可选。初始值，作为回调函数第一次调用的第一个参数。常用参数：prev和cur注意：回调函数第一次执行时，prev和cur的取值有两种情况：如果调用reduce()时提供了初始值init，则prev取的是init值，cur取数组中的值，索引从0开始；如果不提供初始值init，则prev取数组中的第一个值，cur取数组中的第二个值，此时索引从1开始。示例：1.没有传递初始值initconstarr=[1,3,5,7]arr.reduce(function(prev,cur,index,arr){console.log(prev,cur,index)returnprev+cur})每次调用的参数和返回值如下：callbackprevcurindex数组返回值第1次131[1,3,5,7]4第2次452[1,3,5,7]9第3次973[1,3,5,7]16因为没有传入初始值，索引从1开始，调用了3次回调。一开始prev的值为数组的第一项，1，cur的值为3，相加后返回值4作为下一轮回调的prev值，然后继续下一轮回调，直到完成并返回。2.当传递初始值constarr=[1,3,5,7]arr.reduce(function(prev,cur,index,arr){console.log(prev,cur,index)returnprev+cur},10）每次调用的参数和返回值如下：callbackprevcurindex数组返回值第1次1010[1,3,5,7]11第2次1131[1,3,5,7]14第3次1452[1,3,5,7]19th4th1973[1,3,5,7]263.数组重复数据删除constarr=['ab','v','d','ab','h','e','dc','e','e','f']constnewArr=arr.reduce(function(prev,cur){!prev.includes(cur)&&prev.push(cur)returnprev},[])console.log(newArr)//["ab","v","d","h","e","dc","f"]~~~~执行步骤为如下：初始化一个空数组第一次调用时，prev为初始值，为空数组，cur为数组第一项arr[1]，然后检查cur是否已经存在于prev中，并且item不存在则添加到prev，prev返回next回调。第二次回调时，prev为第一次的返回值，cur为数组中的第二项arr[2]，然后检查prev中cur是否已经存在，如果不存在，则添加item到prev，prev返回进入next回调......最后返回prev的数组4.使用reduce对数组中的Object对象进行分组合并//从后台获取一个对象数组，根据对象的类型分组合并成树树展示数据constdataArr=[{type:'governancelayer',name:'hive_82',reserve:'2',id:1},{type:'Original数据层',name:'qwe',reserve:'1',id:2},{type:'postsourcelayer',name:'mysql_exchangis',reserve:'3',id:3},{type:'治理layer',name:'links_188',reserve:'1',id:4},{type:'postsourcelayer',name:'mysql_ces',reserve:'2',id:5}]consttreeData=dataArr.reduce((cur,next)=>{constobj=cur.find(curItem=>curItem.label===next.type)if(obj){if(obj.children.indexOf(next.id)===-1){//去重处理obj.children.push({...next,label:next.name})}}else{constnewObj={label:next.type,children:[{...next,label:next.name}]}cur.push(newObj)}returncur},[])console.log(treeData)合并后打印的结果如下：[{label:'GovernanceLayer',children:[{type:'GovernanceLayer',name:'hive_82',reserve:'2',id:1,label:'hive_82'},{type:'GovernanceLayer',name:'links_188',reserve:'1',id:4,label:'links_188'}]},{label:'原始数据层',children:[{type:'原始数据层',name:'qwe',reserve:'1',id:2,label:'qwe'}]},{label:'sourcelayer',children:[{type:'sourcelayer',name:'mysql_exchangis',reserve:'3',id:3,标签：'mysql_exchangis'},{type:'governancelayer',name:'mysql_ces',reserve:'2',id:5,label:'mysql_ces'}]}]5.使用reduce处理菜单后端的返回菜单结构如下，按照方法一：constdataArr=[{id:'18',name:'重置密码',parentId:'30',parentName:'用户管理'},{id:'13',name:'AuditLog',parentId:'29',parentName:'SystemManagement'},{id:'29',name:'SystemManagement',parentId:'0',parentName:null},{id:'14',name:'修改',parentId:'33',parentName:'部门管理'},{id:'2',name:'用户列表',parentId:'30',parentName:'用户管理'},{id:'30',name:'用户管理',parentId:'29',parentName:'系统法力gement'},{id:'33',name:'部门管理',parentId:'0',parentName:null},{id:'37',name:'添加用户',parentId:'30',parentName:'用户管理'},{id:'6',name:'添加',parentId:'33',parentName:'部门管理'},{id:'7',name:'Delete',parentId:'33',parentName:'部门管理'}]//创建菜单id的映射关系constidMapping=dataArr.reduce((prev,next,i)=>{prev[next.id]=ireturnprev},{})consttreeData=[]dataArr.map(el=>{//一级菜单if(el.parentId==='0'){treeData.push(el)return}//通过映射找到父元素constparentEl=dataArr[idMapping[el.parentId]]//将当前元素添加到父元素的`children`数组中parentEl.children=[...(parentEl.children||[]),el]})console.log(treeData)方法二：//根据parentId创建映射关系constresult=dataArr.reduce((prev,next)=>{prev[next.parentId]?prev[next.parentId].push(next):prev[next.parentId]=[next];returnprev;},{});Object.keys(result).map(key=>{result[key].map((item,i)=>{result[item.id]?item.children=result[item.id]:''});})this.treeData=result[0]console.log(treeData)也是递归的方法实现，具体就不赘述了，最终生成的数据结构如下图所示：
