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

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

先看代码:

let fn1 = function (x) {
    return x + 10;
};
let fn2 = function (x) {
    return x * 10;
};
let fn3 = function (x) {
    return x / 10;
};
  console.log(fn3(fn1(fn2(fn1(6)))));

这是几个简单的运算方法,但想输出的是一个多层函数嵌套的运行结果,即把前一个函数的运行结果赋值给后一个函数,当然我们可以写成一下这样:

let x = fn1(6);
x = fn2(x);
x = fn1(x);
x = fn3(x);

但现在我就想用一个函数解决这种问题,形如:

compose(fn1, fn2, fn1, fn3)(6);

这个compose函数就是这篇文章介绍的——函数调用的扁平化,即把层级嵌套的那种函数调用(一个函数的运行结果当作实参传给下一个函数的这种操作)扁平化,这就是compose函数。

那么下面就是开始实现这个函数:

首先我们看参数,需要给出不确定个数的函数:

function compose(...funcs) {
    //=>funcs:传递的函数集合
}

compose函数执行后跟个(),说明函数执行完再执行一个函数,即函数执行完会返回一个新函数,而且也会给出第一次调用函数时的参数:

function compose(...funcs) {
    //=>funcs:传递的函数集合
    return function proxy(...args) { 
      //=>args:第一次调用函数传递的参数集合

    }    
}

继续往下进行,我们需要判断给出的函数集合的个数,如果没有给函数,我们只需将后一个的参数返回,如果只给出一个函数,我们只需把后一个的参数赋给这个函数去执行即可:

function compose(...funcs) {
    //=>funcs:传递的函数集合
    return function proxy(...args) {
        //=>args:第一次调用函数传递的参数集合
        let len = funcs.length;
        if (len === 0) {
            //=>一个函数都不需要执行,直接返回ARGS
            return args;
        }
        if (len === 1) {
            //=>只需要执行一个函数,把函数执行,把其结果返回即可
            return funcs[0](...args);
        }

    };
}

如果给出的参数集合是两个及以上,那就是把前一个函数的执行结果赋给后一个函数,说到这,应该会想到一个满足这个需求的数组方法——reduce:

function compose(...funcs) {
    //=>funcs:传递的函数集合
    return function proxy(...args) {
        //=>args:第一次调用函数传递的参数集合
        let len = funcs.length;
        if (len === 0) {
            //=>一个函数都不需要执行,直接返回ARGS
            return args;
        }
        if (len === 1) {
            //=>只需要执行一个函数,把函数执行,把其结果返回即可
            return funcs[0](...args);
        }
        return funcs.reduce((x, y) => {
        
        });
    };
}

但这里需要注意的是,第一次执行的时候,参数x是个函数,之后再执行的时候x是个函数执行的结果,所以需要进行判断:

function compose(...funcs) {
    //=>funcs:传递的函数集合
    return function proxy(...args) {
        //=>args:第一次调用函数传递的参数集合
        let len = funcs.length;
        if (len === 0) {
            //=>一个函数都不需要执行,直接返回ARGS
            return args;
        }
        if (len === 1) {
            //=>只需要执行一个函数,把函数执行,把其结果返回即可
            return funcs[0](...args);
        }
        return funcs.reduce((x, y) => {
            return typeof x === "function" ? y(x(...args)) : y(x)
        });
    };
}

这样,compose函数完成。

当然,redux源码中的compose.js也可以实现一开始想要的效果:

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

但它和我们写的compose函数有些不同,它执行的顺序是函数集合中的函数从后往前执行,所以结果也会不同:

compose(fn1, fn2, fn1, fn3)(6)); //=> 用第一个compose执行的结果是17,用redux的执行结果是116
  • 发表于 2020-02-18 10:40
  • 阅读 ( 148 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除