• javascript,将一个函数作为另一个函数的返回值。


    假设我们用一个数组保存一组学生的基本信息。

    var studentsData = 
        [{name:"mike",age:17},
         {name:"loren",age:16},
         {name:"frank",age:18}];

    现在,我们需要对这个数组按照姓名(name)字段进行升序排序,在这个场景内,使用数组的sort(compareFunction)方法进行排序,该方法的参数是一个比较函数。

    比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个之后则返回一个正数。

    以下为按照name字段进行排序:

    function compareFunctionByName(object1,object2){
        var value1=object1["name"];
        var value2=object2["name"];
        if(value1<value2){
            return -1;
        }else if(value1==value2){
            return 0;
        }else{
            return 1;
        }    
    };
    
    
    studentsData.sort(compareFunctionByName);

    结果:

    frank
    loren
    mike

    这样的排序写法简单有效,但是,如果此时需求变更,除了name外还需要对学生的age进行排序时,一般的做法是另外写一个按照age字段进行排序的比较函数,然后在调用的地方作个条件判断,决定使用哪一个版本的比较函数。

    新增加版本的比较函数如下:

    function compareFunctionByAge(object1,object2){
        var value1=object1["age"];
        var value2=object2["age"];
        if(value1<value2){
            return -1;
        }else if(value1==value2){
            return 0;
        }else{
            return 1;
        }    
    };

    上面的写法工作的很好,但是两个版本的比较函数除了比较字段的不同外,其余部分均相同,如果又增加了对其他字段进行排序需求的话,代码的冗余度大大增加,而且代码会越来越丑陋。

    当这种场景发生时,我们就需要用到js函数中一个非常有用的特性:将一个函数作为另一个函数的返回值。

    具体作法,写一个生成函数,该生成函数根据字段名生成相应版本的比较函数,并将比较函数返回作为sort方法的参数。

    如下:

    function createCompareFunction(fieldName){
        return function(object1,object2){
            var value1=object1[fieldName];
            var value2=object2[fieldName];
            if(value1<value2){
                return -1;
            }else if(value1==value2){
                return 0;
            }else{
                return 1;
            }    
        };
    }

    //按照name字段进行排序
    studentsData.sort(createCompareFunction("name"));

    //按照age字段进行排序
    studentsData.sort(createCompareFunction("age"));

    如此便解决了高冗余度的问题,并且通用性良好。

    javascript函数的这一特性在实际中应用点很多,继续挖掘中。。。

    ^_^。

  • 相关阅读:
    不一样的图片加载方式
    赢 1000 元现金红包!助力奥运,猜金银牌数赢现金
    接入 SDK 结果翻车了?了解 SDK 的那些事
    关于 IPv6 国家有大动作啦!快来瞅瞅行动计划都说了什么~
    MySQL 那些常见的错误设计规范
    webpack 从 0 到 1 构建 vue
    PHP 网络通信底层原理分析
    内部方案汇总
    taro+vue3 引入 taro-ui-vue3
    springboot+tomcat+vue+nginx 前后端分离配置
  • 原文地址:https://www.cnblogs.com/kongxianghai/p/2979856.html
Copyright © 2020-2023  润新知