【面试题】手写函数组合

函数式编程越来越应用广泛。在react的框架中体现的更加明显，vue3现在也拥抱了函数式编程。函数的组合则是函数式编程的高阶部分。其实道理很简单，就是函数与函数之间组合封装成一个新的函数

function (xFn, GFn) {
   return function (x) {
       return xFn(GFn(x))
   }
}

面试题也许要你写一个通用的函数组合，函数组合不可能只是两个函数，会有多个。代码如下细细琢磨

function double(num) {
  return num * 2;
}
function square(num) {
  return num * num;
}
// 实现方式一
function compose(...fns) {
  const isAllFunction = fns.every((fn) => typeof fn === "function");
  if (!isAllFunction) throw new Error("必须都是函数");
  return function _compose(...args) {
    var result = [];
    // 核心代码
    for (let i = 0; i < args.length; i++) {
      var _index = fns.length - 1;
      var r = fns[_index].call(this, args[i]);
      while (--_index >= 0) {
        r = fns[_index].call(this, r);
        result.push(r);
      }
    }
    return args.length === 1 ? result[0] : result;
  };
}
/*
实现方式二
function compose(...fns) {
  // 此处校验省略
  const result = [];
  return function operate(...args) {
    for (let i = 0; i < args.length; i++) {
      result[i] = fns.reduceRight((x, callback) => {
        return callback(x);
      }, args[i]);
    }
    return args.length === 1 ? result[0] : result;
  };
}
*/
// 函数从右往左执行
const newFunc = compose(double, square);

console.log(newFunc(10)); // 200
console.log(newFunc(10, 20, 30)); // [200, 800, 1800]

函数组合就是将多个函数组合成一个新的函数。像一个工厂流水线一样处理数据。希望对一些人有帮助。