函数式编程总结与应用

高阶函数

高价函数接受一个或多个函数为参数，返回一个新的函数，两个条件满足其一则就是高阶函数，高阶函数用于修改函数的参数或者控制函数的执行流程与返回结果；常见的高阶函数有curry、compose、以及数组的一些方法map、find等；

function add(a, b){
   return a + b
}
// HOF
function HOF(fun){
  return function(...args){
    return args[0] - args[1]
  }
}
var transformAdd = HOF(add);
console.log(transformAdd(5, 2)) // 3

以上函数已经过高阶函数HOF包装，硬生生的改变了函数的执行方式与结果；高价函数可以用来封装统一的函数mixin，可以更细粒度的控制函数，更好的提现函数的“单一职责”思想；

纯函数

• 纯函数：相同的函数参数调用，必定会是相同的函数调用结果；同一输入，必定是同一结果；

// 纯函数
function add(a, b){
   return a + b
}
// 不纯函数
function add(a){
  return a + otherFn() 
}

以上otherFn()函数调用结果未知，导致函数add()函数调用结果不纯；

高价函数与纯函数的典型应用-缓存函数

• 缓存函数：缓存函数依赖与纯函数，如果缓存的函数每次返回结果不纯，那么缓存也没任何意义；成熟的缓存函数有lodash.memoize、第三方库memoize-one等；实现原理基本相同，都是更具对比传入参数是否严格相等，相等则直接读取缓存，否则就调用函数；以下是memoize-one的实现，非常简单。

function areInputsEqual(newInputs, lastInputs) {
      if (newInputs.length !== lastInputs.length) {
          return false;
      }
      for (var i = 0; i < newInputs.length; i++) {
          if (newInputs[i] !== lastInputs[i]) {
              return false;
          }
      }
      return true;
  }

  function memoizeOne(resultFn, isEqual) {
      if (isEqual === void 0) { isEqual = areInputsEqual; }
      var lastThis;
      var lastArgs = [];
      var lastResult;
      var calledOnce = false;
      function memoized() {
          var newArgs = [];
          for (var _i = 0; _i < arguments.length; _i++) {
              newArgs[_i] = arguments[_i];
          }
          if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
              return lastResult;
          }
          lastResult = resultFn.apply(this, newArgs);
          calledOnce = true;
          lastThis = this;
          lastArgs = newArgs;
          return lastResult;
      }
      return memoized;
  }

缓存函数的典型应用还包括React.memo、React.useMemo等；还可以用于客户端http请求缓存等；

函数柯里化

javascript 的bind自带柯里化功能，能让函数延迟执行；函数柯里化使得多个参数的函数调用变成单独一个参数的多次调用，使函数更纯，功能颗粒更细，调用方式更灵活；

function add(a, b){
   return a + b
}
// bind实现柯里化
var add1 = add.bind(this, 5);
var add2 = add1.bind(this, 3); 
console.log(add2()) // 8

根据bind函数特性，很容易自己实现一个curry高阶函数：

function add(a, b, c){
   return a + b + c
}
var curry = function(fn){
    return function j(...args){
        return args.length >= fn.length 
        ? fn(...args)
        : j.bind(this,...args)
    }
}
var curryFn = curry(add);
console.log(curryFn(1,2,3))   // 6
console.log(curryFn(1)(2,3))  // 6
console.log(curryFn(1,2)(3))  // 6
console.log(curryFn(1)(2)(3))  // 6

未完待续……