掌握 JavaScript 的柯里化，让代码更优雅

前端达人

发布于 2024-07-31 17:27:53

1280

发布于 2024-07-31 17:27:53

文章被收录于专栏：前端达人

JavaScript 是一门灵活多变的语言，它的魅力之一就在于可以对函数进行各种炫酷的操作。

今天我们要聊的是一个听起来有点高深，但其实很有趣的概念——柯里化（Currying）。如果你还不知道柯里化是什么，不明白它有什么用，或者不知道如何在代码中实现它，不要担心，这篇文章会带你一一揭晓这些答案。准备好开启你的 JavaScript 魔法之旅了吗？那我们开始吧！

什么是柯里化？

简单来说，柯里化就是一种函数式编程技巧。它可以把一个需要多个参数的函数，变成一系列只接受单个参数的函数。听起来有点绕？没关系，我们用个例子来说明。

想象一下，你有一个函数 f(a, b, c)，它需要三个参数 a、b 和 c。使用柯里化后，这个函数可以变成 f(a)(b)(c)，每次只接受一个参数。这样一来，你就可以一步步地传递参数，而不是一次性全部传递。

柯里化的一个重要优势是它允许你“部分应用”函数。什么意思呢？就是说你可以先固定一些参数，然后生成一个新的函数来接受剩下的参数。

通俗易懂的例子

假设你和朋友一起去买奶茶，每杯奶茶的价格是 10 元，你们买了 3 杯，计算总价的函数可能长这样：

function calculateTotalPrice(price, quantity, discount) {
  return (price * quantity) - discount;
}

// 正常调用这个函数
console.log(calculateTotalPrice(10, 3, 5)); // 输出: 25

现在我们把它柯里化：

function curriedCalculateTotalPrice(price) {
  return function(quantity) {
    return function(discount) {
      return (price * quantity) - discount;
    }
  }
}

// 调用柯里化后的函数
console.log(curriedCalculateTotalPrice(10)(3)(5)); // 输出: 25

通过柯里化，你可以一步一步地传递参数，而不是一次性全部传递。在实际应用中，这样的好处是，你可以预先设置某些固定参数，例如奶茶的价格，然后在需要的时候再传入数量和折扣，这样代码更加灵活和可复用。

为什么要用柯里化？

柯里化不仅仅是个炫酷的概念，它在实际编程中有很多实用的优势。下面我们来看看柯里化为什么这么受欢迎：

模块化和可重用性

柯里化可以把一个大函数拆分成多个小函数，每个小函数只处理一个参数。这样，你可以更容易地理解和测试这些小函数，同时也可以在不同的地方重复使用它们。

函数组合

通过柯里化，你可以轻松地将多个小函数组合成一个更复杂的函数。这样不仅可以提高代码的可读性，还能更灵活地处理不同的需求。

部分应用

柯里化允许你创建一些带有固定参数的新函数，这在需要从通用函数中生成特定功能的函数时特别有用。例如，你可以创建一个专门计算打折后价格的函数，而不用每次都传入相同的折扣值。

更清晰的语法

使用柯里化后，代码变得更加简洁和易读，特别是在处理高阶函数时。高阶函数是那些接受一个或多个函数作为参数，或者返回一个函数作为结果的函数。柯里化让这些操作变得更加自然和直观。

如何实现柯里化？

在 JavaScript 中，有多种方法可以实现柯里化。让我们来探索几种常见的方法：

1. 通用柯里化函数

我们可以创建一个通用的柯里化函数，将任何函数转换为柯里化版本。

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...nextArgs) {
        return curried.apply(this, args.concat(nextArgs));
      }
    }
  }
}

// 示例用法
function multiply(a, b, c) {
  return a * b * c;
}

const curriedMultiply = curry(multiply);
console.log(curriedMultiply(2)(3)(4)); // 输出: 24

以上例子中，我们定义了一个 curry 函数，该函数接受另一个函数 fn 作为参数，并返回一个新的柯里化函数 curried。

curried 函数将参数收集到一个名为 args 的数组中。

如果 args 的长度足以执行 fn，则调用 fn 并传递这些参数。

如果不够，curried 返回一个新函数，用于收集更多的参数，并将其与现有的参数合并。

例如，我们有一个 multiply 函数，它接受三个参数并返回它们的乘积。

通过将 multiply 传递给 curry，我们创建了 curriedMultiply，这是 multiply 的柯里化版本。

我们可以一次传递一个参数来调用 curriedMultiply，每次调用都会返回一个新函数，直到提供了所有参数。

2. 部分应用

柯里化还支持部分应用，即你可以固定某些参数并创建一个新函数。

const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);

// 部分应用第一个参数
const add5 = curriedAdd(5);

console.log(add5(10)(20)); // 输出: 35
console.log(add5(1)(2));   // 输出: 8

3. 使用 lodash 库

lodash 是一个实用工具库，提供了内置的柯里化方法。

const _ = require('lodash');

const curriedAdd = _.curry((a, b, c) => a + b + c);
console.log(curriedAdd(1)(2)(3)); // 输出: 6

4. 使用箭头函数实现简单柯里化

我们还可以用箭头函数来实现一个简单的柯里化。

const simpleCurry = fn => 
  (...args) => 
    args.length >= fn.length 
      ? fn(...args) 
      : simpleCurry(fn.bind(null, ...args));

const add = (a, b, c) => a + b + c;
const curriedAdd = simpleCurry(add);

console.log(curriedAdd(1)(2)(3)); // 输出: 6

柯里化的应用场景

柯里化在很多编程场景中都非常有用，下面是几个常见的应用场景：

1. 事件处理

柯里化可以通过预先填充参数来简化事件处理。

const handleEvent = (type) => (event) => {
  console.log(`Handling ${type} event`, event);
};

document.addEventListener('click', handleEvent('click'));
document.addEventListener('mouseover', handleEvent('mouseover'));

解释：

handleEvent 是一个柯里化函数，接受一个事件类型 type，返回一个处理事件的函数。
这样，你可以方便地为不同类型的事件创建处理函数，而不用每次都重复写相似的代码。

2. 配置函数

当你有一些需要配置参数的函数时，柯里化可以让代码更加简洁和灵活。

const setFontSize = (size) => (element) => {
  element.style.fontSize = `${size}px`;
};

const setFontSizeTo20 = setFontSize(20);
setFontSizeTo20(document.body);

解释：

setFontSize 是一个柯里化函数，接受一个字体大小 size，返回一个设置元素字体大小的函数。
这样，你可以预先配置好字体大小，然后在需要的时候调用这个配置好的函数。

3. 函数式编程

在函数式编程范式中，柯里化经常用于创建高阶函数和部分应用。

const map = (fn) => (arr) => arr.map(fn);
const multiplyBy2 = (x) => x * 2;

const mapMultiplyBy2 = map(multiplyBy2);
console.log(mapMultiplyBy2([1, 2, 3])); // 输出: [2, 4, 6]

解释：