最近学习react 高阶组件整得我有点难受，一度怀疑自己的智商，虽然知道高阶组件和高阶函数其实是一类东西，但是就是带入不了，所以还是静下心来，好好撸一下高阶函数，凡事还是不能操之过急，太着急的结果往往不如人意。
开始reduce之前，附上今天看到的一段代码
1 2 3 4 5 6 7 8 9 10 11 let arr = [1,2,3]; arr.reduce((pre,cur)=>{ pre.then(()=>{ return new Promise(resolve=>{ setTimeout(() => { resolve(console.log(cur)) }, 1000); }) }) return pre; },Promise.resolve())
猜猜这段代码实现了啥，刚看到的时候给我给整蒙了，不好意思，奈何道行太浅，我看不懂~~~~
所以决定突破高阶组件就从这个reduce函数开始吧，以前真不怎么去用reduce，一直理解成累加器，今天才知道大错特错，准确点来说，应该是一个累计器，自我感觉这词也不是很准确。
reduce介绍 首先reduce是一个高阶函数，它的参数可以是两个参数，第一个参数是函数，第二个参数是初始值，这个初始值很重要，待会再说。先说下第一个参数函数，这个参数函数呢它自己也带有四个参数（pre,value,index, arr），reduce会对arr中的每一个值调用这个参数函数。现在说下reduce的第二个参数,它是函数参数pre的初始值，如果参数函数有返回值，就可以利用reduce的第二个参数去处理这个返回值，具体怎么处理后面细细道来。
现在先来看一段代码
1 2 3 4 5 let arr = [1,2,3]; arr.reduce((pre,current)=>{ console.log(cur); },9) //输出：1，2，3
可以看到这段代码reduce的参数函数里面并没有返回值，所以不管reduce的第二个参数是什么,它只是对cur值每个current值进行了console.log处理。
这个效果是不是和forEach的功能一摸一样，我们现在用它来实现forEach功能
实现forEach 1 2 3 4 5 6 7 8 9 10 11 12 const arr = [1, 2, 3]; function forEach(arr,callback){ arr.reduce((pre, current, index,array)=>{ //直接执行callback,这个回调函数在forEach执行的时候直接作为参数写进去 //这也能解释为什么forEach没有返回值 callback(current, index,array) },0) } forEach(arr, (value, index, array)=>{ console.log(value); })
实现map 1 2 3 4 5 6 7 8 9 10 11 12 13 const arr = [1, 2, 3]; function map(arr,callback){ return arr.reduce((pre, current, index,array)=>{ let result= callback(current, index,array) pre.push(result) return pre; },[]) } let newArr =map(arr, (value, index, array)=>{ return value*10; }) console.log(newArr);//[10,20,30]
这里可以看出map和forEach的区别，map具有返回值，而foreEach没有返回值，所以forEach更适合对数据的一次性处理，而map则适合于需要对返回值做二次处理的场景。（其实我觉得如果抛开返回值只是对数组数据处理一下，这两个没啥区别，直接用，纠结个啥）
实现filter 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const arr = [1, 2, 3]; function filter(arr,callback){ //这里不要忘记下面要将整个结果返回回去，因为filter是一个函数，要有返回值， //下面返回的pre是reduce函数处理的结果 return arr.reduce((pre, current, index,array)=>{ //这里result就是每次callback执行后的返回值，为true或false let result= callback(current, index,array) if(result){ pre.push(current) } return pre; },[]) } let newArr =filter(arr, (value, index, array)=>{ return value>1; }) console.log(newArr);
上面的代码中我们给pre的初始值是一个空数组，经过判断回调函数的返回值，将arr中大于1的值放到pre中。
实现some 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const arr = [1, 2, 3]; function some(arr,callback){ return arr.reduce((pre, current, index,array)=>{ let result= callback(current, index,array) if(result){ pre=result; } return pre; },false) } let newArr =some(arr, (value, index, array)=>{ return value>2; }) console.log(newArr);
some函数是数组里面有一个值符合回调函数的条件就返回true,将pre的初始值设置为false可以保证当数组里面所有的值都不符合条件的时候返回false.
实现every 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const arr = [1, 2, 3]; function every(arr,callback){ let flag=true; return arr.reduce((pre, current, index,array)=>{ let result= callback(current, index,array) if(!result){ flag=false; } return flag; },) } let newArr =every(arr, (value, index, array)=>{ return value>0; }) console.log(newArr);
every的实现其实不用pre的值，但需要一个flag来标记。遍历数组里面的值，如果有一个不符合直接返回false。
reduce常见的应用场景 求和 1 2 3 4 5 6 7 8 const subjectSummary = [ {id: 1, subject: '语文', score: 86}, {id: 2, subject: '数学', score: 93}, {id: 2, subject: '英语', score: 95}, ]; const scoreSum = subjectSummary.reduce((pre, current) => { return pre + current.score; }, 0);
数组去重 1 2 3 4 5 6 7 const arr = [1, 2, 3, 2, 3, 1, 8, 5]; const newArr = arr.reduce((pre, current) => { if (!pre.includes(current)) { pre.push(current); } return pre; }, []);
统计字符串出现次数 1 2 3 4 5 6 7 8 9 const str = 'aabdddeffghhhhyyy'; const countMapper = str1.split('').reduce((pre, current) => { if (pre.hasOwnProperty(current)) { pre[current] += 1; } else { pre[current] = 1; } return pre; }, {});
分组 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const menuGroup = [ {id: 1, name: '用户中心',type: 1}, {id: 2, name: '设置', type: 2}, {id: 3, name: '消息中心', type: 2}, {id: 4, name: '我的', type: 1}, ]; const menuMap = menuGroup.reduce((pre, current) => { if (current.type === 1) { pre.menuList.push(current); } if (current.type === 2) { pre.subMenuList.push(current); } return pre; }, {menuList: [], subMenuList: []});
综合这几个例子看下来，我感觉pre更像是一个处理器容器。pre的初始值和pre调用的函数决定了pre将如何处理参数函数中的值。
最后，我们来分析一下刚开始那段让人头疼代码
1 2 3 4 5 6 7 8 9 10 11 let arr = [1,2,3]; arr.reduce((pre,cur)=>{ pre.then(()=>{ return new Promise(resolve=>{ setTimeout(() => { resolve(console.log(cur)) }, 1000); }) }) return pre; },Promise.resolve())
这段代码实现的是将1、2、3每隔一秒输出。
pre的初始值是一个Promise.resolve(),同过调用then来处理pre的resolve状态，而这个then（参数也是一个函数）它将cur的值打印出来并且返回一个promise,且状态为resolve(),那么在下一次执行参数函数的时候，这个新返回的promise又会再一次调用then………. ,有点一直调用then的意味，then就是对返回的新Promise做处理。
