函数式编程目前使用范围非常广，常用的框架，语言几乎都能看到它的身影。

  • 前端框架：react、vue 的 hooks 用法。
  • 打包工具：webpack 的 webpack-chain 用法。
  • 工具库：underscore、lodash、ramda。
  • 部署方式：serverless

  • 后端：java、c# 中的 lamda 表达式

    编程范式

    编程范式 指的是一种编程风格，它描述了程序员对程序执行的看法。在编程的世界中，同一个问题，可以站在多个角度去分析解决，这些不同的解决方案就对应了不同的编程风格。
    常见的编程范式有：

  • 命令式编程

    • 面向过程编程：C语言
    • 面向对象编程：C++、C#、java

  • 声明式编程

    • 函数式编程：Haskell

      命令式编程

      命令式编程是使用最广的一个编程风格，它是站在计算机的角度去思考问题，主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。
      由于存在很多需要控制的步骤，所以命令式编程普遍存在以下特点：

  • 控制语句

    • 循环语句：while、for
    • 条件分支语句：if else、switch
    • 无条件分支语句：return、break、continue
  • 变量
    • 赋值语句

根据这些特点，来分析一个命令式编程案例
筛选出数组中为奇数的子集合

  1. const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  2. // 步骤1：定义执行结果变量
  3. let result = [];
  5. // 步骤2：控制程序循环调用
  6. for (let i = 0; i < array.length; i++) {
  7.   // 步骤3：判断筛选条件
  8.   if (array[i] % 2 !== 0) {
  9.     // 步骤4：加入执行结果
  10.     result.push(array[i]);
  11.   }
  12. }
  14. // 步骤5：得到最终的结果 result
  15. console.log(result)

以上代码通过 5 个步骤，实现了数组的筛选，这并没有什么问题，但细心的同学可能会感到疑惑：这样写的代码量太长了，而且并不语义化，只有阅读完每一行的代码，才知道具体执行的是什么逻辑。
没错，这就是命令式编程的典型特点，除此之外，还有以下几点：

  • 命令式编程的每一个步骤都可以由程序员定义，这样可以更精细化、更严谨地控制代码，从而提高程序的性能。
  • 命令式编程的每一个步骤都可以记录中间结果，方便调试代码。

  • 命令式编程需要大量的流程控制语句，在处理多线程状态同步问题时，容易造成逻辑混乱，通常需要加锁来解决。

    声明式编程

    声明式编程 同样是一种编程风格，它通过定义具体的规则，以便系统底层可以自动实现具体功能。主要思想是 告诉计算机应该做什么，但不指定具体要怎么做。
    由于需要定义规则来表达含义，所以声明式编程普遍存在以下特点：

  • 代码更加语义化，便于理解。

  • 代码量更少。
  • 不需要流程控制代码，如：for、while、if 等。

将上文中的数组筛选，用声明式的方式重构一下：

  1. // 筛选出数组中为奇数的子集合
  2. const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  3. const reult = array.filter((item) => item % 2 !== 0);

可以看到，声明式编程没有冗余的操作步骤，代码量非常少，并且非常语义化，当我们读到 filter 的时候，自然而然就知道是在做筛选。
我们再看一个案例：

  1. # 使用 sql 语句，查询 id 为 25 的学生
  2. select * from students where id=25

在上述代码中，我们只是告诉计算机，我想查找 id 为 25 的同学，计算机就能给我们返回对应的数据了，至于是怎么查找出来的，我们并不需要关心，只要结果是正确的即可。
除了上述例子之外，还有很多声明式编程的案例：

  • html 用来声明了网页的内容。
  • css 用来声明网页中元素的外观。
  • 正则表达式，声明匹配的规则。

有了以上几个案例，我们来总结一下声明式编程的优缺点：

  • 声明式编程不需要编写复杂的操作步骤，可以大大减少开发者的工作量。
  • 声明式编程的具体操作都是底层统一管理，可以降低重复工作。
  • 声明式编程底层实现的逻辑并不可控，不适合做更精细化的优化。

    函数式编程

    函数式编程 属于声明式编程中的一种，它的主要思想是 将计算机运算看作为函数的计算，也就是把程序问题抽象成数学问题去解决。
    函数式编程中，我们可以充分利用数学公式来解决问题。也就是说，任何问题都可以通过函数（加减乘除）和数学定律（交换律、结合律等），一步一步计算，最终得到答案。
    函数式编程中，所有的变量都是唯一的值，就像是数学中的代数 x、y，它们要么还未解出来，要么已经被解出为固定值，所以对于：x=x+1 这样的自增是不合法的，因为修改了代数值，不符合数学逻辑。
    除此之外，严格意义上的函数式编程也不包括循环、条件判断等控制语句，如果需要条件判断，可以使用三元运算符代替。
    文章开头我们提到了 webpack-chain，我们一起来看一下：
    1. // 使用 webpack-chain 来编写 webpack 配置。
    2. const Config = require('webpack-chain');
    3. const config = new Config();
    4. config.
    5.   .entry('index')
    6.       .add('src/index.js')
    7.       .end()
    8.   .output
    9.        .path('dist')
    10.        filename('my-first-webpack.bundle.js');
    11. config.module
    12.   .rule('compile')
    13.       .test(/\.js$/)
    14.       .use('babel')
    15.       .loader('babel-loader')
    16. module.exports = config;
    可以看到，webpack-chain 可以通过链式的函数 api 来创建和修改 webpack 配置，从而更方便地创建和修改 webpack 配置。试想一下，如果一份 webpack 配置需要用于多个项目，但每个项目又有一些细微的不同配置，这个应该怎么处理呢？
    如果使用 webpack-chain 去修改配置，一个函数 api 就搞定了，而使用命令式的编程，则需要去逐步遍历整个 webpack 配置文件，找出需要修改的点，才能进行修改，这无疑就大大减少了我们的工作量。

函数式编程的特点

根据维基百科权威定义，函数式编程有以下几个特点：

  • 函数是一等公民
    • 函数可以和变量一样，可以赋值给其他变量，也可以作为参数，传入一个函数，或者作为别的函数返回值。
  • 只用表达式，不用语句：
    • 表达式是一段单纯的运算过程，总是有返回值。
    • 语句是执行某种操作，没有返回值。
    • 也就是说，函数式编程中的每一步都是单纯的运算，而且都有返回值。
  • 无副作用
    • 不会产生除运算以外的其他结果。
    • 同一个输入永远得到同一个数据。
  • 不可变性
    • 不修改变量，返回一个新的值。
  • 引用透明
    • 函数的运行不依赖于外部变量，只依赖于输入的参数。

以上的特点都是函数式编程的核心，基于这些特点，又衍生出了许多应用场景：

  • 纯函数：同样的输入得到同样的输出，无副作用
  • 函数组合：将多个依次调用的函数，组合成一个大的函数，简化操作步骤
  • 高阶函数：可以加工函数的函数，接收一个或多个函数作为输入、输出一个函数
  • 闭包：函数作用域嵌套，实现的不同作用域变量共享
  • 柯里化：将一个多参数函数转化为多个嵌套的单参数函数
  • 惰性求值：预先定义多个操作，但不立即求值，在需要使用值时才去求值，可以避免不必要的求值，提升性能
  • 递归：控制函数循环调用的一种方式
  • 尾递归：避免多层级函数嵌套导致的内存溢出的优化
  • 链式调用：让代码更加优雅

纯函数

给定的输入，有唯一的输出，没有外部依赖，对结果可控

  1. let add = (x, y ) => x+y

高阶函数

以函数作为输入或者输出的函数，是高阶函数。

抽象

命令式编程

强调的是过程，如何做的

  1. let arr = [1,2,3]
  2. for(let i=0;i<arr.length;i++){
  3.     console.log(arr[i])
  4. }

声明式编程

强调的是结果，不管过程，只关注结果

  1. const forEach = function(arr, fn){
  2.     for(let i=0;i<arr.length;i++){
  3.       fn(arr[i])
  4.   }
  5. }
  6. forEach([1,2,3], item=>console.log(item))

常用的map,filter,forEach,some,every,reduce都是声明式编程

缓存

利用函数的闭包，将已经执行过的函数进行缓存。减少重复执行

  1. let once = fn=>{
  2.   let done = false;
  3.     return function(){
  4.       if(!done){
  5.         fn();
  6.     }else{
  7.         console.log("函数已经执行过...")
  8.     }
  9.     done = true
  10.   }
  11. }
  12. let test = ()=>console.log("this is test function!")
  13. let myTest = once(test)
  14. myTest()
  15. myTest()
  16. myTest()

柯里化

维基百科上说道：柯里化，英语：Currying，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数。

纯函数变的更纯，某些特定环境下只能接受一元参数

简单基本，将二元参数转一元

  1. let curry = fn=>{
  2.      return function(x){
  3.       return function(y){
  4.         return fn(x, y)
  5.     }
  6.   } 
  7. }
  8. let add = (x, y) => x+y
  9. let cAdd = curry(add)
  10. console.log(cAdd(1)(2))

多元参数函数柯里化

具有更广范的适用性

  1. const curryFN = (fn, ...arr) => { //第一个参数肯定是一个函数，在这里被解构出来
  2.   let len = fn.length; // 被柯里化的函数参数个数
  3.   return function (...args) {
  4.     let newArr = [...arr, ...args]; //将参数依次累加
  5.     if (newArr.length < len) { // 参数小于被柯里化的函数参数个数时，继续迭代curryFN
  6.       return curryFN(fn, ...newArr);
  7.     }
  8.     return fn(...newArr); // 参数个数够了之后，执行fn函数
  9.   };
  10. };
  11. const add = (x,y,z,o) => x+y+z+o
  12. const myfn = curryFN(add, 1) // 可以先在柯里化函数中传递参数
  13. console.log(myfn(1)(2)(3))
  14. console.log(myfn(1,2)(3))

下面方法，只能先传递一个函数，然后在进行参数的柯里化调用

  1. const curry = fn=>{
  2.      return function curriedFn(...args){
  3.     //收集参数的过程，如果传入的参数少于函数的参数，则继续进行收集
  4.       if(args.length< fn.length){
  5.         return function(){
  6.           return curriedFn(...args.concat([...arguments]))
  7.       }
  8.     }
  9.     return fn(...args)
  10.   } 
  11. }
  12. const add = (x,y,z,o) => x+y+z+o
  13. const myfn = curry(add)
  14. console.log(myfn(1)(2)(3)(4))
  15. console.log(myfn(1,2)(3,4))

偏函数

缓存一部分参数，然后让另一些参数在使用时传入

  1. function isTypeX(type){
  2.     return function(obj){
  3.       return Object.prototype.toString.call(obj) === `[object ${type}]`
  4.   }
  5. }
  6. // 缓存一部分参数，然后让另一些参数在使用时传入
  7. const isObject = isTypeX("Object")
  8. const isNumber = isTypeX("Number")
  10. console.log("偏函数测试：", isObject({ a: 1 }, 123)); // true
  11. console.log("偏函数测试：", isNumber(1)); // true

实现AOP

AOP可以对函数的执行进行装饰，在函数执行之前或者之后加入定制性处理。

  1. Function.prototype.before = function (beforeFn) {
  2.   let _this = this; //存储下this变量
  3.   return function (...args) {
  4.     beforeFn.call(this, ...args);
  5.     return _this.call(this, ...args);
  6.   };
  7. };
  8. Function.prototype.after = function (afterFn) {
  9.   let _this = this; //存储下this变量
  10.   return function (...args) {
  11.     let ret = _this.call(this, ...args); // 让本体函数先执行，然后在执行传入的函数
  12.     afterFn.call(this, ...args);
  13.     return ret;
  14.   };
  15. };
  17. let fun1 = function () {
  18.   console.log(2, "currentFn");
  19. };
  20. let AOPFn = fun1
  21.   .before(function () {
  22.     console.log(1, "before");
  23.   })
  24.   .after(function () {
  25.     console.log(3, "after");
  26.   });
  27. AOPFn();

实现bind方法

利用高阶函数，返回函数延时执行，可以实现js的bind方法

  1. Function.prototype.bindOwn = function (context) {
  2.   var _this = this
  3.   // bind 的第一个参数会作为原函数运行时的 this 指向
  4.   // 排除掉第一个参数，获取剩余参数
  5.   var restArgs = Array.prototype.slice.call(arguments, 1)
  7.   return function(...args) {
  8.     return _this.apply(context, [...restArgs, ...args])
  9.   }
  10. }
  12. function add(a, b, c) {
  13.   return a + b + c;
  14. }
  15. var _fn = add.bindOwn(null, 10);
  16. var res = _fn(20, 30); // 60
  17. console.log(res);

高阶函数在react中使用

可以加工函数的函数(接收一个或多个函数，作为输入、输出一个函数)

  1. // React 组件中，将一个组件，封装为带默认背景色的新组件。
  2. // styled-components 就是这个原理
  3. function withBackgroundRedColor (wrapedComponent) {
  4.   return class extends Component {
  5.     render () {
  6.       return (<div style={backgroundColor: 'red} >
  7.                  <wrapedComponent {...this.props} />
  8.              </div>)
  9.     }
  10.   }
  11. }

函数的组合、合并

组合

执行顺序是从右往左执行的

  1. const composeRight = (...fns) => {
  2.   return function (...args) {
  3.     let lastFn = fns.pop(); // 获取函数列表中，最后一个函数，并把参数传递给最后一个函数
  4.     return fns.reduceRight((prev, current) => {
  5.       return current(prev);
  6.     }, lastFn(...args)); //lastFn(...args) 最后一个函数执行结果作为初始值
  7.   };
  8. };
  9. let mult = a => a*2
  10. let add = a => a+5
  11. let myfn = composeRight(mult,add)
  12. console.log(myfn(2))

2个参数函数组合

  1. const compose = function (fn1, fn2) {
  2.   return function (...agrs) {
  3.     return fn1(fn2(...agrs));
  4.   };
  5. };
  6. let mult = (a) => a * 2;
  7. let add = (a) => a + 5;
  8. let myfn = compose(mult, add);
  9. console.log(myfn(2));

多个参数函数的组合

  1. const sum = (a, b) => a + b;
  2. const len = (l) => l.length;
  3. const addPrefix = (str) => "$" + str;
  5. // 使用reduce实现compose
  6. const composeReduce = (...fns) => { // 第一层传递多个函数
  7.   return fns.reduce(function (prev, current) { //将多个函数，从左往右收集合并
  8.     return function (...args) { //最后一个函数，可以传递多个参数
  9.       return prev(current(...args));
  10.     };
  11.   });
  12. };
  14. let final = composeReduce(addPrefix, len, sum);
  15. console.log(final("a", "b"));

管道

执行顺序是从左往右执行的

  1. const pipe = function(...fns){
  2.     return function(val){
  3.       return fns.reduce((total,fn)=>{
  4.         return fn(total)
  5.     },val)
  6.   }
  7. }

递归和尾递归

递归

函数调用自身的过程

  1. // 递归操作，如果数据量大，会有很大的内存占用
  2. const fib = (n) => {
  3.   if (n <= 2) return n;
  4.   return fib(n - 1) + fib(n - 2);
  5. };
  6. console.log(fib(5));
  8. // fib(5) = fib(4) +                    fib(3)         = 
  9. //         fib(3) + fib(2)  +           fib(2) + fib(1) =
  10. //         fib(2) + fib(1) + fib(2)  +   fib(2) + fib(1) =
  11. //         2     + 1     + 2      +    2    +  1
  12. // 普通递归会将随着层级增加，横向的参数展开的更多，每个参数都会占内存地址。
  13. console.log("没有使用尾递归，导致栈溢出", fibonacci(100));

尾调用

当函数a的最后一个动作是调用函数b时，那么对函数b的调用形式就是尾调用。
尾调用的真正目的是为了进行优化，防止栈溢出，

  1. const a = ()=>{
  2.     return b()
  3. }
  4. const b = () => "b函数尾调用"
  5. a()

尾递归，其实是尾调用的一种特殊情况，即每次递归调用都是尾调用，看一下下面这段简单的递归代码：

  1. const sum = (n) => {
  2.   if (n <= 1) return n;
  3.   return n + sum(n-1)
  4. }

计算从1到n的整数的和，显然这段代码并不是尾递归，因为sum(n-1)调用后还需要上一步计算的过程，所以当n较大时就会导致栈溢出。我们可以把这段代码改为尾递归的形式

  1. const sum = (n, prevSum = 0) => {
  2.   if (n <= 1) return n + prevSum;
  3.   return sum(n-1, n + prevSum)
  4. }

尾递归

  • 尾递归，避免多层级函数嵌套导致的内存溢出的优化。
  • 尾递归每次调用都在收集结果，传入第二个参数result，从而避免线性递归不收集结果带来的内存占用。
  • 尾递归结束的return只能调用函数自身，不能包含其他变量
    1. // 尾递归，避免多层级函数嵌套导致的内存溢出的优化。
    2. // 尾递归结束的return只能调用函数自身
    3. function fibonacci2(n, result, preValue) {
    4. if (n == 0) {
    5.   return result;
    6. }
    7. return fibonacci2(n - 1, preValue, result + preValue);
    8. }
    9. // result = 0, preValue = 1
    10. console.log("使用了尾递归，不会栈溢出", fibonacci2(100, 0, 1));
    什么是尾递归？ - Frankie杨的回答 - 知乎 https://www.zhihu.com/question/20761771/answer/57214778
    尾递归，比线性递归多一个参数，这个参数是上一次调用函数得到的结果；
    所以，关键点在于，尾递归每次调用都在收集结果，避免了线性递归不收集结果只能依次展开消耗内存的坏处。
    sum(5)=5＋sum(4)举例：
    如果用普通的递归，算到最后一步的时候，计算机内存里存储的值是5＋4＋3＋2＋sum(1)，这里是4个数字，和一个需要计算的函数sum()，然后再把这5个数字加起来，得出结果15。
    如果用尾递归的话，算到最后一步的时候，计算机内存里存储的值是14+sum(1)，这里是1个数字，和一个需要计算的函数sum()。
    对于整形数字int类型来说，在计算机内存储每个2，3，4，5和存储14所占的内存空间是一样的，虽然表达的都是14这个信息，前者的内存占用是后者的4倍。

    链式调用

    1. // lodash 中，一个方法调用完成之后，可以继续链式调用其他的方法。
    2. var users = [
    3. { user: "barney", age: 36 },
    4. { user: "fred", age: 40 },
    5. { user: "pebbles", age: 1 },
    6. ];
    7. var youngest = _.chain(users)
    8. .sortBy("age")
    9. .map(function (o) {
    10.   return o.user + " is " + o.age;
    11. })
    12. .head()
    13. .value();
    14. // => 'pebbles is 1'

惰性求值

预先定义多个操作，但不立即求值，在需要使用值时才去求值，可以避免不必要的求值，提升性能

  1. // 这里使用 C# 中的 LINQ 来演示
  2. // 假设数据库中有这样一段数据 db.Gems [4,15,20,7,3,13,2,20];
  4. var q =
  5.     db.Gems
  6.     .Select(c => c < 10)
  7.    .Take(3)
  8.    // 只要不调用 ToList 就不会求值
  9.    // 在具体求值的时候，会将预先定义的方法进行优化整合，以产生一个最优的解决方案，才会去求值。
  10.     .ToList();

上述代码中，传统的求值会遍历 2 次，第一次遍历整个数组（8 项），筛选出小于 10 的项，输出 [4,7,3,2]，第二次遍历这个数组（4 项），输出 [4,7,3]。
如果使用惰性求值，则会将预先定义的所有操作放在一起进行判断，所以只需要遍历 1 次就可以了。在遍历的同时判断 是否小于 10 和 小于 10 的个数是否为 3，当遍历到第 5 项时，就能输出 [4,7,3]。
相比传统求值遍历的 8+4=12 项，使用惰性求值则只需遍历 5 项，程序的运行效率也就自然而然地得到了提升。

更多函数式编程：https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/