• [学习笔记]JavaScript之函数式编程


    欢迎指导与讨论:)

      前言

        函数式编程能使我们的代码结构变得简洁,让代码更接近于自然语言,易于理解。

      一、减少不必要的函数嵌套代码

        (1)当存在函数嵌套时,若内层函数的参数与外层函数的参数一致时,可以这样子写。

    // 一个内层函数
    function call( num, index ){
        console.log (num + ' ' + index );
    }    
    
    // 啰嗦的写法
    [ 1, 2, 3 ].map(function( num, index ){
           return call( num, index );
    })
    
    // 简洁的写法
    [ 1, 2, 3 ].map( call );

        (2)当存在函数嵌套时,若内层函数的参数与外层函数的参数一致时,可以这样子写。

    // 啰嗦的写法
    var app = (function( ){
        var init = function( name, value ){
           Db.init( name, value);
        }
        return { init: init }
    })( )
    
    // 简洁的写法
    var app = { init: Db.init }

        (3)小结,这种写法主要依靠于,函数发生嵌套时,内外函数所接受的参数时一致。并且这种写法从可读性上看,是忽略了参数传递的过程。

       二、尽量使用纯函数 —— 让副作用在可控范围内发生

        纯函数是一类,只要输入相同,每次必能返回相同输出的一类函数。它要求:尽可能不与与函数体外的变量打交道,让结果尽可能与函数体外的任何变量无关,函数不影响输入的数据等等。另外,基于纯函数,能够使用缓存,实现尽可能少的复杂运算 —— react reselect就是一个例子。同时也能提高函数的可测试性。

        (1)尽可能地不影响原有数据

    // 原数据
    var xs = [1,2,3,4,5];
    
    // 纯的
    xs.slice(0,3);
    
    // 不纯的
    xs.splice(0,3);

        (2)使结果尽可能和函数体外部变量无关

    // 不纯的
    var minimum = 21;
    var checkAge = function(age) {
      return age >= minimum;
    };
    
    // 纯的
    var checkAge = function(age, minimum ) {return age >= minimum;
    };

      

      三、柯里化 —— 动态创建新函数

        柯里化是动态地创建函数的一种写法,让函数先处理一部分逻辑,然后再让函数体内再次返回一个函数,达到函数配置惰性求值的效果。结合闭包,能实现良好的封装效果。

         同时,柯里化也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果。因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程。

        (1)使用柯里化,进行函数的创建与配置
    function testRegEx( RegEx ) {
         // 先进行配置
         var regEx = RegEx;
        // 惰性求值,返回函数引用
        return function( string ) {
                return regEx.test( string );
        }
    }    
    
    // 使用方法:
    testRegEx( /hello/g )('Ben said hello!')  // 返回true
    // 另一种使用方法:
    var hasHello = testRegEx(/hello/g);
    hasHello('Ben said hello!') // 返回true

         (2)使用柯里化,返回实用的接口

    function append ( parent,child ){
        parent.appendChild( child );
        return function( ){
           child.remove( );
        }
    }
    
    // 使用:
    var remove = append( node1, node2 );
    // 调用返回的函数
    remove( );

       四、函数组合 —— 更佳的可读性

        顾名思义,组合函数是将多个函数进行组合成一个函数。通过自定义函数组合函数的compose,可以提高一定的函数嵌套可读性。当数据需要从一层层的函数流经时(Pipe管道),我们推荐使用函数组合,来提高可读性。

        (1)自定义函数组合函数

    // 建立一个,从右至左,管道式的函数组合 函数
    var compose = function( ...list ) {
          var last = list[ list.length -1 ];
          var rest = list.slice( 0, -1 );
          return ( ...args ) => rest.reduceRight(( preValue, currentFunc) => currentFunc( preValue ), last( ...args))
    }
    
    
    // 使用方法:
    // 加感叹号
    var exclaim = ( x ) => x + '!!!!';
    // 变大写
    var upperCase = ( x ) => x.toUpperCase( );
    // 加其他符号
    var other= ( x ) => x + '@@@';
    // 函数组合 ------> 函数从右往左地执行,函数执行过程的可读性非常高
    var last = compose( other, upperCase, exclaim);
    last('hello')
    // 返回: HELLO!!!!@@@

       五、函数声明式 

        与平时需要时刻关心所有细节的命令式编程相比,函数声明式会让我们轻松一些,因为它没有"先做这个,再做那个"的命令式代码,而是转为"我需要什么样的数据"的表达式,前者是表达怎么做,后者是表达做什么。同时,函数声明式也能让代码更加优雅。

        (1)一个函数声明式例子

    // 命令式
    var makes = [];
    for (i = 0; i < cars.length; i++) {
        makes.push(cars[i].make);
    }
    
    // 声明式
    var makes = cars.map(function(car){ return car.make; });

     

  • 相关阅读:
    项目笔记:导出Excel功能设置导出数据样式
    前后台JSON传值得一个问题和异常处理net.sf.json.JSONException: Unquotted string '"name"'
    ES6中的async函数
    zoj 1203 Swordfish
    C#:excel导入导出
    &quot;undefined reference to strptime&quot;之自己定义strptime函数
    OpenGL蓝宝书第七章:立体天空和纹理折射、双纹理(下)
    HDOJ 5384 Danganronpa AC自己主动机
    Hibernate复习之Hibernate基本介绍
    Java集合---ConcurrentHashMap原理分析
  • 原文地址:https://www.cnblogs.com/BestMePeng/p/JavaScript_Functional_Programing.html
Copyright © 2020-2023  润新知