目录
- compose函数的由来
- compose的实现
- pipe的实现
- Array.prototype.reduce与reduceRight
一、compose函数的由来
compose函数可以将需要嵌套执行的函数平铺，嵌套执行就是一个函数的返回值将作为另一个函数的参数。
我们考虑一个简单的需求：
给定一个输入值x，先给这个值加1，然后结果平方
直接一个计算函数就行：
const calc = x => (x+1) ** 2;
calc(1);// 4
但是根据我们之前讲的函数式编程，我们可以将复杂的几个步骤拆成几个简单的可复用的简单步骤，于是我们拆出了一个加法函数和一个平方函数:
const add = x => x + 1;
const square = x => x ** 2;
// 我们的计算改为两个函数的嵌套计算，add函数的返回值作为square函数的参数
let res = square(add(1));
console.log(res); // 结果还是4
上面的计算方法就是函数的嵌套执行，而我们
compose的作用就是将嵌套执行的方法作为参数平铺，嵌套执行的时候，里面的方法也就是右边的方法最开始执行，然后往左边返回，我们的compose方法也是从右边的参数开始执行，所以我们的目标就很明确了，我们需要一个像这样的compose方法：
// 参数从右往左执行，所以square在前，add在后
let res = compose(square, add)(1);
二、compose的实现
利用
reduceRight实现
const compose = function(){
// 将接收的参数存到一个数组， args == [multiply, add]
const args = [].slice.apply(arguments);
return function(x) {
return args.reduceRight((res, cb) => cb(res), x);
}
};
const add = x => x + 1;
const square = x => x ** 2;
const sub = x => x - 1;
// 我们来验证下这个方法
let calc1 = compose(sub, square, add);
let res = calc1(1);
console.log(res); // 3
1) 执行过程
// cb我当前函数，res我上一个函数的返回值。
// 从传入的参数1开始，那么res的初始值是1。
// cb(1) // add(1)
// 此时res为add(1)的执行结果 2
// cb(2) // 此时cb为 square 调用 square(2)
// 此时res为square(2)的执行结果 4
// cb(2) // 此时cb为 sub 调用 sub(4)
// sub(4)的返回值是3 最终 `args.reduceRight((res, cb) => cb(res), x)`的返回值是3
2) compose函数使用ES6的话会更加简洁：
const compose = (...args) => x => args.reduceRight((res, cb) => cb(res), x);
Redux的中间件就是用compose实现的，webpack中loader的加载顺序也是从右往左，这是因为他也是compose实现的。
三、pipe 的实现
pipe函数跟compose函数的作用是一样的，也是将参数平铺，只不过他的顺序是从左往右。我们来实现下，只需要将reduceRight改成reduce就行了：
const pipe = function(){
let args = [].slice.apply(arguments);
return function(x){
let middleFn = (res,cb) => cb(res)
return args.reduce(middleFn, x);
}
};
const add = x => x + 1;
const square = x => x ** 2;
const sub = x => x - 1;
// 我们来验证下这个方法
let calc1 = pipe(sub, square, add);
let res = calc1(2);
console.log(res); // 2
1) pipe函数使用ES6的话会更加简洁：
const pipe = (...args) => x => args.reduce((res, cb) => cb(res), x);
pipe的实现，首先是取他的参数数组（这是传给这个函数的实参），然后，返回一个函数（返回这个函数是因为调用方式是(函数列表)(数据)这样子），然后，在返回的函数中去依次调用这些函数，并且，把上一个函数的返回值，传递给下一个函数作为参数。
四、Array.prototype.reduce与reduceRight
- 参考前端面试题系列一
数组的reduce方法可以实现一个累加效果，它接收两个参数，第一个是一个累加器方法，第二个是初始化值。累加器接收四个参数，第一个是上次的计算值，第二个是数组的当前值，主要用的就是这两个参数，后面两个参数不常用，他们是当前index和当前迭代的数组：
1)数组从左到右铺平
const arr = [[1, 2], [3, [3.1,3.2]], [5, 6]];
// prevRes的初始值是传入的[]，以后会是每次迭代计算后的值
const flatArr = (arr)=>{
return arr.reduce((prevRes, item) => prevRes.concat(Array.isArray(item) ? flatArr(item): item), []);
}
console.log(flatArr(arr)); // [1, 2, 3, 3.1, 3.2, 5, 6]
2)数组从右到左铺平
Array.prototype.reduceRight
Array.prototype.reduce会从左往右进行迭代，如果需要从右往左迭代，用Array.prototype.reduceRight就好了
const arr = [[1, 2], [3, [3.1,3.2]], [5, 6]];
// prevRes的初始值是传入的[]，以后会是每次迭代计算后的值
const flatArr = (arr)=>{
return arr.reduceRight((prevRes, item) => prevRes.concat(Array.isArray(item) ? flatArr(item): item), []);
}
console.log(flatArr(arr)); // [6, 5, 3.2, 3.1, 3, 2, 1]
参考
总结
-
compose函数可以将需要嵌套执行的函数平铺，嵌套执行就是一个函数的返回值将`作为另一个函数的参数 -
pipe的实现，首先是取他的参数数组（这是传给这个函数的实参），然后，返回一个函数（返回这个函数是因为调用方式是(函数列表)(数据)这样子），然后，在返回的函数中去依次调用这些函数，并且，把上一个函数的返回值，传递给下一个函数作为参数。
