JavaScript函数之高阶函数

本文介绍了JavaScript中的高阶函数概念,包括如何使用函数作为参数或返回值,并通过具体实例展示了其在回调函数、数据筛选与排序算法及DOM事件定义中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

      高阶函数(higher-order function)—如果一个函数接收的参数为或返回的值为函数,那么我们可以将这个函数称为高阶函数。众所周知,JavaScript是一种弱类型的语言:JavaScript的函数既不对输入的参数,也不对输出值作强定义和类型检查,那么函数可以成为参数,也可以成为输出值,这就体现了JavaScript对高阶函数的原生支持。

一、参数为函数的高阶函数:

function funcTest(f){
    //简易判断一下实参是否为函数
    if((typeof f)=="function"){
        f();
    }
}
funcTest(function(){ });

      这是一个简易的将参数作为函数的高阶函数。在调用funcTest时,输入一个函数作为参数,在funcTest内部执行这个输入的匿名函数,当然这样的代码片段没有什么实际意义。

二、返回值为函数的高阶函数:

function funcTest(){
   return function(){
   };
}
var f=funcTest();

     调用funcTest返回一个函数。

三、一个复杂一点的例子:

//Number类型相加
   function addInt(a,b){
       return parseInt(a)+parseInt(b);
   }
   //String类型相加
   function addString(a,b){
       return a.toString()+ b.toString();
   }
   function add(type){
       if(type==="string"){
           return addString;
       }else{
           return addInt;
       }
   }
   var data1=add("string")("1","2");     //12
   var data2=add("int")("1","2");        //3

      以上示例实现了一个String类型相加与Number类型相加的分离。调用add函数如果输入参数为”string”时,输出一个字符串拼接函数;如果输入参数为”int”则输出数字相加函数。

四、高阶函数的实际作用:

      上面的代码示例基本说明什么是高阶函数,下面来看看高阶函数与我们实际编程有什么关系:

      1,回调函数

function callback(value){
    alert(value);       
}

function funcTest(value,f)
  //f实参检测,检查f是否为函数
  if(typeof callback==='function'){
      f(value);
  }
}
funcTest('1',callback);        //1

       示例在当调用funcTest时,funcTest内部会调用callback函数,即实现回调。

       2,数据筛选与排序算法

var arr=[0,2,11,9,7,5];
    //排序算法
    function funcComp(a,b){
        if(a<b){
            return -1;
        }else if(a>b){
           return 1;
        }else{
            return 0;
        }
    }
    //过滤算法
    function funcFilter(item,index,array){
        return item>=5;
    }
    //数组顺序排列
    arr.sort(funcComp);
    alert(arr.join(','));     	  //0,2,5,7,9,11
    
    //筛选数组
    var arrFilter=arr.filter(funcFilter);
        alert(arr.join(','))           //5,7,9,11

        3,DOM元素事件定义

<html>
<head>
    <title>
    </title>
</head>
<body>
     <input type="button" value="ClickMe" id="myBtn" >
     <script type="text/javascript">
          var btnClick=document.getElementById("myBtn");
          //测试环境为FireFox
          btnClick. addEventListener("click",function(e){
              alert("I’m a button!");                          //I’m a button
          },false);
     </script>
</body>
</html>

        在以上示例中,文档中定义了一个id为myBtn的按钮,js脚本为其添加了一个点击事件,其中addEventListener的第二个参数是一个函数。

        结束语:高阶函数并不是JavaScript的专利,但绝对是JavaScript编程的利器。高阶函数实际上就是对基本算法的再度抽象,我们可以利用这一点,提高代码的抽象度,实现最大限度的代码重用,编写出更简洁、更利于重构的代码。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JasonWcx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值