学会使用函数式编程的程序员(第2部分)

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

本系列的第一篇:

1. 学会使用函数式编程的程序员(第1部分)

组合函数 (Function Composition)

做为程序员，咱们是懒惰的。咱们不想构建、测试和部署咱们编写的一遍又一遍的代码。咱们老是试图找出一次性完成工做的方法，以及如何重用它来作其余事情。

代码重用听起来很棒，可是实现起来很难。若是代码业务性过于具体，就很难重用它。如时代码太过通用简单，又不多人使用。因此咱们须要平衡二者，一种制做更小的、可重用的部件的方法，咱们能够将其做为构建块来构建更复杂的功能。

在函数式编程中，函数是咱们的构建块。每一个函数都有各自的功能，而后咱们把须要的功能(函数)组合起来完成咱们的需求，这种方式有点像乐高的积木，在编程中咱们称为 组合函数。

看下如下两个函数：

var add10 = function(value) {
    return value + 10;
};
var mult5 = function(value) {
    return value * 5;
};

上面写法有点冗长了，咱们用箭头函数改写一下：

var add10 = value => value + 10;
var mult5 = value => value * 5;

如今咱们须要有个函数将传入的参数先加上 10 ，而后在乘以 5， 以下：

var mult5AfterAdd10 = value => 5 * (value + 10)

尽管这是一个很是简单的例子，但仍然不想从头编写这个函数。首先，这里可能会犯一个错误，好比忘记括号。第二，咱们已经有了一个加 10 的函数 add10 和一个乘以 5 的函数 mult5 ，因此这里咱们就在写已经重复的代码了。

使用函数 add10，mult5 来重构 mult5AfterAdd10 ：

var mult5AfterAdd10 = value => mult5(add10(value));

咱们只是使用现有的函数来建立 mult5AfterAdd10，可是还有更好的方法。

在数学中， f ∘ g 是函数组合，叫做“f 由 g 组合”，或者更常见的是 “f after g”。 所以 (f ∘ g)(x) 等效于f(g(x)) 表示调用 g 以后调用 f。

在咱们的例子中,咱们有 mult5 ∘ add10 或 “add10 after mult5”,所以咱们的函数的名称叫作 mult5AfterAdd10。因为Javascript自己不作函数组合，看看 Elm 是怎么写的:

add10 value =
    value + 10
mult5 value =
    value * 5
mult5AfterAdd10 value =
    (mult5 << add10) value

在 Elm 中 << 表示使用组合函数，在上例中 value 传给函数 add10 而后将其结果传递给 mult5。还能够这样组合任意多个函数:

f x =
   (g << h << s << r << t) x

这里 x 传递给函数 t，函数 t 的结果传递给 r，函数 t 的结果传递给 s，以此类推。在Javascript中作相似的事情，它看起来会像 g(h(s(r(t(x)))))，一个括号噩梦。

Point-Free Notation

Point-Free Notation就是在编写函数时不须要指定参数的编程风格。一开始，这风格看起来有点奇怪，可是随着不断深刻，你会逐渐喜欢这种简洁的方式。

在 multi5AfterAdd10 中，你会注意到 value 被指定了两次。一次在参数列表，另外一次是在它被使用时。

// 这个函数须要一个参数

mult5AfterAdd10 value =
    (mult5 << add10) value

可是这个参数不是必须的，由于该函数组合的最右边一个函数也就是 add10 指望相同的参数。下面的 point-free 版本是等效的：

// 这也是一个须要1个参数的函数

mult5AfterAdd10 =
    (mult5 << add10)

使用 point-free 版本有不少好处。

1. 首先，咱们不须要指定冗余的参数。因为没必要指定参数，因此也就没必要考虑为它们命名。
2. 因为更简短使得更容易阅读。本例比较简单，想象一下若是一个函数有多个参数的状况。

天堂里的烦恼

到目前为止，咱们已经了解了组合函数如何工做以及如何经过 point-free 风格使函数简洁、清晰、灵活。

如今，咱们尝试将这些知识应用到一个稍微不一样的场景。想象一下我使用 add 来替换 add10：

add x y =
    x + y
mult5 value =
    value * 5

如今如何使用这两个函数来组合函数 mult5After10 呢？

咱们可能会这样写：

-- 这是错误的！！！

mult5AfterAdd10 =
    (mult5 << add) 10

但这行不通。为何? 由于 add 须要两个参数。

这在 Elm 中并不明显，请尝试用Javascript编写:

var mult5AfterAdd10 = mult5(add(10)); // 这个行不通

这段代码是错误的，可是为何？

由于这里 add 函数只能获取到两个参数（它的函数定义中指定了两个参数）中的一个（实际只传递了一个参数），因此它会将一个错误的结果传递给 mult5。这最终会产生一个错误的结果。

事实上，在 Elm 中，编译器甚至不容许你编写这种格式错误的代码(这是 Elm 的优势之一)。

咱们再试一次：

var mult5AfterAdd10 = y => mult5(add(10, y)); // not point-free

这个不是point-free风格可是我以为还行。可是如今我再也不仅仅组合函数。我在写一个新函数。一样若是这个函数更复杂，例如，我想使用一些其余的东西来组合mult5AfterAdd10，我真的会遇到麻烦。

因为咱们不能将这个两个函数对接将会出现函数组合的做用受限。这太糟糕了，由于函数组合是如此强大。

若是咱们能提早给add函数一个参数而后在调用 mult5AfterAdd10 时获得第二个参数那就更好了。这种转化咱们叫作 柯里化。

柯里化 (Currying)

Currying 又称部分求值。一个 Currying 的函数首先会接受一些参数，接受了这些参数以后，该函数并不会当即求值，而是继续返回另一个函数，刚才传入的参数在函数造成的闭包中被保存起来。待到函数被真正须要求值的时候，以前传入的全部参数都会被一次性用于求值

上例咱们在组合函数 mult5和 add(in) 时遇到问题的是，mult5 使用一个参数，add 使用两个参数。咱们能够经过限制全部函数只取一个参数来轻松地解决这个问题。我只需编写一个使用两个参数但每次只接受一个参数的add函数，函数柯里化就是帮咱们这种工做的。

柯里化函数一次只接受一个参数。

咱们先赋值 add 的第1个参数，而后再组合上 mult5，获得 mult5AfterAdd10 函数。当 mult5AfterAdd10 函数被调用的时候，add 获得了它的第 2 个参数。

JavaScript 实现方式以下：

var add = x => y => x + y

此时的 add 函数前后分两次获得第 1 个和第 2 个参数。具体地说，add函数接受单参x，返回一个也接受单参 y的函数，这个函数最终返回 x+y 的结果。

如今能够利用这个 add 函数来实现一个可行的 mult5AfterAdd10* :

var compose = (f, g) => x => f(g(x));
var mult5AfterAdd10 = compose(mult5, add(10));

compose 有两个参数 f 和 g，而后返回一个函数，该函数有一个参数 x，并传给函数 f，当函数被调用时，先调用函数 g,返回的结果做为函数 f的参数。

总结一下，咱们到底作了什么？咱们就是将简单常见的add函数转化成了柯里化函数，这样add函数就变得更加自由灵活了。咱们先将第1个参数10输入，而当mult5AfterAdd10函数被调用的时候，最后1个参数才有了肯定的值。

柯里化与重构(Curring and Refactoring)

函数柯里化容许和鼓励你分隔复杂功能变成更小更容易分析的部分。这些小的逻辑单元显然是更容易理解和测试的，而后你的应用就会变成干净而整洁的组合，由一些小单元组成的组合。

例如，咱们有如下两个函数，它们分别将输入字符串用单花括号和双花括号包裹起来：

bracketed = function (str) {
  retrun "{" + str + "}"
}
    
doubleBracketed = function (str) {
  retrun "{{" + str + "}}"
}

调用方式以下：

var bracketedJoe =  bracketed('小智')

var doubleBracketedJoe =  doubleBracketed('小智')

能够将 bracket 和 doubleBracket 转化为更变通的函数：

generalBracket = function( prefix , str ,suffix ) {
  retrun  prefix ++ str ++ suffix
}

但每次咱们调用 generalBracket 函数的时候，都得这么传参：

var bracketedJoe = generalBracket("{", "小智", "}")

var doubleBracketedJoe = generalBracket("{{", "小智", "}}")

以前参数只须要输入1个，但定义了2个独立的函数；如今函数统一了，每次却须要传入3个参数,这个不是咱们想要的，咱们真正想要的是一箭双鵰。

由于生成小括号双括号功能但一，从新调整一下 咱们将 generalBracket 三个参数中的 prefix，str 各柯里化成一个函数，以下：

generalBracket = function( prefix ) {
  return  function( suffix ){
      return function(str){
          return prefix + str + suffix
      }
  }
}

这样，若是咱们要打印单括号或者双括号，以下：

// 生成单括号
var bracketedJoe = generalBracket('{')('}')
bracketedJoe('小智') // {小智}

// 生成双括号
var bracketedJoe = generalBracket('{{')('}}')
bracketedJoe('小智') // {{小智}}

常见的函数式函数(Functional Function)

函数式语言中3个常见的函数：Map,Filter,Reduce。

以下JavaScript代码：

for (var i = 0; i < something.length; ++i) {
      // do stuff
 }

这段代码存在一个很大的问题，但不是bug。问题在于它有不少重复代码(boilerplate code)。若是你用命令式语言来编程，好比Java，C#，JavaScript，PHP，Python等等，你会发现这样的代码你写地最多。这就是问题所在。

如今让咱们一步一步的解决问题，最后封装成一个看不见 for 语法函数：

先用名为 things 的数组来修改上述代码：

var things = [1, 2, 3, 4];
for (var i = 0; i < things.length; ++i) {
    things[i] = things[i] * 10; // 警告：值被改变!
}
console.log(things); // [10, 20, 30, 40]

这样作法很不对，数值被改变了！

在从新修改一次：

var things = [1, 2, 3, 4];
var newThings = [];
for (var i = 0; i < things.length; ++i) {
    newThings[i] = things[i] * 10;
}
console.log(newThings); // [10, 20, 30, 40]

这里没有修改things数值，但却却修改了newThings。暂时先无论这个，毕竟咱们如今用的是 JavaScript。一旦使用函数式语言，任何东西都是不可变的。

如今将代码封装成一个函数，咱们将其命名为 map，由于这个函数的功能就是将一个数组的每一个值映射(map)到新数组的一个新值。

var map = (f, array) => {
    var newArray = [];
    for (var i = 0; i < array.length; ++i) {
        newArray[i] = f(array[i]);
    }
    return newArray;
};

函数 f 做为参数传入，那么函数 map 能够对 array 数组的每项进行任意的操做。

如今使用 map 重写以前的代码：

var things = [1, 2, 3, 4];
var newThings = map(v => v * 10, things);

这里没有 for 循环！并且代码更具可读性，也更易分析。

如今让咱们写另外一个常见的函数来过滤数组中的元素:

var filter = (pred, array) => {
    var newArray = [];
for (var i = 0; i < array.length; ++i) {
        if (pred(array[i]))
            newArray[newArray.length] = array[i];
    }
    return newArray;
};

当某些项须要被保留的时候，断言函数 pred 返回TRUE，不然返回FALSE。

使用过滤器过滤奇数:

var isOdd = x => x % 2 !== 0;
var numbers = [1, 2, 3, 4, 5];
var oddNumbers = filter(isOdd, numbers);
console.log(oddNumbers); // [1, 3, 5]

比起用 for 循环的手动编程，filter 函数简单多了。最后一个常见函数叫reduce。一般这个函数用来将一个数列归约(reduce)成一个数值，但事实上它能作不少事情。

在函数式语言中，这个函数称为 fold。

var reduce = (f, start, array) => {
    var acc = start;
    for (var i = 0; i < array.length; ++i)
        acc = f(array[i], acc); // f() 有2个参数
    return acc;
});

reduce函数接受一个归约函数 f，一个初始值 start，以及一个数组 array。

这三个函数，map,filter,reduce能让咱们绕过for循环这种重复的方式，对数组作一些常见的操做。但在函数式语言中只有递归没有循环，这三个函数就更有用了。附带提一句，在函数式语言中，递归函数不只很是有用，还必不可少。

原文：

https://medium.com/@cscalfani...
https://medium.com/@cscalfani...

编辑中可能存在的bug无法实时知道，过后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具Fundebug。

你的点赞是我持续分享好东西的动力，欢迎点赞！

欢迎加入前端你们庭，里面会常常分享一些技术资源。