高阶函数
高价函数接受一个或多个函数为参数，返回一个新的函数，两个条件满足其一则就是高阶函数，高阶函数用于修改函数的参数或者控制函数的执行流程与返回结果；常见的高阶函数有
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
