JavaScript 函数式编程（一）

说到函数式编程，想必各位或多或少都有所耳闻，然而对于函数式的内涵和本质可能又有些说不清楚。

所以本文希望针对工程师，从应用（而非学术）的角度将函数式编程相关思想和实践（以 JavaScript 为例）分享给大家。

文章内容其实主要来自于在下阅读各类参考文献后的再整理，所以有什么错误也希望大家帮忙斧正~

slide 地址

一、什么是函数式编程？

Functional programming is a programming paradigm
1.treats computation as the evaluation of mathematical functions
2.avoids changing-state and mutable data
by wikipedia

从以上维基百科的定义来看有三个要点

Programming Paradigm
Mathematical Functions
Changing-state And Mutable Data

下面分别解析一下以上要点。

1.1.什么是编程范式？

from Programming paradigms

编程范式从概念上来讲指的是编程的基本风格和典范模式。

换句话说其实就是 程序员 对于如何使用编程来解决问题的 世界观和方法论 。

如果把一门编程语言比作兵器，它的语法、 工具 和技巧等是招法，那么它采用的编程范式也就是是内功心法。

一种范式可以在不同的语言中实现，一种语言也可以同时支持多种范式。例如 JavaScript 就是一种多范式的语言。

1.2.什么是数学函数？

一般的，在一个变化过程中，假设有两个变量 x、y，如果对于任意一个 x 都有唯一确定的一个y和它对应，那么就称 x 是自变量，y 是 x 的函数。x 的取值范围叫做这个函数的定义域，相应 y 的取值范围叫做函数的值域。

以上定义，在初中数学咱们都应该学过...

换句话说，函数只是两种数值之间的关系：输入和输出。

尽管每个输入都只会有一个输出，但不同的输入却可以有相同的输出。下图展示了一个合法的从 x 到 y 的函数关系；

与之相反，下面这张图表展示的就不是一种函数关系，因为输入值 5 指向了多个输出：

1.2.1.什么是纯函数（Pure Functions）？

纯函数是这样一种函数，对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。

根据定义可以看出纯函数其实就是数学函数，即表示从输入的参数到输出结果的映射。

而没有副作用的纯函数显然都是引用透明的。

引用透明性（Referential Transparency）指的是，如果一段代码在不改变整个程序行为的前提下，可以替换成它的执行结果。

const double = x => x * 2
const addFive = x => x + 5
const num = double(addFive(10))

num === double(10 + 5)
    === double(15)
    === 15 * 2
    === 30
复制代码

不过说了半天，副作用又是啥...？

1.2.2.什么是副作用（Side Effects）？

副作用是在计算的过程中，系统状态的一种变化，或者与外部世界进行的可观察的交互。

副作用可能包含，但不限于一下行为：

• 更改文件系统
• 往数据库中插入记录
• 发送一个 http 请求
• 改变数据
• 打印 log
• 获取用户输入
• DOM 查询
• 访问系统状态
• ...

只要是跟函数外部环境发生的交互就都是副作用——这一点可能会让你怀疑无副作用编程的可行性。

函数式编程的哲学就是假定副作用是造成不正当行为的主要原因。

当然这并不是说，要禁止使用一切副作用，而是说，要让它们在可控的范围内发生。

在后面讲到函子（functor）和单子（monad）的时候我们会学习如何控制它们。

1.2.3.纯函数的好处都有啥~~（谁说对了就给他）~~？

面向对象语言的问题是，它们永远都要随身携带那些隐式的环境。你只需要一个香蕉，但却得到一个拿着香蕉的大猩猩...以及整个丛林

by Erlang 作者：Joe Armstrong

所以使用纯函数将会有以下好处：

• 可缓存性（Cacheable）
• 可移植性／自文档化（Portable / Self-Documenting）
• 可测试性（Testable）
• 合理性（Reasonable）
• 并行代码（Parallel Code）

1.3.为什么要避免改变状态和可变数据？

Shared mutable state is the root of all evil

共享可变状态是万恶之源

by Pete Hunt

const obj = { val: 1 }
someFn(obj)
console.log(obj) // ???
复制代码

from Building Scalable, Highly Concurrent & Fault Tolerant Systems - Lessons Learned

1.4.原教旨函数式 VS 温和派函数式？

说到函数式编程语言，大家的第一反应可能是 Haskell、OCaml、Lisp、Erlang、Scala、F#...

因为它们可能有以下特性：

• 函数是“一等公民”（first class）
• 不可变数据
• 使用递归而不是循环
• 柯里化
• 惰性求值
• 代数数据类型
• 模式匹配
• ...

而说到 JavaScript，很多人可能第一反应认为这是一门面向对象的语言。

但是想想前面说的：函数式编程只是一种编程范式，而编程范式就像“内功心法”，所以与以上这些语言特性不完全相关，反而与你自己的编程思维（即世界观和方法论）更加相关。

在函数式方面，由于 JavaScript 支持高阶函数、匿名函数、函数是一等公民、闭包、解构（模式匹配）等特性，所以它也能支持函数式编程范式。（虽然不是那么的原教旨函数式，但还基本够用~尤其是 ES6 新增的箭头函数等特性~还有各种类库 ）

事实上 JavaScript 是一门基于原型（prototype-based）的 多范式 语言。

1.5.1.不可变数据结构

JavaScript 一共有 6 种原始类型（包括 ES6 新添加的 Symbol 类型），它们分别是 Boolean，Null，Undefined，Number，String 和 Symbol。 除了这些原始类型，其他的类型都是 Object，而 Object 都是可变的。

1.5.2.惰性求值

惰性（lazy）指求值的过程并不会立刻发生。

比如一些数学题，我们可能一开始并不需要把所有表达式都求值，这样可以在计算的过程中将一些表达式消掉。

惰性求值是相对于**及早求值（eager evaluation）**的。

比如大部分语言中，参数中的表达式都会被先求值，这也称为 应用序 语言。

比如看下面这样一个 JavaScript 的函数：

wholeNameOf(getFirstName(), getLastName())
复制代码

getFirstName 与 getLastName 会依次执行，返回值作为 wholeNameOf 函数的参数， wholeNameOf 函数最后才被调用。

另外，对于数组操作时，大部分语言也同样采用的是应用序。

[1, 2, 3, 4].map(x => x + 1)
复制代码

所以，这个表达式立刻会返回结果 [2, 3, 4, 5] 。

当然这并不是说 JavaScript 语言使用应用序有问题，但是没有提供惰性序列的支持就是 JavaScript 的不对了。如果 map 一个大数组后我们发现其实只需要前 10 个元素时，去计算所有元素就显得是多余的了。

1.5.3.函数组合

面向对象通常被比喻为名词，而函数式编程是动词。面向对象抽象的是对象，对于对象的的描述自然是名词。

面向对象把所有操作和数据都封装在对象内，通过接受消息做相应的操作。比如，对象 Kitty，它们可以接受“打招呼”的消息，然后做相应的动作。

而函数式的抽象方式刚好相反，是把动作抽象出来，比如“打招呼”就是一个函数，而函数参数就是作为数据传入的 Kitty（即 Kitty 进入函数“打招呼”，出来的应该是 Hello Kitty）。

面向对象可以通过继承和组合在对象之间分享一些行为或者说属性，函数式的思路就是通过 组合 已有的函数形成一个新的函数。

然而 JavaScript 语言虽然支持高阶函数，但是并没有一个原生的利于组合函数产生新函数的方式。而这些强大的函数组合方式却往往被类似 Underscore，Lodash 等工具库的光芒掩盖掉（后面会说到这些库的问题）。

1.5.4.尾递归优化

函数式编程语言中因为不可变数据结构的原因，没办法实现循环。所以都是通过递归来实现循环。

然而递归使用不当很容易栈溢出（Stack Overflow），所以一般采用尾递归的方式来优化。

虽然 ES6 规范中规定了尾递归优化规范，然而提供实现的解释器还非常的少，详情可以查阅这个链接

5.代数类型系统

JavaScript 作为一种弱类型的语言，没有静态类型系统。不过使用一些 TypeScript 等预编译的语言可以作为补充~

二、声明式 VS 命令式

Declarative VS Imperative，这两者的区别简单来说其实就是 What VS How。

2.1.“意识形态”上的区别~

声明式：

• 程序抽象了控制流过程，代码描述的是 —— 数据流：即做什么。
• 更多依赖表达式。

表达式是指一小段代码，它用来计算某个值。表达式通常是某些函数调用的复合、一些值和操作符，用来计算出结果值。

命令式：

• 代码描述用来达成期望结果的特定步骤 —— 控制流：即如何做。
• 频繁使用语句。

语句是指一小段代码，它用来完成某个行为。通用的语句例子包括 for、if、switch、throw，等等……

2.2.举一些栗子:chestnut:...

例1：希望得到一个数组每个数据平方后的和

// 命令式
function mysteryFn (nums) {
  let squares = []
  let sum = 0                           // 1. 创建中间变量

  for (let i = 0; i < nums.length; i++) {
    squares.push(nums[i] * nums[i])     // 2. 循环计算平方
  }

  for (let i = 0; i < squares.length; i++) {
    sum += squares[i]                   // 3. 循环累加
  }

  return sum
}

// 以上代码都是 how 而不是 what...

// 函数式
const mysteryFn = (nums) => nums
  .map(x => x * x)                      // a. 平方
  .reduce((acc, cur) => acc + cur, 0)   // b. 累加
复制代码

例2：希望得到一个数组所有偶数值的一半的平均值

// 命令式
function mysteryFn(nums) {
  let sum = 0
  let tally = 0                         // 1. 创建中间变量

  for (let i = 0; i < nums.length; i++) {
    if (nums[i] % 2 === 0) {            // 2. 循环，值为偶数时累加该值的一半并记录数量
      sum += nums[i] / 2
      tally++
    }
  }

  return tally === 0 ? 0 : sum / tally  // 3. 返回平均值
}

// 函数式
const mysteryFn = (nums) => nums
  .filter(x => x % 2 === 0)             // a. 过滤非偶数
  .map(x => x / 2)                      // b. 折半
  .reduce((acc, cur, idx, { length: len }) => (
    idx < len - 1
      ? acc + cur                       // c. 累加
      : (acc + cur) / length            // d. 计算平均值
  ), 0)
复制代码