函数式编程范式二纯函数什么是纯函数函数式编程中的函数就是纯函数。具体特征就是相同的输入永远会得到相同的输出而且没有任何可观察的副作用。纯函数就类似于数学中函数用来描述输入与输出之间的关系y f(x)下面举一个 纯函数 和 非纯函数 的例子Array.prototype.slice和Array.prototype.spliceletarr[1,2,3,4,5,6,7,8]// 纯函数console.log(arr.slice(0,2))// [ 1, 2 ]console.log(arr.slice(0,2))// [ 1, 2 ]console.log(arr.slice(0,2))// [ 1, 2 ]// 非纯函数console.log(arr.splice(0,2))// [ 1, 2 ]console.log(arr.splice(0,2))// [ 3, 4 ]console.log(arr.splice(0,2))// [ 5, 6 ]函数式编程不会保留中间的结果所以变量是不可变的无状态的。我们可以将一个函数的执行结果交给另外一个函数去处理。纯函数的好处可预测性纯函数的「相同输入→相同输出」特性让代码行为完全可预测 —— 这是纯函数最核心的价值。可缓存性Memoization提升性能因为纯函数的输出只依赖输入所以可以把「输入→输出」的映射缓存起来重复调用时直接返回缓存结果避免重复计算。可测试性纯函数无需依赖外部环境测试时只需关注 “输入→输出”不用模拟 / 搭建复杂的测试环境。可并行执行纯函数不依赖外部状态也不修改外部状态因此可以安全地在多线程 / 并发环境中执行比如 Web Worker、Node.js 多进程无需担心 “竞态条件”多个线程同时修改同一变量。无副作用避免隐藏 bug纯函数不会修改外部状态因此不会引发 “意外的变量修改”“状态污染” 等隐蔽 bug。副作用我们再纯函数的优点中提到了副作用那究竟什么是副作用呢副作用是函数 “本职工作计算返回值” 之外的 “额外操作”这些操作会影响函数外部的状态或环境导致函数的行为不可预测、依赖外部上下文不纯。常见的副作用来源函数修改了自身作用域之外的变量全局变量、闭包变量、函数参数中的引用类型依赖随机值 / 时间等不可控因素修改函数参数的原始值尤其引用类型操作 DOM修改页面元素、绑定事件发起网络请求读写文件操作本地存储实际开发中我们不可能完全避免副作用比如前端必须操作 DOM、必须发网络请求我们只能尽可能的让副作用 “可控、可追踪”。柯里化柯里化是将一个接收多个参数的函数转换成一系列只接收单个参数的函数的过程。最终通过依次调用这些单参数函数逐步收集参数直到所有参数收集完毕后执行原逻辑并返回结果。有点抽象我们用一个例子来演示一下// 普通函数一次接收3个参数constadd(a:number,b:number,c:number){returnabc}add(1,2,3)// 直接传所有参数返回6// 柯里化函数分步接收参数constcurryAdd(a:number)// 接收第一个参数a返回接收第二个参数的函数(b:number)// 接收第二个参数b返回接收第三个参数的函数(c:number)// 接收最后一个参数c执行原逻辑abc// 调用方式1分步传参核心特征curryAdd(1)(2)(3)// 依次传参返回6// 调用方式2也可以部分传参偏应用constadd1curryAdd(1)// 固定第一个参数为1constadd1And2add1(2)// 固定第二个参数为2add1And2(3)// 传第三个参数返回6add1And2(4)// 复用传新的第三个参数返回7柯里化的核心用途参数复用最常用可以固定函数的部分参数生成一个新函数后续复用这个新函数时无需重复传固定参数。延迟执行控制执行时机柯里化函数不会立即执行原逻辑而是等参数收集完毕后才执行适合需要 “先收集参数、后执行” 的场景如事件处理、防抖节流。函数粒度细化符合 “单一职责”把多参数函数拆分成多个单参数函数每个函数只负责处理一个参数逻辑更清晰也更容易组合函数组合是函数式编程的核心。柯里化通用函数上面的柯里化示例中可以看出来我们是利用了高阶函数和闭包的特性手动嵌套函数实现了函数的柯里化但是这种方法并不通用。lodash中有提供一个通用的柯里化函数import{curry}fromlodash-es// 普通函数一次接收3个参数constadd(a:number,b:number,c:number){returnabc}constcurryAddcurry(add)curryAdd(1)(2)(3)// 6constadd1curryAdd(1)constadd1And2add1(2)add1And2(3)// 6add1And2(4)// 7// 还可以这样调用curryAdd(1,2,3)curryAdd(1,2)(3)curryAdd(1)(2,3)为了便于更好的理解柯里化我们手动模拟一下_.curry(func)的实现constcurryTextends(...arg:any[])any(func:T){returnfunctioncurriedFn(...args:any[]){// 判断实参和形参的个数if(args.lengthfunc.length){// 只传部分参数返回传递剩余参数的函数returnfunction(...nextArgs:any[]){// 拼接后续传递参数直至实参个数大于等于行程returncurriedFn(...args.concat(nextArgs))}}// 直接传递全量的参数returnfunc(...args)}}函数组合函数组合Function Composition是函数式编程中的核心概念它的本质是将多个单功能的函数组合成一个新函数让数据依次通过这些函数处理最终得到结果。我们如果利用纯函数和柯里化很容易写出洋葱代码f(g(h(x)))例如// 转大写consttoUpperCase(str:string)str.toUpperCase();// 去除空格consttrim(str:string)str.trim();// 加感叹号constaddExclamation(str:string)${str}!;constresulttoUpperCase(trim(addExclamation( hello world )));// 缺点阅读顺序是从内到外不直观我们只要保证这些过程是纯函数那么就可以利用函数组合将这个复杂的过程组合成一个函数这样我们就只需要调用这个组合函数就可以实现功能不用关心中间函数的输入输出。constprocessStrcompose(addExclamation,trim,toUpperCase);constresultprocessStr( hello world );// HELLO WORLD!!通用组合函数// flow 从左往右执行 flowRight从右往左执行import{flow,flowRight}fromlodash-es// 转大写consttoUpperCase(str:string)str.toUpperCase();// 去除空格consttrim(str:string)str.trim();// 加感叹号constaddExclamation(str:string)${str}!;constfnflow(toUpperCase,trim,addExclamation)console.log(fn( hello world ))exportdefault{}模拟实现 compose/** * 函数组合从右到左执行 * param funcs 要组合的函数数组 * returns 组合后的新函数 */constcompose(...funcs:any[]){return(value:any){returnfuncs.reverse().reduce((acc,fn)fn(acc),value)}}函数组合默认是从右到左compose而管道函数pipe是从左到右更符合日常阅读习惯pipe(管道函数)去掉reverse()即可。结合律associativity函数的组合要满足结合律单独组合某些函数结果都是一样的import{flowRight,toUpper,first,reverse}fromlodash-es// 取得数组最后一项并转为大写// 下面三种写法 结果一样constfn1flowRight(toUpper,first,reverse)constfn2flowRight(toUpper,flowRight(first,reverse))constfn3flowRight(flowRight(toUpper,first),reverse)console.log(fn1([one,two,three]))// THREEconsole.log(fn2([one,two,three]))// THREEconsole.log(fn3([one,two,three]))// THREE调试组合函数我们可以通过插入调试函数的方式来打印调试上一步执行的结果。import{flowRight,toUpper,first,reverse}fromlodash-esconstlog(value:string){console.log(value)returnvalue}// 取得数组最后一项并转为大写constfnflowRight(toUpper,first,log,reverse)fn1([one,two,three])// [ three, two, one ]我们也可以改造一下log函数增加一个tag参数方便查看。consttracecurry((tag:string,value:any){console.log(tag: value)returnvalue})constfn1flowRight(toUpper,first,trace(after reverse),reverse)Point FreePoint Free也译作 “无值风格” 或 “无参风格”是函数式编程中的一种编码范式核心思想是定义函数时不直接提及函数所操作的参数即 “点”而是通过组合已有的函数来实现逻辑。简单来说普通写法会显式写出参数而 Point Free 写法完全隐藏参数让代码更简洁、更专注于 “做什么” 而非 “对谁做”。非 Point Free 模式// 显式声明参数 str这就是“点”constprocessStr(str)str.trim().toUpperCase();// 调用console.log(processStr( hello world ));// 输出HELLO WORLDPoint Free 模式// 先定义基础函数consttrim(str)str.trim();consttoUpper(str)str.toUpperCase();// 组合函数完全不提及参数constprocessStr(str)toUpper(trim(str));// 更极致的 Point Free借助函数组合工具constcompose(f,g)(x)f(g(x));// 简单的组合函数constprocessStrPointFreecompose(toUpper,trim);// 调用结果和普通写法一致console.log(processStrPointFree( hello world ));// 输出HELLO WORLD为什么要用 Point Free代码更简洁去掉冗余的参数声明聚焦核心逻辑复用性更高通过组合已有函数实现新功能避免重复写逻辑可读性更好函数名直接体现逻辑意图比如compose(toUpper, trim)一眼就能看出 “先去空格再转大写”易于测试组合的基础函数可单独测试减少整体逻辑的测试复杂度。