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_06_理解对象的创建过程
Oct 15 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 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
Terran热键控制
2020/03/14 星际争霸
一个程序下载的管理程序(二)
2006/10/09 PHP
php对数组排序的简单实例
2013/12/25 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
JavaScript按位运算符的应用简析
2014/02/04 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
jQuery基础知识小结
2014/12/22 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python win32 简单操作方法
2017/05/25 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
企业承诺书格式
2014/05/21 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
先进工作者个人总结
2015/02/15 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python