首页 > 编程 > JavaScript > 正文

Javascript 高阶函数使用介绍

2019-11-20 12:14:41
字体:
来源:转载
供稿:网友

高阶函数(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");//12var 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><title></title><body><input type=”button” value=”ClickMe” id=”myBtn” ><script type=”text/javascript>var btnClick=document.getElementById(“myBtn”);//测试环境为FireFoxbtnClick. addEventListener(“click”,function(e){alert(“I'm a button!”);//I'm a button},false);</script></body></html>

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表