在实际应用中，我们有时候会遇到“compose函数可以用作什么，实例是怎样的”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“compose函数可以用作什么，实例是怎样的”文章能帮助大家解决问题。

compose函数

compose函数可以将需要嵌套执行的函数平铺，嵌套执行就是一个函数的返回值将作为另一个函数的参数。我们考虑一个简单的需求：这个需求很简单，直接一个计算函数就行：

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)

现在大家对于compose函数可以用作什么，实例是怎样的的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• TS编程中extends关键字表示什么，有哪些应用

  Typescript中extends关键字的基本使用 目录 前言 基本使用 泛型约束 条件类型与高阶类型 在高级类型中的应用 参考文献 总结 前言 extends关键字在TS编程中出现的频率挺高的,而且不同场景下代表的含义不一样,特此总结一下

• JavaScript中用宏详解怎样操作？一文带你看懂

  本文主要了解JavaScript中用宏详解的内容，一些朋友可能对于宏详解不是很了解，下文对JavaScript中用宏详解的使用有很详细的介绍，需要的朋友可以参考。

• JavaScript函数的相关基础知识有哪些

  这篇文章主要为大家介绍了JavaScript的函数简介，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• vue项目中怎样进行rem替换px的操作？

  vue项目中怎样进行rem替换px的操作？rem和px都是针对字体大小的，一些朋友对于rem和px的替换比较好奇，下面小编就给大家分享rem替换px的实例，有需要的朋友借鉴参考，下面我们一起来看一看吧。

• windows下安装Node出现报错2503怎么解决？

  windows下安装Node出现报错2503怎么解决？有一些朋友就有遇到node安装失败2503报错的问题，那么究竟我们该怎么办呢？下文给大家分享了一个解决方法，操作如下，大家可以了解看看，希望能帮助到大家。