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中json对象和string对象之间相互转化
Dec 26 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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中header的用法详解
2013/06/07 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
网络工程专业毕业生推荐信
2013/10/28 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
工作收入证明范本
2015/06/12 职场文书
如何做好工作总结!
2019/04/10 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python