您现在的位置是：首页 >技术交流 >JavaScript——compose函数网站首页技术交流

目录

1. 普通函数

2. compose函数

2.1 概念

2.2 特性

2.3 作用

2.4 实现

2.5 pipe函數

3. 链式调用

4. 总结

1. 普通函数

我们先来看一下下面这几个函数：

function multiplyTwo(num) {
    return num * 2;
}
function minusOne(num) {
    return num - 1;
}
function addTwo(num) {
    return num + 2;
}
function addThree(num) {
    return num + 3;
}

如果要实现 10*2-1+2+3 ，用普通函数的做法会是什么呢？

var result = multiplyTwo(10);
result = minusOne(result);
result = addTwo(result);
result = addThree(result);

//或者

var result = addThree(addTwo(minusOne(multiplyTwo(10)))); //24

从上面的例子可以看出，如果需要嵌套的函数有很多，那么类似上面 f(g(h(x))) 的这种写法可读性太差，考虑能不能写成 (f, g, h)(x) 这种比较直观的形式，于是compose()函数正好可以帮助我们实现。

2. compose函数

2.1 概念

compose 是函数式编程中一个非常重要的函数，compose的函数作用就是组合函数，将需要嵌套执行的函数扁平化处理。将多个函数串联起来，上一个函数的输出作为下一个函数的输入。

2.2 特性

执行顺序是从右到左，前面函数的执行结果交给后面函数处理。

2.3 作用

实现函数式编程中的 pointfree 风格（无参数），使我们专注于【转换】而不是【数据】

2.4 实现

以上面的例子，用compose函数来实现：

for循环实现：

function compose() {
    //arguments
    const args = [].slice.apply(arguments);
    return function (num) {
        var _result = num;
        for (var i = args.length -1; i >= 0; i--){
            _result = args[i](_result);
        }
        return _result;
    }
}

compose(addThree, addTwo ,minusOne, multiplyTwo)(10);  //24

reduceRight实现：

function compose() {
    //arguments不是一个真正的数组，先转化成真正的数组
    const args = [].slice.apply(arguments);
    return function (num) {
        return args.reduceRight((res, cb) => cb(res), num);
    }
}

compose(addThree, addTwo ,minusOne, multiplyTwo)(10); //24

2.5 pipe函數

pipe函数和compose函数功能一样，只不过是从左往右执行。

3. 链式调用

我们也可以用promise来组织成一个链式调用。但是注意，这和面向对象的链式调用有区别。

Promise.resolve(10).then(multiplyTwo).then(minusOne).then(addTwo).then(addThree).then(res=>{
    console.log(res); //24
})

4. 总结

compose函数可以理解为为了方便我们连续执行方法，把自己调用传值的过程封装起来，我们只需要给conmose函数我们要执行哪些方法，他会自动执行。

如果内容有错误的地方欢迎指出（觉得看着不理解不舒服想吐槽也完全没问题）

如果有帮助，欢迎点赞和收藏哟