函数式编程思想在最近几年变得异常流行，让我们抛开语言本身，一起来看下什么是函数式编程，以及如何应用于js的代码设计。
编程语言分为：命令式和声明式。函数式编程就属于声明式编程；声明式编程特征如下：
命令式编程是行动导向，因而算法是显性而目标是隐形的；
声明式编程是目标驱动，因而目标是显性而算法是隐形的；
举个🌰：
// 命令式
let leaders = [];
for(let i = 0; i < teams.length; i++){
leaders.push(teams[i].leader)
}
// 声明式
let keaders = teams.map(item => item.leader)
通过上面的例子大家应该很明显的感觉到声明式和命令式的区别了吧，本文讲的是属于声明式的函数式编程，如果对命令式编程感兴趣的话推荐看看汇编，毕竟计算机底层就是命令式编程来完成的而汇编最为接近。
函数式编程，又称泛函编程，是一种编程范式，它将电脑运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。
函数式编程，又称泛函编程，是一种编程范式，它将电脑运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。
“范”即典范、模范。“范式”即模式方法；“函数式编程”就是使用函数来编程的一种编程模式。
常见的编程范式有：函数式编程、面向对象编程、面向过程编程等等；对我们前端小伙伴来说最熟悉的js就是面向对象编程思想，它和函数式编程思想的区别如下：
面向对象 (OOP)：可理解为对数据封装。通过这种封装使代码更易于理解；
函数式编程 (FP)：是一种抽象过程的思维，即对动作进行抽象，通过最少的改变使得代码更易于理解维护；
简单来说区别就是面向对象关注数据，而函数式编程则关注过程即动作。
- 一级公民函数：赋予函数作为数据值的能力，即普通变量能做什么函数就可以做什么，例如函数作为入参返回值等；
- 高阶匿名函数：函数和lambda 语法的应用使高阶函数变得易于实现；
- 闭包：不赘述；
- 纯粹性：不允许任何副作用，如改变外部变量等；
- 不可变性：不允许用表达式来产生新的数据结构来代替一个已存在的数据结构；
- 递归：不赘述；
以上是函数式编程的特点。对于前端必用的Javascript语言来说除了纯粹性和不可变性以外的特性都是支持的。
对于不可变性来说，js是个弱类型语言需要额外的支持，现在有一些三方库如Immutable.js等可以提供支持；
对于纯粹性来说，我们需要制定一些规范进行支持；
函数式编程是将电脑运算视为数学上的函数计算,数学上的函数就是纯函数，就是函数式编程的基础 。下图就是一个数学上的函数：
函数是不同数值之间的特殊关系：每一个输入值返回且只返回一个输出值即一个或多个x可对应一个y；
而下图这种一个输入（x）对应多个输出（y）的关系就不是函数：
- 相同输入必定返回相同输出；
- 不会修改以参数形式传递过来的对象；
- 它不依赖于函数外部任何状态或数据的变化，必须只依赖于其输入参数；
- 不会产生任何可观察的副作用，例网络请求，IO读写或dom操作查询、写日志、在屏幕输出、写文件、触发任何外部进程、调用另一个有副作用的函数等。
花一分钟再记一遍纯函数的特点；
我们来测试一下，以下四个函数哪些是纯函数？
// 函数一
function add (x, y) {
return x + y
}
// 函数二
let count = 0;
function addCount () {
count ++;
}
// 函数三
function random (min, max) {
return Math.floor(Math.random() + (max - min)) + min;
}
// 函数四
function setColor (el, color) {
el.style.color = color;
}
想好了么？答案如下：
1、是纯函数、无副作用；
2、不是纯函数、输出不确定、有副作用（修改了外部的变量）；
3、不是纯函数，输出不确定，无副作用；
4、不是纯函数，修改了dom，对外有副作用（改变了dom的颜色）；
我们再来一个🌰，下面change函数是纯函数么？
function setColor (el, color) {
el.style.color = color;
}
function change (fn, els, color) {
els.map(item => (fn(item, color)))
}
// els为dom集合
change(setColor, els, 'blue')
答案：
不是，虽然change函数本身没有修改dom，但是，我们强调一点，纯函数的依赖必须是无影响的，也就是说在内部任何操作都不能对外造成影响，但是setColor函数改变了dom的样式，所以它不是纯函数。那么如何将其转化成一个纯函数呢，我们来看下一个概念：柯里化
部分应用和复合是函数式编程的重要特征。在采用命令式编程的时候，每当我们需要抽象出一个新功能的时候，就相应的定义一个函数来实现。但是在函数式编程中，我们就可以通过部分应用和复合来使用现有函数拼接成新的函数，类似于搭积木。柯里化就是部分应用的例子。柯里化（currying）是把接受多个参数的函数转换成接受一个单一参数（函数的第一个参数）的函数，并且返回接受余下参数并且返回结果的新函数，简言之就是把一个多参数函数转化成单参数函数。听起来很乱吧，我们看个🌰：
// 柯里化前
function add (x, y) {
return x + y;
}
add(1, 2)
// 柯里化后
function addX (y) {
return function (x) {
return x + y
}
}
add(2)(1)
通过给函数addX传递参数y生成了一个可以做加法运算并返回结果的新函数。中途返回生成的函数 是一种对参数的“缓存”。
我们来看看之前不纯change函数如何提纯。
function setColor (el, color) {
el.style.color = color;
}
function change (fn, els, color) {
els.map(item => (fn(item, color)))
}
// els为dom集合
change(setColor, els, 'blue')
每次调用change函数的时候我们都希望参数 fn 的值setColor，因为我想把不同的色给到不同的dom上。改写后如下：
function change(fn) {
return fucntion (els, color) {
Array.from(els).map(item => fn(item.color))
}
}
let newSetColor = change(setColor)
newSetColor(els, 'blue')
改写后无论fn是什么，return出的都是唯一确定的函数，在change中只是执行return语句，setColor很熟并未在change上执行，所以change对外并没有产生影响。这是change就是一个纯函数啦~
之前说过部分应用和复合是函数式编程的重要特征，部分应用说完了，让我们看看函数的复合。
如果一个变量a=1，我们希望先执行+3（F函数），然后再+5（G函数），最后得到结果是20；那么可以先将F、G合并成K操作，之后a直接执行K就可以得到a=20，会写为G(F(1))；
function F (x) {
return x + 3
}
function G (x) {
return x * 5
}
// 输出20
G(F(1));
现在，如果我们要做一系列操作，先+1再+2再+3再+4再+5再+4再+6.。。要写成A(B(C(D(E(F(...))))))么？
正常情况下是不会出现这种"神仙代码"的，通过代码复合我们可以很轻易解决“洋葱代码”的问题，现在来实现一个compose方法来进行复合；
redux中也有组合函数的实现，精华在最后一句。
日常开发中，我们针对工程代码一定会有以下思考：
- 这个组件是否需要重构才能实现新来的需求？
- 改了这里，别的方法会不会受到影响？
- 代码是否冗余？
- 如何给函数添加单元测试？
- 代码是否清晰，方便别人接手二次开发？
通过本文可以发现函数式编程可以很好的解决以上问题。虽然说了函数式编程的各种好处，不过还是存在以下问题：
- 由于函数式编程大规模使用高阶函数，所以他比指令时变成需要多得多的内存和处理能力；
- 容易产生过度设计、降低代码的可读性；
- 对开发者的程序设计能力有一定要求；
- 代码量会有明显上升；
OOP和FP不是截然对立的思维， 在程序编写中实际上会相互渗透、合理的结合使用。
感谢阅读。
以上。
网友评论