高階函數(shù)

高價(jià)函數(shù)接受一個(gè)或多個(gè)函數(shù)為參數(shù)，返回一個(gè)新的函數(shù)，兩個(gè)條件滿足其一則就是高階函數(shù)，高階函數(shù)用于修改函數(shù)的參數(shù)或者控制函數(shù)的執(zhí)行流程與返回結(jié)果；常見的高階函數(shù)有curry、compose、以及數(shù)組的一些方法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

以上函數(shù)已經(jīng)過高階函數(shù)HOF包裝，硬生生的改變了函數(shù)的執(zhí)行方式與結(jié)果；高價(jià)函數(shù)可以用來封裝統(tǒng)一的函數(shù)mixin，可以更細(xì)粒度的控制函數(shù)，更好的提現(xiàn)函數(shù)的“單一職責(zé)”思想；

純函數(shù)

• 純函數(shù)：相同的函數(shù)參數(shù)調(diào)用，必定會(huì)是相同的函數(shù)調(diào)用結(jié)果；同一輸入，必定是同一結(jié)果；

// 純函數(shù)
function add(a, b){
   return a + b
}
// 不純函數(shù)
function add(a){
  return a + otherFn() 
}

以上otherFn()函數(shù)調(diào)用結(jié)果未知，導(dǎo)致函數(shù)add()函數(shù)調(diào)用結(jié)果不純；

高價(jià)函數(shù)與純函數(shù)的典型應(yīng)用-緩存函數(shù)

• 緩存函數(shù)：緩存函數(shù)依賴與純函數(shù)，如果緩存的函數(shù)每次返回結(jié)果不純，那么緩存也沒任何意義；成熟的緩存函數(shù)有lodash.memoize、第三方庫(kù)memoize-one等；實(shí)現(xiàn)原理基本相同，都是更具對(duì)比傳入?yún)?shù)是否嚴(yán)格相等，相等則直接讀取緩存，否則就調(diào)用函數(shù)；以下是memoize-one的實(shí)現(xiàn)，非常簡(jiǎn)單。

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;
  }

緩存函數(shù)的典型應(yīng)用還包括React.memo、React.useMemo等；還可以用于客戶端http請(qǐng)求緩存等；

函數(shù)柯里化

javascript 的bind自帶柯里化功能，能讓函數(shù)延遲執(zhí)行；函數(shù)柯里化使得多個(gè)參數(shù)的函數(shù)調(diào)用變成單獨(dú)一個(gè)參數(shù)的多次調(diào)用，使函數(shù)更純，功能顆粒更細(xì)，調(diào)用方式更靈活；

function add(a, b){
   return a + b
}
// bind實(shí)現(xiàn)柯里化
var add1 = add.bind(this, 5);
var add2 = add1.bind(this, 3); 
console.log(add2()) // 8

根據(jù)bind函數(shù)特性，很容易自己實(shí)現(xiàn)一個(gè)curry高階函數(shù)：

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

未完待續(xù)……