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函数我们要执行哪些方法,他会自动执行。

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

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

猜你喜欢

转载自blog.csdn.net/baidu_39009276/article/details/131120172