面向过程编程：简单解释就是按照步骤来实现。

面向行为编程：它是函数式编程的衍生范型，将电脑运算平展为一系列的变化，并且避免使用程序指令以及堆叠的对象。

面向对象编程：它的思维方式是把现实世界中的事物抽象成程序世界中的类和对象，然后通过封装，继承和多态来演示事物之间的联系。

面向函数式编程：它的思维方式是把现实世界中的事物和事物之间的联系，抽象到程序世界中。

函数式编程特点：

程序的本质：就是利用计算机的计算能力将 输入 转化成对应的 输出 。

函数式编程中的 函数 指的不是编程语言里的函数，而是数学意义上的映射关系。比如 y=sin(x) 中 x 和 y 值的映射关系。

纯函数：相同的输入获得相同的输出（无副作用）。

函数式编程就是对 数据(函数) 映射关系的抽象。 举个例子：

对于耗时的操作，可对执行结果 缓存 ，提高代码性能。

方便测试，降低排查问题的难度。

在多线程环境下（web worker），可对共享内存数据任意执行。

不可变

已柯里化（auto-curried）

迭代前置（iteratee-first）

数据后置（>例如:（CAN YOU FEEL MY WORLD --> can-you-feel-my-world）

import _ from 'lodash'

const str = "CAN YOU FEEL MY WORLD"
const split = _.curry((sep, str)=>_.split(str, sep))
const join = _.curry((sep, arr)=>_.join(arr, sep))
const map = _.curry((fn, arr)=>_.map(arr, fn))

const f = _.flow(split(' '),map(_.toLower), join('-'))

f(str) //'can-you-feel-my-world'

我们在使用 lodash 时，做能很多额外的转化动作，那我们试试 fp 模块吧。

import fp from 'lodash/fp'const str = "CAN YOU FEEL MY WORLD"const f = fp.flow(fp.split(' '),fp.map(fp.toLower), fp.join('-'))f(str) //'can-you-feel-my-world'

这种编程方式我们称之为 PointFree，它有 3 个特点：

// The `lodash/map` iteratee receives three arguments:// (value, index|key, collection)_.map(['6', '8', '10'], parseInt);// ➜ [6, NaN, 2]// The `lodash/fp/map` iteratee is capped at one argument:// (value)fp.map(parseInt)(['6', '8', '10']);// ➜ [6, 8, 10]

FP 中的 map 方法和 lodash 中的 map 方法参数的个数是不同的。

什么是函数组合

弄明白了柯里化，我们开始函数组合了。

开发过程中，有的同学使用 高阶函数 和 高阶组件 的时候很容易写出洋葱代码。

withRouter(Form.create()(connect(({ model }) => ({ status: model.status}))(Index)))

这段代码通常我们会使用 装饰器 (decorator)的方案优化掉。

withRouter@Form.create()@connect(({ model }) => ({  status: model.status,}))Index

但是 装饰器 只适用于组件 Component，对于拥抱 hooks 的函数组件并不适用。

在 redux 和 lodash 都有函数组合的方法提供，分别是 compose 和 flow， fn = compose(f1,f2,f3) ，他可以帮助我们将上面的洋葱代码改造成管道的形式。我们需要注意管道的执行顺序，默认都是从右到左执行。compose 的实现也是特别的简单的。

function compose(...args){  return function(value){    return args.reverse().reduce(function(acc,fn){      return fn(acc)    }, value)  }}// es6const compose = (...args) => value => args.reverse().reduce((acc,fn) => fn(acc), value)

对于函数组合，我们也可以随时插入一些用来调试的函数。

const log = curry((label, x) => { console.log(label, x); return x; });const y = compose(c, log('after a'),b, log('after a'), a);

函子（Functor）

到目前来说，我们已经了解了一定的函数式编程的基础，但是我们还没有演示在函数式编程中如何把副作用控制在可控范围内、异常处理、异步操作等。在处理副作用之前，先聊下函子。

什么是函子？

容器：包容值和值的变形关系（这个变形关系就是函数）。

函子：一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法， map 方法可以运行一个函数对值进行处理（变形关系）。

下面我们通过一段代码来看一下：

class Container{  constructor(value){    //私有的值 不对外公布    this._value = value  }  //接收一个处理值的函数  map(fn){// map 是一个契约名称 fn 需要是一个纯函数    //返回一个新的函子    return new Container(fn(this._value))  }}new Container(1)  .map(x => x + 1)  .map(x => x * x)

这样我们可以通过创建时给定初始值，map 方法来修改这个值。但是一直使用 new 关键字，让代码看起来很面向对象，让我们来改造一下。

class Container{  //of 的作用就是给我们返回一个函子对象，我们把 new 关键字封装在里面  static of(value){    return new Container(value)  }    constructor(value){    this._value = value  }    map(fn){    return new Container(fn(this._value))  }}new Container.of(1)  .map(x => x + 1)  .map(x => x * x)

但是这样的一个基础的函子还是存在许多的问题，比如初始化的值与操作的方法不匹配、异常处理、可控副作用、异步执行等。因此衍生出一系列的函子来解决这些问题，这里罗列一下对应的函子和它们解决的问题：

主流框架、库中的应用

在 Redux 中，要写一个中间件代码大致是这样的：

const middleware = store => next => action => {  // 具体实现};

其实对于最后的实现主体来说无非都是拿到 storenextaction 三个参数而已。完全可以用下面的方式定义：

(store, next, action) => {...}

但是作者 Dan Abramov 还是采用了更具有函数式特性的方式去定义。

另外，react 16.8 版本开始正式的支持了 hooks。hooks 对比类组件的写法有几处优势这也刚好是符合函数式编程的特性的。

class Example extends Component {  componentDidMount() {    //注册事件    //请求Api    //设置状态 等等  }  componentWillUnmount(){    //取消一些监听事件  }}

而 Hooks（主要是 useEffect）取代了生命周期的概念，让代码的依赖逻辑更接近本质。 函数式编程为组件的编写提供了更高的灵活度与可读性 。

总结

函数式编程是一种范式、一种思想、一种约定。他有着一定的优势，更高的可组合性，灵活性以及容错性。但是在实际应用中是很难用函数式去表达的，我们应该将其当做我们现有储备的一种补充，而并非最优解去看待。以往的开发过程，我们可能习惯了用变量存储和追踪程序的状态，不停的在一些节点打印语句来观察程序的过程，现代的 JavaScript 库已经开始尝试拥抱函数式编程的概念以获取这些优势来降低系统复杂度。统一存储管理数据，将程序的运行状态置于可预见状态里。 React、Rxjs、Redux 等 js 库都是这一理念的最佳实践者。