前端进阶｜详细讲讲函数柯里化

前言：

柯里化(

Currying

)和反柯里化(

Uncurrying

)在

JavaScript

中总感觉属于一种不温不火的存在，甚至有些开发者在提起柯里化和反柯里化时，竟然会有点生疏不懂。其实不然，对于它们的概念可能在日常开发中不太提到，但是它们的思想和用法，却在前端开发中经常借鉴和使用，它可以帮助我们写出更加优雅、灵活的代码。本文会首先介绍柯里化的概念、实现原理和应用场景，欢迎收藏+关注哦 💕

一、什么是柯里化

JavaScript

函数柯里化是一种将使用多个参数的函数转换为一系列使用一个参数的函数的技术。该技术的名称来自于数学家

Haskell Curry

。柯里化的主要思想是通过传递函数的一部分参数来创建一个新的函数，该函数接受剩余的参数，并返回结果。

通过柯里化，我们可以将一个接受多个参数的函数转换为一个接受一个参数的函数序列。这意味着我们可以先传递一部分参数，然后传递剩余的参数，或者分别传递参数，以此灵活地处理函数的调用。

例如，下面是一个接受两个参数的普通函数：

function add(x, y) {
  return x + y;
}

通过柯里化，我们可以将上述函数转换为一系列多个函数的调用：

function add(x) {
  return function(y) {
    return x + y;
  }
}

这样，我们可以按照以下方式调用柯里化后的函数：

let add5 = add(5);
add5(3); // 返回 8

通过柯里化，我们可以轻松地创建具有更高可复用性和灵活性的函数。它在函数式编程中经常被使用，并且可以用于创建高阶函数和函数组合。

二、实现原理

函数柯里化的实现原理是利用闭包和递归。

具体步骤如下：

• 创建一个高阶函数，用于接受原函数的参数，并返回一个新函数。
• 在新函数内部，使用闭包来保存已经传入的参数。
• 在新函数内部，使用递归或者循环，判断是否所有参数都已经传入。若是，则执行原函数，并返回结果；若否，则继续返回新函数，接受下一个参数。

通过这样的方式，就可以实现柯里化函数。

以下是一个简单的示例代码展示柯里化的实现：

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 add(x, y, z) {
  return x + y + z;
}

// 柯里化后的函数
const curriedAdd = curry(add);

// 柯里化函数的调用
curriedAdd(1)(2)(3); // 返回 6

// 也可以一次传入多个参数
curriedAdd(1, 2)(3); // 返回 6

在上述代码中，

curry

函数是一个高阶函数，用于接受原函数并返回柯里化后的函数。

curried

函数是柯里化后的函数，在每次调用时判断传入的参数数量是否满足执行原函数的条件。

通过递归调用，每次返回一个新的函数，直到传入的参数数量满足原函数的要求，然后执行原函数并返回结果。这样就实现了函数的柯里化。

三、应用场景

下面是几个常见的例子：

计算器函数

假设我们有一个计算器函数，用于执行简单的数学运算，例如加法、乘法等。我们可以通过柯里化的方式创建一个特定的计算器函数，只执行特定的运算。比如，我们可以创建一个柯里化的加法函数，它接收一个初始值，并返回一个新的函数，用于执行加法运算。

function add(x) {
  return function (y) {
    return x + y;
  };
}

const addTen = add(10);
console.log(addTen(5)); // 输出 15
console.log(addTen(10)); // 输出 20

校验函数

柯里化函数在校验数据时也非常有用。比如，我们可以创建一个柯里化的校验函数，它接收一个校验规则和待校验的数据，并返回一个新的函数。这个新函数可以在不同的场景中使用，并根据校验规则对待校验数据进行验证。

function validate(rule) {
  return function (data) {
    // 执行校验规则并返回结果
    // ...
  };
}

const validateEmail = validate("email");
console.log(validateEmail("[email protected]")); // 输出 true

const validateNumber = validate("number");
console.log(validateNumber("10")); // 输出 false

组合函数

函数组合是函数式编程中的一个重要概念。柯里化函数可以帮助我们实现函数的组合。比如，我们有两个函数

g

和

f

，我们可以使用柯里化函数将它们组合在一起，创建一个新的函数

h

，执行

g

的结果作为

f

的输入。

function addTwo(x) {
  return x + 2;
}

function multiplyByThree(x) {
  return x * 3;
}

const compose = (f, g) => (x) => f(g(x));

const addTwoAndMultiplyByThree = compose(multiplyByThree, addTwo);
console.log(addTwoAndMultiplyByThree(4)); // 输出 18

这些只是函数柯里化的一些应用场景示例，实际上，函数柯里化可以在很多场景中发挥作用，特别是在函数式编程中。它可以简化代码、提高代码的可读性和可重用性，同时也提供了更大的灵活性和抽象能力。

四、柯里化的优缺点

优点：

1. 提高函数复用性：通过柯里化，我们可以创建更加通用的函数，可以根据需要传递不同的参数，从而实现更好的复用性。
2. 延迟执行：柯里化可以延迟函数的执行，通过传递部分参数，我们可以预先设置一些参数，并在需要的时候再传递剩余的参数。这种灵活性可以帮助我们管理代码的执行顺序和逻辑。
3. 部分参数应用：柯里化可以让我们先传递一部分参数，得到一个新的函数，然后可以用于不同场景的调用。这样就可以通过共享一部分参数来减少重复代码。

缺点：

1. 难以理解和维护：柯里化使得函数变得更加复杂，可能会增加代码的复杂性和难以理解。特别是当多次嵌套柯里化函数时，代码可读性会降低，对于维护和调试可能带来困难。
2. 性能影响：由于柯里化会生成多个函数闭包，可能会导致一些性能消耗。每次柯里化都会创建一个新的函数，这可能会增加函数对象的内存开销。

举例演示：

用一个简单的例子来说明柯里化的优点和缺点：

function add(x, y, z) {
  return x + y + z;
}

// 柯里化前的调用
add(1, 2, 3); // 返回 6

// 柯里化后的调用
function curriedAdd(x) {
  return function(y) {
    return function(z) {
      return x + y + z;
    }
  }
let addCurried = curriedAdd();
let addCurried2 = addCurried(2);
addCurried2(3); // 返回 6

在这个例子中，柯里化后的函数可以根据需要逐步传递参数，实现部分参数的应用，从而提高了函数的复用性。但同时，柯里化也使代码变得更加复杂，特别是在需要传递多个参数的情况下。

五、总结

在本篇文章中，我们深入探讨了JavaScript函数柯里化的实现原理和应用场景。函数柯里化是一种将多个参数的函数转化为接收一个参数的函数序列的技术，通过这种方式，我们可以实现更加灵活和高复用性的函数。

我们实践了几种常见的实现函数柯里化的方法，通过学习这些方法，我们可以将函数柯里化应用于日常开发中，从而提高代码的可维护性和可扩展性。无论是在函数式编程还是在其他编程范式中，函数柯里化都是一个强大的工具。

总而言之，函数柯里化在前端开发中对参数传递灵活性、简化复杂函数、提高代码复用性、构建可组合函数以及实现延迟执行和懒加载等方面起到了积极的作用，提升了前端开发的效率和代码质量。但同时柯里化有时候也使代码变得更加复杂，特别是在需要传递多个参数的情况下，因此面对柯里化，我们应具体问题具体分析，适时适度的选择使用它。

希望通过这篇文章，我们都能够理解函数柯里化的概念，并且能够熟练地使用它来编写更加优雅和高效的JavaScript代码。通过函数柯里化，我们可以将复杂的问题分解为简单的函数组合，使代码更易于理解和维护。

🚀 个人简介：7年开发经验，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作 者：码喽的自我修养❣️
📝 专 栏：javascript深入研究
🌈 若有帮助，还请** *关注➕点赞➕收藏 ***，不行的话我再努努力💪💪💪

更多专栏订阅推荐：

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

⭐️ uniapp与微信小程序

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化