了解函数式编程中的 compose 吗?动手实现一下?

image.png

  1. const greeting = (name) => `hello ${name}`;
  2. const toUpper = (str) => str.toUpperCase();
  3. const fn = compose(toUpper, greeting);
  4. console.log(fn('Lucy'));
  5. // HELLO LUCY

方式一:

  1. function compose(...fns) {
  2. let isFirst = true;
  3. return (...args) => {
  4. return fns.reduceRight((result, fn) => {
  5. if (!isFirst) return fn(result);
  6. isFirst = false;
  7. return fn(...result);
  8. }, args);
  9. };
  10. }

方式二:

  1. function compose(...fns) {
  2. let len = fns.length,
  3. count = len - 1,
  4. result = null;
  5. // 首先compse 返回的是一个函数
  6. return function fn(...args) {
  7. // 函数体里就是不断执行args函数,将上一个函数的执行结果作为下一个执行函数的输入参数,需要一个count来记录args函数列表的执行情况
  8. result = fns[count].apply(this, args);
  9. // 递归退出条件
  10. if (count <= 0) {
  11. count = len - 1;
  12. return result;
  13. } else {
  14. count--;
  15. return fn.call(null, result);
  16. }
  17. };
  18. };

方式三:
参考:
https://github.com/lgwebdream/FE-Interview/issues/1039