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

标签：解决   数组   和我   注意   default   length   div   function   操作   先看代码： 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  JS高阶编程技巧--compose函数标签：解决   数组   和我   注意   default   length   div   function   操作   原文地址：https://www.cnblogs.com/ronaldo9ph/p/12323026.html