Javascript 高阶函数使用介绍


Posted in Javascript onJune 15, 2015

高阶函数(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><title></title>
<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编程的利器。高阶函数实际上就是对基本算法的再度抽象,我们可以利用这一点,提高代码的抽象度,实现最大限度的代码重用,编写出更简洁、更利于重构的代码。

Javascript 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
jQuery textarea的长度进行验证
May 06 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
jQuery预加载图片常用方法
Jun 15 #Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 #Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 #Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 #Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 #Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 #Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
Python中property函数用法实例分析
2018/06/04 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
python装饰器常见使用方法分析
2019/06/26 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python简单实现插入排序实例代码
2020/12/16 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
python 自动识别并连接串口的实现
2021/01/19 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
海南地接欢迎词
2014/01/14 职场文书
先进集体事迹材料
2014/02/17 职场文书
公司副总经理任命书
2014/06/05 职场文书
旅游活动总结
2014/08/27 职场文书
大客户经理岗位职责
2015/04/09 职场文书
公司表扬信格式
2015/05/04 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
图解上海144收音机
2021/04/22 无线电
JavaScript实现显示和隐藏图片
2021/04/29 Javascript