compose函数

在学习redux源码的时候看到了其中的工具函数composecompose函数的作用就是组合函数,依次组合传入的函数:

  1. 后一个函数作为前一个函数的参数
  2. 最后一个函数可以接受多个参数,前面的函数只能接受单个参数;后一个的返回值传给前一个

reduce实现

redux中是使用reduce实现的

function compose(...funcs) {
//没有传入函数参数,就返回一个默认函数(直接返回参数)
if (funcs.length === 0) {
return arg => arg
} if (funcs.length === 1) {
// 单元素数组时调用reduce,会直接返回该元素,不会执行callback;所以这里手动执行
return funcs[0]
}
// 依次拼凑执行函数
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

reduce的详细说明可以查阅MDN

举例分析:compose(f4,f3,f2,f1)(c,d,e)

  • reduce回调函数第一次执行时,返回值为 函数 (...args) => f4(f3(...args)),作为下一次执行的a参数
  • 回调函数第二次执行时,返回值为 函数(...args) => f4(f3(f2(...args))),作为下一次执行的a参数
  • 回调函数第三次执行时,返回值为 函数(...args) => f4(f3(f2(f1(...args))))

最右边的参数f1可以接受多个参数,然后返回结果传给下一个函数f2,返回结果再传入f3··· f3最先被调用,会等待f2的结果,再等待f1的结果。

    let a = (x,y) => x + y,
b = x => x * x,
c = x => x === 0 ? x : 1/x; compose(c,b,a)(1,2); // 1/9

那么如果想从左到右返回结果呢?

  1. 使用reduceRight
  2. funcs倒序

迭代实现

用迭代的方式实现从右到左依次执行的组合函数。

    function compose(...funcs) {
let length = funcs.length; return function(...arg) {
let index = length - 1,
result = length > 0 ? funcs[index].apply(this,arg) : arg; //注意arg为数组,要用apply
while(--index >=0 ) {
result = funcs[index].call(this,result);
}
return result;
}
}

通过index来标记应该执行哪个函数,这里是从最右边(length - 1)开始执行的,每执行一个index就减1,直到index0(最左边)为止。

result来记录每次函数执行的返回值,每次都会更新,直到所有函数都执行完。才会返回最终结果

如果传递的函数列表为空,则返回传入参数。

同样的如果需要从左到右依次执行,则将funcs倒序即可。

compose函数的更多相关文章

  1. JS高阶编程技巧--compose函数

    先看代码: let fn1 = function (x) { return x + 10; }; let fn2 = function (x) { return x * 10; }; let fn3 ...

  2. compose 函数实现

    总结componse函数实现过程 大致特点 参数均为函数, 返回值也是函数 第一函数接受参数, 其他函数接受的上一个函数的返回值 第一个函数的参数是多元的, 其他函数的一元的 自右向左执行 简单实现 ...

  3. C#函数式编程之由函数构建函数

    在面向对象的编程中,如果我们需要复用其他的类,我们可以通过继承来实现.而在函数式编程中我们也可以采取不同的方式来复用这些函数.今天的教程将会讲述两种方式,其中一个就是组合,将多个函数组合成为一个函数, ...

  4. JavaScript函数柯里化的一些思考

    1. 高阶函数的坑 在学习柯里化之前,我们首先来看下面一段代码: var f1 = function(x){ return f(x); }; f1(x); 很多同学都能看出来,这些写是非常傻的,因为函 ...

  5. 函数式编程-compose与pipe

    函数式编程中有一种模式是通过组合多个函数的功能来实现一个组合函数.一般支持函数式编程的工具库都实现了这种模式,这种模式一般被称作compose与pipe.以函数式著称的Ramda工具库为例. cons ...

  6. javascript基础修炼(8)——指向FP世界的箭头函数

    一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应 ...

  7. javascript柯里化及组合函数~

    大家是不是看我上篇博文有点蒙.用的的curry和compose是什么鬼,怎么那么神奇.上篇博文也是主要用到了这两个函数.那今天我们来聊一下curry和compose,这两个东西是函数式编程很重要的东西 ...

  8. js函数式编程(三)-compose和pointFree

    compose即函数嵌套组合 组合compose在第一篇已经初见端倪,可以感受一下.compose函数的实现用闭包的方法.不完善实现如下: const compose = (f, g) => { ...

  9. 高阶函数&&高阶组件(二)

    高阶组件总共分为两大类 代理方式 操纵prop 访问ref(不推荐) 抽取状态 包装组件 继承方式 操纵生命周期 操纵prop 代理方式之 操纵prop 删除prop import React fro ...

随机推荐

  1. net_device 内核中是如何组织的

    下边函数实现将新的 net_device 设备插入到内核链表中工作 /* * Device list insertion */ static void list_netdevice(struct ne ...

  2. 服务管理之mysql基础

    目录 mysql基础 1. 关系型数据库介绍 1.1 数据结构模型 1.2 RDBMS专业名词 2. mysql安装与配置 2.1 mysql安装 2.2 mysql配置 3. mysql的程序组成 ...

  3. http://www.cnblogs.com/langjt/p/4281477.html

    http://www.cnblogs.com/langjt/p/4281477.html

  4. mk文件配置第三方jar包,so文件

    #-------------------------配置jar包--------------------- LOCAL_STATIC_JAVA_LIBRARIES := \ libphonenumbe ...

  5. join查询优化

    更新使用过滤条件中包括自身的表 此方法不能无法在mysql中使用 `UPDATE user1 SET over='齐天大圣' WHERE user1.user_name IN ( SELECT b.u ...

  6. JavaScript Json(转)

    JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 终于,在2002年的一天,道格拉斯·克罗克福特(Douglas Crockford)同学为了拯救深陷水深火 ...

  7. Mybatis批量更新比较

    https://blog.csdn.net/lu1024188315/article/details/78758943

  8. Oracle 中DATE类型的计算

    select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_months(sysdate,1) f ...

  9. 绕过D盾的php一句话

    d_dun.php <?php $a = '小狗狗你好啊'; $b = '小盾盾你好啊'; foreach ($_REQUEST as $key => $value) { $$key = ...

  10. 常见的js dom操作

    1.查找  document.getElementById('id属性值');  返回拥有指定id的第一个对象的引用  document/element.getElementsByClassName( ...