函数式编程之柯里化和组合详解

提到函数式编程，就不得不提柯里化和组合。说实话，在之前的项目开发中，对柯里化和组合的运用不是太多，因为不太清楚应该在哪些情况下应该使用它们。所以在这篇文章中，我们将详细的介绍柯里化和组合的用法以及使用场景。

柯里化 Curry

首先说说什么是柯里化, 简单来讲就是部分应用, 也就是说 只传递函数的一部分参数来调用它，让它返回一个函数去处理剩下的参数。

参数复用

先来看个例子，创建一个 say 函数，打印出带有名字，前缀和问候语的一句话。

const say = (name, prefix, greeting) => `${greeting}, ${prefix} ${name}!`;

say('Tom', 'Mr', 'Hello'); // "Hello, Mr Tom"
say('James', 'Mr', 'Hello'); // "Hello, Mr James"

在上面的例子中，我们每一次调用 say 函数都必须传入完整的三个参数，才能保证正确的运行结果，否则，虽然程序还是会正常运行，可是未传入的部分会变成 undefined。

利用柯里化，我们可以固定住其中的部分参数，在调用的时候，这个参数就相当于已经被记住了，不需要再次传递，也就是我们这里说的参数复用。

const say = prefix => greeting => name => `${greeting}, ${prefix} ${name}!`;
const sayToMr = say('Mr');
const sayToMiss = say('Miss');
const greetMr = sayToMr('Hello');
const greetMiss = sayToMiss('Hi');

greetMr('Tom'); // "Hi, Miss Cindy!"
greetMiss('Cindy'); // "Hello, Mr Tom!"

这时候如果我们想输入相同的问候语 Hello, 我们发现，原来的结构好像不太满足了呃，于是我们开始调整参数的位置。

const say = greeting => prefix => name => `${greeting}, ${prefix} ${name}!`;
const greet = say('Hello');
const greetMeiNv = greet('美女');
const greetShuaiGe = greet('帅哥');

greetShuaiGe('Tom'); // "Hello, 帅哥 Tom!"
greetMeiNv('Cindy'); // "Hello, 美女 Cindy!"

Note: 在使用柯里化的时候，参数的顺序很重要，可以考虑根据易变化的程度来排列参数，把不容易变化的参数通过柯里化固定起来，将需要处理的参数放到最后一位。

延迟执行

在上面的例子中，通过柯里化，我们居然多造出了 3 个函数！简直就是函数工厂嘛！但是猛地一想，如果如果是 100 个参数呢，难道要写一百次？有没有一种方法可以简单的帮我们实现柯里化？

我要开始放书上的代码了。

function curry(fn) {
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments),
      finalArgs = outerArgs.concat(innerArgs);
    return fn.apply(null, finalArgs);
  };
}

const say = (name, prefix, greeting) => `${greeting}, ${prefix} ${name}!`;

const curriedSay = curry(say);
curriedSay('Tom', 'Mr', 'Hello'); // "Hello, Mr Tom!"
curry(say,'Tom', 'Mr')('Hello');  // "Hello, Mr Tom!"

简单解释一下上面的代码，首先是得到除了第一个参数 fn 之外的所有的外部传参 outerArgs，这里的 arguments 是一个长得像数组的对象，所以我们要使用 Array.proptype.slice 将其转变成真正的数组。 innerArgs 用来获取调用这个匿名函数时的传参。最后将外部传参 outerArgs 和内部传参 innerArgs 合并，调用 fn。也就是说这时 fn 才被调用。

就好比刷信用卡和储蓄卡，刷储蓄卡就是把你的钱马上转到别人口袋，刷信用卡是银行先帮你垫着，到下个月再把钱还给银行。总之，最后都是花自己的钱。不过这样有一个好处就是，就是可以让你养成拆分函数，并给函数良好命名的习惯，以及更好的处理和抽象代码的逻辑。

使用 Ramda / Lodash 生成柯里化函数

当然，你也可以可以使用 lodash 或者 ramda 这样的库来快速柯里化你的函数，这样可以省去很多重复造轮子的工作。

下面以使用 lodash 为例。

const say = (prefix, name, greeting) => `${greeting}, ${prefix} ${name}!`;
const curreiedSay = _.curry(say);

curreiedSay('Mr','Tom','Hello'); // "Hello, Mr Tom!"
curreiedSay('Mr')('Tom','Hello'); // "Hello, Mr Tom!"
curreiedSay('Mr')('Tom')('Hello'); // "Hello, Mr Tom!"
curreiedSay('Tom')(_,'Hello')('Mr'); // "Hello, Mr Tom!"

lodash 和 Ramda 都提供了一系列柯里化函数的包装方法，感兴趣的同学可以打开 lodash / ramda 官网，在 console 里面试一下。

组合 Compose

组合，顾名思义，也就是把多个函数组合起来变成一个函数。

const compose = (fn1, fn2) => args => fn1(fn2(args));

const toUpperCase = value => value.toUpperCase();
const addSuffix = value => `${value} is good!`;

const format = compose(toUpperCase, addSuffix);
format('apple'); // "APPLE IS GOOD!"

上面的例子中，fn2 先执行，然后将返回值作为 fn1 的参数，所以 compose 里面的方法是从右向左执行的。就像一条流水线一样，a 流水线先把汽车组装好，然后交给 b 流水线进行喷漆，再交给 c 流水线打磨等等，最后得到一辆崭新的汽车。

结合柯里化和组合 Curry + Compose

学习完柯里化和组合之后，让我们将它们结合起来使用，一定能够碰撞出更强的火花，产生更大的威力。

说写就写。

假设有一个数组，我们期望先对数组进行去重，然后对数组进行求和或求积。

const unique = arr => _.uniq(arr); // 数组去重
const sum = arr => _.reduce(arr, (total, n) => total + n); // 数组元素的累加之和

const multiply = arr => _.reduce(arr, (total, n) => total * n); // 数组元素的乘积

const getTotal = fn => arr => _.flowRight(fn, unique)(arr); // 从右至左, 先去重, 再执行 fn

const arr1 = [1, 2, 3, 4, 4, 5, 5];
const arr2 = [1, 2, 2, 3, 4, 4, 5];

const getSumTotal = getTotal(sum); // 通过柯里化产生一个新的函数
const getMultiplyTotal = getTotal(multiply);   // 通过柯里化产生一个新的函数

getSumTotal(arr1); // 15
getMultiplyTotal(arr2); // 120

现在的前端社区中，函数式编程随处可见，柯里化和组合也成为了我们必须掌握的技能。在项目开发中，可以不断的去加强练习。