js中的函数式编程

函数式编程

• 前置知识
  • js 基础
  • js面向对象

函数式编程含义

• 函数式编程是一种强调以函数使用为主的软件开发风格 ，也是一种范式。

• 某些函数式编程语言Haskell、lisp、Scheme等。

js中函数式编程

• 数学中的函数

  f(x) = y;

• js中的函数

     let factor = 3;
     let totalNum = num=>factor*num;
     console.log( totalNum(3) );
  

• 数学中的函数表达式相同的输入，输出是不变的，这就是函数编程的一个特性。将上面的js修改为符合函数式编程的规范如下。

     let totalNum = (num,factor)=>factor*num;
     console.log( totalNum(3,3) );
  

• js是多范式编程语言，但是函数作为一等公民，函数式编程具有天然优势。

函数式编程中涉及到的概念

纯函数

• 函数式编程基于纯函数

  • 纯函数是对给定的输入返还相同输出的函数；例如

  let double = value=>value*2;
  

• 纯函数意义

  • 纯函数可以产生可测试的代码

    • 不依赖外部环境计算，不会产生副作用，提高函数的复用性。

      test('double(2) 等于 4', () => {
        expect(double(2)).toBe(4);
      })
      

  • 可读性更强 ，js函数不管是否是纯函数 都会有一个语义化的名称，更便于阅读。

  • 可以组装成复杂任务的可能性。符合模块化概念及单一职责原则。

高阶函数

• 高阶函数定义

  • 高阶函数：将函数作为参数或返回函数的函数称为高阶函数(Higher-Order Function)。

• 高阶函数的抽象

  • 一般高阶函数用于抽象通用问题，简而言之，高阶函数就是定义抽象。

    • 命令式循环(注重“如何”做，注重过程)；

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

    • 通过高阶函数抽象过程,声明式编程（注重做“什么”，注重结果）;

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

      上面通过高阶函数 “forEach”来抽象循环"如何"做的逻辑,直接关注 做"什么"

• 高阶函数的缓存特性

  • 利用js函数的闭包

    • once 高阶函数

    const once = (fn)=>{
        let done = false;
        return function(){
            if(!done){
                fn.apply(this,fn);
            }else{
                console.log("this fn is already execute");
            }
            done = true;
        }
    }
        
    function test(){
        console.log("test...");
    }
    let myfn =  once(test);
    myfn();
    myfn();
    

柯里化

• 什么是柯里化？

  • 柯里化是把一个多参数函数转化成一个嵌套的一元函数的过程；

    • 如下二元函数

      let fn = (x,y)=>x+y;
      

    • 柯里化函数

      const curry = function(fn){
          return function(x){
              return function(y){
                  return fn(x,y);
              }
          }
      }
      let myfn = curry(fn);
      console.log( myfn(1)(2) );
      

• 多参数函数柯里化

  // 多参数柯里化；
      const curry = function(fn){
          return function curriedFn(...args){
              if(args.length<fn.length){
                  return function(){
                      return curriedFn(...args.concat([...arguments]));
                  }
              }
             return fn(...args);
          }
      }
      const fn = (x,y,z,a)=>x+y+z+a;
      const myfn = curry(fn);
      // console.log(myfn(1)(2));
      console.log(myfn(1)(2)(3)(1));
  

• 柯里化意义

  • 让纯函数更”纯“，每次接受一个参数，松散解耦
  • 某些语言及特定环境下只能接受一个参数

组合（composition）和管道（pipe）

组合（composition）

• 组合函数：无需创建新的函数，通过基础函数解决眼前问题。

  • compose组合

    可以封装组合函数来实现函数执行

    • 两个个函数组合（缓存两个函数，返回新的函数，执行的时候按创建时的从右往左顺序执行）

    function afn(a){
        return a*2;
    }
    function bfn(b){
        return b*3;
    }
    const compose = (a,b)=>c=>a(b(c));
    let myfn =  compose(afn,bfn);
    console.log( myfn(2));
    

    • 多函数组合

      const compose = (...fns)=>val=>fns.reverse().reduce((acc,fn)=>fn(acc),val);
      

      • 获取所有的单词

        const wordNum = str=>str.match(/[\w\-]+/g);
        let str = "Mamba Out，Mamba Never Out";
        console.log(wordNum(str));
        

      • 统计长度

        const countFn = arr=>arr.length;
        

      • 判断奇偶

        const oddOrEven = num=>num%2===0?"偶数":"奇数";
        

      • 组合函数使用:找到单词统计长度最后判断奇偶数

      let str = "Mamba Out，Mamba Never Out";
      const myfn = compose(oddOrEven,countFn,wordNum);
      console.log(myfn(str));
      

管道（pipe）

compose 执行是从右到左，pipe是从左至右的执行。函数如下：

const pipe = (...fns)=>val=>fns.reduce((acc,fn)=>fn(acc),val);

​ 管道、组合 取舍 ：管道及组合最大区别在于执行顺序的不同，数据流向不同，达到目的是类似的。所以无优 劣之分，保持团队风格统一就好了。

组合及管道的意义 把很多小函数组合起来完成更复杂的逻辑。

js函数式编程库

• lodash.js 、ramda.js 、Underscore.js

• Redux 整体是通过函数式 编程思维实现的 ,在源码的src目录下就可以看到compose的文件,dispatch的执行顺序便是通过这个文件的函数组合，推荐阅读Redux源码，具体compose使用在applyMiddleware文件里

• koa中间件执行顺序也就是洋葱模型也是用了函数组合compose的特性实现，具体是使用了koa-compose这个库，代码在这里 git仓库，koa的代码都很短，但很精华，推荐阅读。