共计 3509 个字符，预计需要花费 9 分钟才能阅读完成。
引言
有一段时间没更新了，最近挺忙的（懒病犯了）。今天偶然想到之前去去哪儿面试的时候，面试管问我的 redece 题目，当时被血虐的场景。干脆今天我们就来聊一下 redece 方法以及相关的应用
reduce 方法 j 介绍
reduce(callback,initval)
其中 callback 函数接收 4 个参数:
- Accumulator (acc) (累计器)
- Current Value (cur) (当前值)
- Current Index (idx) (当前索引)
- Source Array (src) (源数组)
如果 initval 传了，则索引从 0 开始，acc 是 initval，cur 是 arr[0]
如果 initval 没有传，则索引从 1 开始，acc 是 arr[0]，cur 是 arr[1]
reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。
例 1: 数组累加
const arr = [1,2,3,4,5];
console.log(arr.reduce((pre,cur)=>{return pre+cur}))
//1+2+3+4+5 15
例 2: 计算总价
var product = [
{
name: '苹果',
count: 2,
price: 5
},
{
name: '桃子',
count: 5,
price: 2
},
{
name: '西瓜',
count: 1,
price: 10
}
];
var total = product.reduce((pre,cur)=>{return pre+cur.count*cur.price},0)
// 30自己实现一个 reduce 方法
知道了 reduce 的两种模式, 利用递归实现它并不复杂
// callback 参数有 4 个。pre,cur,index,arr
Array.prototype.myReduce = function(callback,prev){for(let i = 0 ; i < this.length; i++){
// 判断有没有第二个参数
if(!prev){// 没有的话复杂点，第一次拿的是两个元素 arr[0],arr[1]，注意 index 的变化
prev = callback(this[i],this[i+1],i+1,this); // 这里的指针是 i + 1 都是对的，但是下一次循环的时候 i 必须按是 3 所以需要 +1
i++; // 第一次循环了两个变量，下次应该从第三个执行，所以向后移动
}else{// 有的话最简单，直接就是从 arr[0]开始递归
prev = callback(prev,this[i],i,this);
}
}
return prev;
}
应用
好不容易学了 reduce, 只计算个水果价格，是不是有点太小才大用了？
我们看一看面试中能直接大幅度提升逼格的题目
1. 统计字符串中出现的字母个数
相信大家都应该知道怎么用 for-in 怎么遍历数组（字符串 split 出来的）并借助一个空对象来计数
但是面试写十几行代码还是比较 low 而且容易出错的
我们看一个逼格高一点的实现
var arrString = 'abcdaabc';
arrString.split('').reduce((res, cur)=>{res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})
2. 数组扁平化
面试官让实现一个原生的 flat 方法
// arr.flat(depth) 原生的语法 depth 指定要提取嵌套数组的结构深度, 默认是 1 传 0 不扁平话，传 Infinity 则展开任意深度的嵌套数组
我们先不考虑 depth 怎么用递归实现一版展开任意深度的 flat 方法
Array.prototype.myFlat = function(){return this.reduce((pre,cur)=>{if(Array.isArray(cur)){ // 是个数组再递归展开一层并连接
pre = [...pre,...cur.myFlat()] // 一定要有一个去扁平化的操作
}else{ // 不是数组就直接加入结果数组中
pre.push(cur)
}
return pre // 注意返回的是一个数组
},[])
}
var arr = [1,2,[3,[3]],4].myFlat()
console.log(arr)
再加上 depth 进行递归
Array.prototype.myflat = function(depth=1) { // 实际上边界条件还是有一点问题
return this.reduce((pre, cur) => {if (Array.isArray(cur)) {if (depth > 0) {
depth--
pre = [...pre,...cur.myflat(depth)]
} else { // depth = 0 结束递归
pre.push(cur)
}
} else {pre.push(cur)
}
return pre
}, [])
}
console.log([1, 2, [3,[5,[1]]], 4].myflat()) //[1, 2, 3, [ 5, [ 1] ], 4 ]
console.log([1, 2, [3,[5,[1]]], 4].myflat(0)) //[1, 2, [ 3, [ 5, [ 1] ] ], 4 ]
console.log([1, 2, [3,[5,[1]]], 4].myflat(2)) //[1, 2, 3, 5, [ 1], 4 ]
console.log([1, 2, [3,[5,[1]]], 4].myflat(Infinity)) //[1, 2, 3, 5, 1, 4]
3. 实现 compose 函数
最后简单介绍一下 compose 方法以及怎么利用 reduce 一行代码实现。这可是中间件的原理，大家仔细听！
var compose = function(f,g) { //compose 极简写法，仅做示例
return function(x){return f(g(x))
}
}
f 和 g 都是函数，x 是在他们之间通过 ’ 管道 ’ 传输的值。
compose 看起来就像是饲养函数，你就是饲养员。你可以选择多个有特点的函数，让它们结合，产生一个崭新的函数。
有个这个函数我们能干嘛呢
我们看一个例子：
我们现在想统计两个字符串的总长度 并打印：总长度：xxx
一般的写法就是写一坨
函数式编程告诉我们不要这样做，这么写耦合性太高了，不好维护，我们应该想搭积木一样，拆成若果基础方法，然后在拼接起来。数据从这些方法组成的管道中流淌一遍出来就得到想要的结果了。
好处就是低耦合，可组合（像不像 dota 里面的卡尔,qwe 三个球搭配可以调出 N 多技能）
于是我们这么写
function sum(a,b){return a+b;}
function len(str){return str.length}
function addPrefix(content){return '总长度：'+content;}
console.log(addPrefix(len(sum('x-1','y-2')))) // 看着怪怪的
这么写最后一句话真的很烦人
于是借用 compose 函数我们这么写
const newFn = compose(addPrefix,len,sum)
console.log(newFn('x-1','y-2'))
那个这个 compose 函数的真实写法是啥呢
我给出 3 种，下次有时间再细说
// 利用 reduceRight
function compose(...fns){return function(...args){let lastFn = fns.pop();
return fns.reduceRight((prev,current)=>{//[addPrefix,len,sum]
return current(prev) // 每次当前函数处理得是之前函数处理得结果！！！但是首个不一样，首个就是首个函数得执行结果
},lastFn(...args)) // 先得把参数传入进来
}
}
// 利用 reduce
// 递归规律如下
// a:addPrefix b:len
// a:function(...args){return addPrefix(len(...args))} b:sum
function compose(...fns){return fns.reduce(function(a,b){return function(...args){return a(b(...args))
}
})
}
//reduce 简化版 一行代码搞定 面试装 B 必背
let compose = (...fns)=>fns.reduce((a,b)=>(...args)=>a(b(...args)));总结
今天的汇报就到这了，谢谢大家百忙中抽出时间阅读，相信掌握上面 reduce 个个层次用例，面试这方面一定是满满的逼格。另外本人技术有限，如果哪写的不对，欢迎在评论区留言指出。
