compose 函数
compose 函数能够将须要嵌套执行的函数平铺,嵌套执行就是一个函数的返回值将作为另一个函数的参数。咱们思考一个简略的需要:
给定一个输出值 x,先给这个值加 10,而后后果乘以 10
这个需要很简略,间接一个计算函数就行:
const calculate = x => (x + 10) * 10;
let res = calculate(10);
console.log(res); // 200
然而依据咱们之前讲的函数式编程,咱们能够将简单的几个步骤拆成几个简略的可复用的简略步骤,于是咱们拆出了一个加法函数和一个乘法函数:
const add = x => x + 10;
const multiply = x => x * 10;
// 咱们的计算改为两个函数的嵌套计算,add 函数的返回值作为 multiply 函数的参数
let res = multiply(add(10));
console.log(res); // 后果还是 200
下面的计算方法就是函数的嵌套执行,而咱们 compose
的作用就是将嵌套执行的办法作为参数平铺,嵌套执行的时候,外面的办法也就是左边的办法最开始执行,而后往左边返回,咱们的 compose
办法也是从左边的参数开始执行,所以咱们的指标就很明确了,咱们须要一个像这样的 compose
办法:
// 参数从右往左执行,所以 multiply 在前,add 在后
let res = compose(multiply, add)(10);
在讲这个之前咱们先来看一个须要用到的函数Array.prototype.reduce
Array.prototype.reduce
数组的 reduce 办法能够实现一个累加成果,它接管两个参数,第一个是一个累加器办法,第二个是初始化值。累加器接管四个参数,第一个是上次的计算值,第二个是数组的以后值,次要用的就是这两个参数,前面两个参数不罕用,他们是以后 index 和以后迭代的数组:
const arr = [[1, 2], [3, 4], [5, 6]];
// prevRes 的初始值是传入的[],当前会是每次迭代计算后的值
const flatArr = arr.reduce((prevRes, item) => prevRes.concat(item), []);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]
Array.prototype.reduceRight
Array.prototype.reduce
会从左往右进行迭代,如果须要从右往左迭代,用 Array.prototype.reduceRight
就好了
const arr = [[1, 2], [3, 4], [5, 6]];
// prevRes 的初始值是传入的[],当前会是每次迭代计算后的值
const flatArr = arr.reduceRight((prevRes, item) => prevRes.concat(item), []);
console.log(flatArr); // [5, 6, 3, 4, 1, 2]
那这个 compose 办法要怎么实现呢,这里须要借助Array.prototype.reduceRight
:
const compose = function(){// 将接管的参数存到一个数组,args == [multiply, add]
const args = [].slice.apply(arguments);
return function(x) {return args.reduceRight((res, cb) => cb(res), x);
}
}
// 咱们来验证下这个办法
let calculate = compose(multiply, add);
let res = calculate(10);
console.log(res); // 后果还是 200
下面的 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(){const args = [].slice.apply(arguments);
return function(x) {return args.reduce((res, cb) => cb(res), x);
}
}
// 参数程序改为从左往右
let calculate = pipe(add, multiply);
let res = calculate(10);
console.log(res); // 后果还是 200
ES6 写法:
const pipe = (...args) => x => args.reduce((res, cb) => cb(res), x)
文章的最初,感激你破费贵重的工夫浏览本文,如果本文给了你一点点帮忙或者启发,请不要悭吝你的赞和 GitHub 小星星,你的反对是作者继续创作的能源。
作者博文 GitHub 我的项目地址:https://github.com/dennis-jiang/Front-End-Knowledges