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