JS-Functional

引言

函数式编程的历史已经很悠久了，但是最近几年却频繁的出现在大众的视野，很多不支持函数式编程的语言也在积极加入闭包，匿名函数等非常典型的函数式编程特性。大量的前端框架也标榜自己使用了函数式编程的特性，好像一旦跟函数式编程沾边，就很高大上一样，而且还有一些专门针对函数式编程的框架和库，比如：RxJS、cycleJS、ramdaJS、lodashJS、underscoreJS等。函数式编程变得越来越流行，掌握这种编程范式对书写高质量和易于维护的代码都大有好处，所以我们有必要掌握它。

面向对象编程(OOP)通过封装变化使得代码更易理解。 函数式编程(FP)通过最小化变化使得代码更易理解。 -- Michacel Feathers（Twitter）

JavaScript 是一种拥有很多共享状态的动态语言，慢慢的，代码就会积累足够的复杂性，变得笨拙难以维护。面向对象设计能帮我们在一定程度上解决这个问题，但是还不够。

由于有很多的状态，所以处理数据流和变化的传递显得尤为重要，不知道你们知道响应式编程与否，这种编程范式有助于处理 JavaScript 的异步或者事件响应。总之，当我们在设计应用程序的时候，我们应该考虑是否遵守了以下的设计原则。

• 可扩展性--我是否需要不断地重构代码来支持额外的功能？
• 易模块化--如果我更改了一个文件，另一个文件是否会受到影响？
• 可重用性--是否有很多重复的代码？
• 可测性--给这些函数添加单元测试是否让我纠结？
• 易推理性--我写的代码是否非结构化严重并难以推理？

我这能这么跟你说，一旦你学会了函数式编程，这些问题迎刃而解，本来函数式编程就是这个思想，一旦你掌握了函数式，然后你再学习响应式编程那就比较容易懂了。

什么是函数式编程

维基百科定义：

函数式编程（英语：functional programming），又称泛函编程，是一种编程范式，它将电脑运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。

简单来说，函数式编程是一种强调以函数使用为主的软件开发风格。函数式编程的目的是使用函数来抽象作用在数据之上的控制流和操作，从而在系统中消除副作用并减少对状态的改变。

下面我们通过例子来简单的演示一下函数式编程的魅力。

现在的需求就是输出在网页上输出 “Hello World”。

可能初学者会这么写。

document.querySelector('#msg').innerHTML = '<h1>Hello World</h1>'

这个程序很简单，但是所有代码都是死的，不能重用，如果想改变消息的格式、内容等就需要重写整个表达式，所以可能有经验的前端开发者会这么写。

function printMessage(elementId, format, message) {
    document.querySelector(elementId).innerHTML = `<${format}>${message}</${format}>`
}

printMessage('msg', 'h1', 'Hello World')

这样确实有所改进，但是仍然不是一段可重用的代码，如果是要将文本写入文件，不是非 HTML，或者我想重复的显示 Hello World。

那么作为一个函数式开发者会怎么写这段代码呢？

const printMessage = compose(addToDom('msg', h1, echo))

printMessage('Hello World')

解释一下这段代码，其中的 h1 和 echo 都是函数，addToDom 很明显也能看出它是函数，那么我们为什么要写成这样呢？看起来多了很多函数一样。

其实我们是将程序分解为一些更可重用、更可靠且更易于理解的部分，然后再将他们组合起来，形成一个更易推理的程序整体，这是我们前面谈到的基本原则。

compose 简单解释一下，他会让函数从最后一个参数顺序执行到第一个参数，compose 的每个参数都是函数，不明白的可以查一下，在 redux 的中间件部分>这个函数式精华。

可以看到我们是将一个任务拆分成多个最小颗粒的函数，然后通过组合的方式来完成我们的任务，这跟我们组件化的思想很类似，将整个页面拆分成若干个组件，然后拼装起来完成我们的整个页面。在函数式编程里面，组合是一个非常非常非常重要的思想。

我们现在再改变一下需求，现在我们需要将文本重复三遍，打印到控制台。

var printMessaage = compose(console.log, repeat(3), echo)

printMessage(‘Hello World’)

可以看到我们更改了需求并没有去修改内部逻辑，只是重组了一下函数而已。

可以看到函数式编程在开发中具有声明模式。为了充分理解函数式编程，我们先来看下几个基本概念。

• 声明式编程
• 纯函数
• 引用透明
• 不可变性

声明式编程

函数式编程属于声明是编程范式：这种范式会描述一系列的操作，但并不会暴露它们是如何实现的或是数据流如何传过它们。

我们所熟知的 SQL 语句就是一种很典型的声明式编程，它由一个个描述查询结果应该是什么样的断言组成，对数据检索的内部机制进行了抽象。

我们再来看一组代码再来对比一下命令式编程和声明式编程。

// 命令式方式
var array = [0, 1, 2, 3]
for(let i = 0; i < array.length; i++) {
    array[i] = Math.pow(array[i], 2)
}

array; // [0, 1, 4, 9]

// 声明式方式
[0, 1, 2, 3].map(num => Math.pow(num, 2))

可以看到命令式很具体的告诉计算机如何执行某个任务。

而声明式是将程序的描述与求值分离开来。它关注如何用各种表达式来描述程序逻辑，而不一定要指明其控制流或状态关系的变化。

为什么我们要去掉代码循环呢？循环是一种重要的命令控制结构，但很难重用，并且很难插入其他操作中。而函数式编程旨在尽可能的提高代码的无状态性和不变性。要做到这一点，就要学会使用无副作用的函数--也称纯函数

纯函数

纯函数指没有副作用的函数,相同的输入有相同的输出。下面的情况就不是纯函数：

• 改变一个全局的变量、属性或数据结构
• 改变一个函数参数的原始值
• 处理用户输入
• 抛出一个异常
• 屏幕打印或记录日志
• 查询 HTML 文档，浏览器的 Cookie 或访问数据库

举一个简单的例子

var counter = 0
function increment() {
    return ++counter;
}

这个函数就是不纯的，它读取了外部的变量，可能会觉得这段代码没有什么问题，但是我们要知道这种依赖外部变量来进行的计算，计算结果很难预测，你也有可能在其他地方修改了 counter 的值，导致你 increment 出来的值不是你预期的。

对于纯函数有以下性质：

• 仅取决于提供的输入，而不依赖于任何在函数求值或调用间隔时可能变化的隐藏状态和外部状态。
• 不会造成超出作用域的变化，例如修改全局变量或引用传递的参数。

但是在我们平时的开发中，有一些副作用是难以避免的，与外部的存储系统或 DOM 交互等，但是我们可以通过将其从主逻辑中分离出来，使他们易于管理。

现在我们有一个小需求：通过 id 找到学生的记录并渲染在浏览器(在写程序的时候要想到可能也会写到控制台，数据库或者文件，所以要想如何让自己的代码能重用)中。

// 命令式代码

function showStudent(id) {
    // 这里假如是同步查询
    var student = db.get(id)
    if(student !== null) {
          // 读取外部的 elementId
          document.querySelector(`${elementId}`).innerHTML = `${student.id},${student.name},${student.lastname}`
    } else {
        throw new Error('not found')
    }
}

showStudent('666')

// 函数式代码

// 通过 find 函数找到学生
var find = curry(function(db, id) {
    var obj = db.get(id)
    if(obj === null) {
        throw new Error('not fount')
    }

    return obj
})

// 将学生对象 format
var csv = (student) => `${student.id},${student.name},${student.lastname}`

// 在屏幕上显示
var append = curry(function(elementId, info) {
    document.querySelector(elementId).innerHTML = info
})

var showStudent = compose(append('#student-info'), csv, find(db))

showStudent('666')

curry (柯里化):是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

可以看到函数式代码通过较少这些函数的长度，将 showStudent 编写为小函数的组合。这个程序还不够完美，但是已经可以展现出相比于命令式的很多优势了。

• 灵活。有三个可重用的组件
• 声明式的风格，给高阶步骤提供了一个清晰视图，增强了代码的可读性
• 另外是将纯函数与不纯的行为分离出来。

我们看到纯函数的输出结果是一致的，可预测的，相同的输入会有相同的返回值，这个其实也被称为引用透明。

引用透明

引用透明是定义一个纯函数较为正确的方法。纯度在这个意义上表面一个函数的参数和返回值之间映射的纯的关系。如果一个函数对于相同的输入始终产生相同的结果，那么我们就说它是引用透明。

这个概念很容易理解，简单的举两个例子就行了。

// 非引用透明
var counter = 0

function increment() {
    return ++counter
}

// 引用透明
var increment = (counter) => counter + 1

其实对于箭头函数在函数式编程里面有一个高大上的名字，叫 lambda 表达式，对于这种匿名函数在学术上就是叫 lambda 表达式，现在在 Java 里面也是支持的。

不可变数据

不可变数据是指那些创建后不能更改的数据。与许多其他语言一样，JavaScript 里有一些基本类型(String,Number 等)从本质上是不可变的，但是对象就是在任意的地方可变。

考虑一个简单的数组排序代码：

var sortDesc = function(arr) {
    return arr.sort(function(a, b) {
        return b - a
    })
}

var arr = [1, 3, 2]
sortDesc(arr) // [1, 2, 3]
arr // [1, 2, 3]

这段代码看似没什么问题，但是会导致在排序的过程中会产生副作用，修改了原始引用，可以看到原始的 arr 变成了 [1, 2, 3]。

总结

使用纯函数的代码绝不会更改或破坏全局状态，有助于提高代码的可测试性和可维护性

函数式编程采用声明式的风格，易于推理，提高代码的可读性。

函数式编程将函数视为积木，通过一等高阶函数来提高代码的模块化和可重用性。

可以利用响应式编程组合各个函数来降低事件驱动程序的复杂性(这点后面可能会单独拿一篇来进行讲解)。