一文搞懂柯里化：函数式编程技巧的解析和实践案例

1. 什么是柯里化

柯里化（Currying）是函数式编程中的一种重要技术，它将一个接收多个参数的函数转换为一系列只接收单个参数的函数的过程。我们常用的Lodash，里面就包含很多柯里化的应用。通过柯里化，我们可以将原本需要一次性传入所有参数的函数，转换为可以分多次传入参数的形式，每次传入一个参数就返回一个新的函数，直到所有参数都传入后才执行最终的计算。

举个简单的例子，一个接收三个参数的函数：

javascript 复制代码

function add(a, b, c) {
  return a + b + c;
}

经过柯里化后，我们可以这样调用：

javascript 复制代码

add(1)(2)(3); // 6

或者分步骤调用：

javascript 复制代码

const add1 = add(1);
const add1And2 = add1(2);
const result = add1And2(3); // 6

这就是柯里化的核心思想：将多参数函数转化为单参数函数的序列。

2.实现方式

在JavaScript中，我们可以手动实现函数的柯里化，也可以创建一个通用的柯里化工具函数。

2.1. 手动柯里化

针对特定函数进行柯里化：

javascript 复制代码

function add(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

// 使用
console.log(add(1)(2)(3)); // 6

2.2. 通用柯里化函数

创建一个可以将任何函数柯里化的工具：

javascript 复制代码

function curry(fn) {
  // 获取原函数的参数长度
  const arity = fn.length;
  
  return function curried(...args) {
    // 如果传入的参数足够，直接调用原函数
    if (args.length >= arity) {
      return fn(...args);
    }
    
    // 否则返回一个新函数，等待接收更多参数
    return function(...moreArgs) {
      return curried(...args.concat(moreArgs));
    };
  };
}

// 使用示例
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6
console.log(curriedSum(1)(2, 3)); // 6
console.log(curriedSum(1, 2, 3)); // 6

这个通用柯里化函数的优点是可以处理任意参数数量的函数，并且支持分批传入多个参数。

3. 柯里化的用途

柯里化在实际开发中有许多实用场景：

3.1. 参数复用

通过柯里化，我们可以固定某些参数，实现参数的复用：

javascript 复制代码

// 普通函数
function greet(greeting, name) {
  return `${greeting}, ${name}!`;
}

// 柯里化后
const curriedGreet = curry(greet);

// 创建特定问候语的函数
const sayHello = curriedGreet('Hello');
const sayHi = curriedGreet('Hi');

// 复用固定的问候语参数
console.log(sayHello('Alice')); // "Hello, Alice!"
console.log(sayHello('Bob'));   // "Hello, Bob!"
console.log(sayHi('Charlie'));  // "Hi, Charlie!"

3.2. 延迟执行

柯里化允许我们延迟函数的执行，直到收集到所有必要的参数：

javascript 复制代码

// 日志函数，需要级别、消息和时间
function log(level, message, timestamp) {
  console.log(`[${timestamp}] ${level}: ${message}`);
}

const curriedLog = curry(log);

// 固定日志级别
const errorLog = curriedLog('ERROR');

// 后续调用只需要消息，时间可以在最后统一添加
const loginError = errorLog('Login failed');

// 最后传入时间参数，执行日志输出
loginError(new Date().toISOString());

3.3. 函数组合

柯里化是函数组合的基础，能够让我们更灵活地组合多个函数：

javascript 复制代码

// 工具函数
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

// 柯里化工具函数
const curriedAdd = curry(add);
const curriedMultiply = curry(multiply);

// 创建特定功能的函数
const add5 = curriedAdd(5);
const multiplyBy2 = curriedMultiply(2);

// 组合函数：先加5，再乘以2
const add5ThenMultiplyBy2 = (x) => multiplyBy2(add5(x));

console.log(add5ThenMultiplyBy2(3)); // (3 + 5) * 2 = 16

3.4. 事件处理中的应用

在事件处理中，柯里化可以方便地传递额外参数：

javascript 复制代码

// 柯里化的事件处理函数
const handleClick = curry((message, event) => {
  event.preventDefault();
  console.log(message);
});

// 为不同按钮绑定不同消息的点击事件
document.getElementById('btn1').addEventListener('click', handleClick('Button 1 clicked'));
document.getElementById('btn2').addEventListener('click', handleClick('Button 2 clicked'));

4. 柯里化的优缺点

优点：

提高代码复用性：通过固定部分参数，可以创建具有特定功能的新函数。
增强函数灵活性：可以根据需要分阶段传入参数，而不必一次性提供所有参数。
便于函数组合：柯里化的函数更容易进行组合，创建更复杂的逻辑。
延迟执行：允许我们在需要的时候才执行函数，有助于处理异步操作。
清晰的参数顺序：柯里化促使我们思考参数的合理顺序，通常将变化较少的参数放在前面，变化较多的参数放在后面，便于复用。

缺点：

增加代码复杂性：柯里化会使函数调用链变长，可能降低代码的可读性。
调试难度增加：多层嵌套的函数调用会使调试过程变得复杂。
性能影响：柯里化涉及多个函数的创建和调用，可能会有轻微的性能损耗。
不适合所有场景：对于参数数量不确定或经常需要传入不同数量参数的函数，柯里化可能不是最佳选择。

5. 柯里化与部分应用的区别

柯里化常常与部分应用（Partial Application）混淆，但它们是不同的概念：

柯里化：将一个接收n个参数的函数转换为n个只接收一个参数的函数序列。
部分应用：固定函数的部分参数，返回一个接收剩余参数的新函数。

例如，对于一个接收3个参数的函数：

柯里化版本：fn(a)(b)(c)
部分应用版本：partial(fn, a, b)(c) 或 partial(fn, a)(b, c)

简单来说，柯里化总是将函数转换为一系列单参数函数，而部分应用则可以固定任意数量的参数。

6. 实际应用案例

下面是一些可能会碰到的实际应用案例：

6.1. 表单验证

javascript 复制代码

// 柯里化的验证函数
const validate = curry((rule, value) => {
  switch(rule) {
    case 'required':
      return value !== '';
    case 'minLength':
      return (min) => value.length >= min;
    case 'isEmail':
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
    default:
      return true;
  }
});

// 创建特定的验证器
const isRequired = validate('required');
const minLength5 = validate('minLength')(5);
const isEmail = validate('isEmail');

// 使用验证器
console.log(isRequired('test'));      // true
console.log(isRequired(''));          // false
console.log(minLength5('hello'));     // true (长度为5)
console.log(minLength5('hi'));        // false (长度为2)
console.log(isEmail('test@example.com')); // true

6.2. API请求封装

javascript 复制代码

// 基础请求函数
const request = curry((method, url, data) => {
  return fetch(url, {
    method,
    body: data ? JSON.stringify(data) : undefined,
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res => res.json());
});

// 创建特定HTTP方法的请求函数
const get = request('GET');
const post = request('POST');
const put = request('PUT');
const del = request('DELETE');

// 创建特定资源的请求函数
const getUser = get('/api/users');
const createUser = post('/api/users');
const updateUser = put;

// 使用
getUser(1).then(user => console.log(user));
createUser({ name: 'John' }).then(newUser => console.log(newUser));
updateUser('/api/users/1', { name: 'John Doe' });

7. 总结

柯里化是函数式编程中的一项强大技术，它通过将多参数函数转换为一系列单参数函数，提供了更高的灵活性和代码复用性。虽然柯里化会增加一些代码复杂性，但在适当的场景下，它能显著提升代码的可读性和可维护性。在实际开发中，我们应该根据具体场景灵活运用柯里化，平衡其带来的好处与可能的复杂性增加。

本次分享就到这儿啦，我是鹏多多，深耕前端的技术创作者，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.getElementsByClassName('panel-btn')[0].click();有惊喜哦~

往期文章