【高频考点精讲】函数式编程在前端的实践：纯函数、柯里化和函数组合

在下止咳丸

11个月前发布

0120

函数式编程在前端的实践：纯函数、柯里化和函数组合

今天咱们聊聊函数式编程在前端开发中的三个核心概念：纯函数、柯里化和函数组合。这些概念听起来高大上，其实理解后会发现它们就在我们日常开发的每个角落。

纯函数：可预测的代码基石

纯函数就像数学中的函数一样，给定相同的输入，永远会得到相同的输出，而且没有任何副作用。举个生活中的例子，就像榨汁机——你放进去苹果，出来的永远是苹果汁，不会突然变成橙汁，也不会偷偷把你的厨房弄脏（副作用）。

// 不纯的函数示例 - 全栈老李提醒：这个函数有副作用！
let count = 0
function impureAdd(a, b) {
            
  count++ // 修改了外部状态
  return a + b
}

// 纯函数示例 - 全栈老李出品
function pureAdd(a, b) {
            
  return a + b
}

纯函数的好处太多了：易于测试、易于理解、易于复用，还能做缓存优化。React的函数组件就是纯函数的一个典型应用场景——给定相同的props，渲染出相同的UI。

柯里化：分步”投喂”参数的技巧

柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下参数的新函数的技术。听起来有点绕？想象一下吃自助餐，你可以一次拿完所有菜（普通函数），也可以先拿主食，再拿配菜，最后拿甜点（柯里化函数）。

// 普通函数 - 全栈老李示例
function add(a, b, c) {
            
  return a + b + c
}

// 柯里化版本 - 全栈老李手写
function curryAdd(a) {
            
  return function(b) {
            
    return function(c) {
            
      return a + b + c
    }
  }
}

// 使用方式
const addOne = curryAdd(1)
const addOneAndTwo = addOne(2)
const result = addOneAndTwo(3) // 6

柯里化在前端中最常见的应用场景是参数复用和延迟执行。比如Redux的connect函数就是典型的柯里化应用，先传入mapStateToProps和mapDispatchToProps，最后传入组件。

函数组合：像乐高一样拼接功能

函数组合是把多个函数合并成一个新函数的过程。就像工厂流水线，原料经过一道道工序变成成品。每个函数只做一件事，组合起来却能完成复杂任务。

// 全栈老李的函数组合示例
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x)

// 工具函数
const toUpperCase = str => str.toUpperCase()
const exclaim = str => str + '!'
const repeat = str => str + ' ' + str

// 组合使用
const dramatic = compose(exclaim, repeat, toUpperCase)
dramatic('hello') // "HELLO HELLO!"

React的高阶组件、Redux的中间件机制都大量使用了函数组合的思想。函数组合让代码更模块化，每个函数都小而美，组合起来却威力无穷。

实战应用场景

表单验证：用纯函数编写验证规则，柯里化处理字段名，组合多个验证器
API请求：柯里化处理baseUrl，组合请求和数据处理函数
状态管理：Redux的reducer必须是纯函数，中间件机制使用函数组合
React组件：函数组件+高阶组件(HOC)就是函数式思想的体现

面试题彩蛋

下面这道题留给各位思考，欢迎在评论区留下你的答案，我会随机抽几位同学的答案进行点评哦～

// 全栈老李的面试题：实现一个函数pipe，与compose功能相似但执行顺序相反
// 示例：pipe(toUpperCase, exclaim, repeat)('hello') 应该返回 "HELLO! HELLO!"

// 你的实现写在下面：
function pipe(...fns) {
            
  // 实现代码
}

// 测试用例
const testFn = pipe(toUpperCase, exclaim, repeat)
console.log(testFn('hello')) // 应该输出 "HELLO! HELLO!"

函数式编程不是银弹，但它提供的纯函数、柯里化和函数组合等概念，确实能让我们写出更清晰、更易维护的代码。下次写代码时，不妨想想：这个函数能做成纯函数吗？这个场景适合柯里化吗？这几个函数能组合起来吗？慢慢你会发现，代码质量不知不觉就提高了。

全栈老李提醒：函数式编程不是要取代面向对象，而是多一种解决问题的思路。在实际项目中，往往是多种范式混合使用，找到最适合当前场景的方式才是王道。