JavaScript中如何实现函数组合？

Question

以下是需要组合并为我们提供输出 30 的三个函数：

const add = (a) => a + 10;
const mul = (a) => a * 10;
const divide = (a) => a / 5; 

// How to implement `compositionFunction`?
compositionFunction(add, mul, divide)(5);
//=> 30

预期输出为 30，因为：

5 + 10 = 15
15 * 10 = 150
150 / 5 = 30

Answer 1

像这样的东西

const add = (a) =>  a + 10 ;
const mul = (a) =>  a * 10 ;
const divide = (a) => a / 5 ; 
// How to use this function -----

const customComposeFn = (...f) => v => f.reduce((res, f) => f(res), v)

console.log(customComposeFn(add, mul, divide)(5));

Answer 2

函数组合有两种风格：

1. 从左到右函数组合又名管道
2. 从右到左函数组合 aka compose

这是一个仅供娱乐的递归实现：
^{这假设至少有两个函数要组合}

const compose = (...fn) => {
  const [[f, g], x] = [fn.slice(-2), fn.slice(0, -2)];
  const h = a => f(g(a));
  return x.length ? compose(...x, h) : h;
}

const pipe = (...fn) => {
  const [f, g, ...x] = fn;
  const h = a => g(f(a));
  return x.length ? pipe(h, ...x) : h;
}

让我们尝试一下：

const foo = x => x + 'foo';
const bar = x => x + 'bar';
const baz = x => x + 'baz';

pipe(foo, bar, baz)('');
//=> 'foobarbaz'

compose(foo, bar, baz)('');
//=> 'bazbarfoo'

Answer 3

const add = (a) => a + 10;
const mul = (a) => a * 10;
const divide = (a) => a / 5;
const customComposeFn = (...fn) => {
    return function (arg) {
        if (fn.length > 0) {
            const output = fn[0](arg);
            return customComposeFn(...fn.splice(1))(output);
        } else {
            return arg;
        }
    };
};
const res = customComposeFn(add, mul, divide)(5);
console.log(`res`, res);

Answer 4

这就是我要做的：

function customComposeFn(...funcs) {
  return function(arg) {
    let f, res = arg;
    while (f = funcs.shift()) {
      res = f(res)
    }
    return res;
  }
}

const add = a => a + 10;
const mul = a => a * 10;
const divide = a => a / 5;
// How to use this function -----
console.log(customComposeFn(add, mul, divide)(5));