如何用add(1)(2)(3)轻松得到6？

前言

在JavaScript编程中，函数的灵活性使得开发者可以创造出非常优雅且高效的代码模式。如何实现一个 add 函数，使得 add(1)(2)(3) 返回 6。

接下来我将从最简单的实现开始，逐步引导改进，最终带着小伙伴实现一个优雅且通用的解决方案。

第一层：最简单的add函数

首先，我们来实现一个最简单的add函数。这个函数接受两个参数并返回它们的和：

js 复制代码

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

console.log(add(1, 2)); // 输出 3

这个add函数虽然能正确计算两个数的和，但它有一个明显的局限性：无法满足链式调用的需求。我们希望能够通过add(1)(2)(3)这样的调用方式得到结果，而目前的实现显然无法做到这一点。

第二层：柯里化技术尝试

为了实现链式调用，我们就需要使用一种称为柯里化（Currying）的技术。柯里化是一种将多参数函数转换为一系列单参数函数的技术（后面会进行详细说明）。我们可以尝试通过以下方式实现：

js 复制代码

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

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

在这个实现中，add函数返回一个新的函数，这个新函数接收第二个参数b，并返回一个再接收第三个参数c的函数。最终，最里面的函数计算并返回三个参数的和。

虽然这个方法实现了我们的需求，但它显得非常不优雅且局限性明显。每增加一个参数，就需要增加一层嵌套，这显然不符合我们轻松优雅得学习编程的初衷。

第三层：优雅的柯里化函数实现

为了使add函数能够接受任意数量的参数，并通过链式调用进行计算，我们可以利用柯里化函数的灵活性和闭包特性来实现。

js 复制代码

const curry = (fn, ...args) => {
  return (...args2) => {
    if (args2.length === 0) {
      return fn(...args);
    }
    const allArgs = [...args, ...args2];
    return curry(fn, ...allArgs);
  };
};

const add = (...args) => {
  return args.reduce((sum, current) => sum + current, 0);
};

const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)(3)()); // 输出 6
console.log(curriedAdd(1, 2)(3, 4)(5)()); // 输出 15
console.log(curriedAdd(1)(2)(3)(4)(5)(6)()); // 输出 21

代码解释

柯里化函数curry：
- 接收一个函数 fn 和初始参数 ...args。
- 返回一个新的函数，该函数接收新的参数 ...args2。
- 如果没有传入新的参数 args2，则调用并返回原函数 fn 的结果，传入的是累积的所有参数。
- 如果传入了新的参数 args2，则合并所有参数，并递归调用 curry，以便继续收集参数。
add函数：
- add函数接受任意数量的参数，并使用reduce方法计算它们的和。
链式调用的实现：
- curriedAdd是通过curry(add)创建的柯里化add函数。
- 每次调用curriedAdd时，都返回一个新的函数，直到所有参数都被收集。
延迟调用：
- 使用额外的一对括号()来触发最终计算。比如curriedAdd(1)(2)(3)()中的最后一个()表示已经收集完所有参数，可以进行计算。

优雅与灵活性的平衡

这个实现不仅满足了链式调用的需求，还通过使用...args和fn.length使得代码更加简洁和通用。无论传递多少参数，函数都能正确计算它们的和，并且代码看起来非常直观。

柯里化

概念

柯里化（Currying）是一种技术，它将一个多参数函数转换为一系列单参数函数的过程。换句话说，柯里化函数接收一个参数，然后返回一个接收下一个参数的函数，依此类推，直到所有参数都被接收，最终返回计算结果。

作用

参数复用：
- 柯里化允许我们创建一个部分应用函数，其中一些参数是预先确定的，从而使得函数更灵活和可复用。
简化函数组合：
- 柯里化使得函数的组合变得更加容易，尤其是在函数式编程中。我们可以轻松地将多个简单函数组合成一个复杂函数。
延迟计算：
- 柯里化允许我们推迟函数的执行，直到所有参数都已被提供。这对于一些需要延迟计算的场景非常有用。

常见编程实践中的应用场景

事件处理：
- 在事件处理函数中，柯里化可以用于创建一些预定义的处理逻辑。例如，我们可以预先定义事件类型，然后在具体的事件发生时仅传递事件对象。
js 复制代码
```
function handleEvent(type) {
  return function(event) {
    console.log(`${type} event:`, event);
  };
}

const clickHandler = handleEvent('click');
document.addEventListener('click', clickHandler);
```
函数组合：
- 在函数式编程中，柯里化函数可以更容易地组合和传递。例如，在数据处理流水线中，我们可以将多个柯里化函数组合在一起。
js 复制代码
```
const add = x => y => x + y;
const multiply = x => y => x * y;

const add5 = add(5);
const multiply10 = multiply(10);

const result = multiply10(add5(3)); // (3 + 5) * 10 = 80
```

配置化调用：

柯里化允许我们创建一些带有默认配置的函数。例如，我们可以创建一个带有默认配置的日志记录函数，然后在不同的环境中使用。

js 复制代码

function createLogger(level) {
  return function(message) {
    console.log(`[${level}] ${message}`);
  };
}

const infoLogger = createLogger('INFO');
const errorLogger = createLogger('ERROR');

infoLogger('This is an informational message.');
errorLogger('This is an error message.');

总结

通过上述讨论，我们从最简单的add函数出发，逐步探讨了如何实现能够进行链式调用的add(1)(2)(3)函数。在这个过程中，我们涉及到JavaScript中的一些高级概念，如闭包和解构赋值，并且详细解释了柯里化技术。

最后，希望大家有所收获！