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 继承实现例子
Aug 12 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 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 星际争霸
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
详解Django中的过滤器
2015/07/16 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python中操作文件的模块的方法总结
2021/02/04 Python
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
公务员培训自我鉴定
2014/02/01 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
体育教师教学随笔
2015/08/15 职场文书
2016年端午节寄语
2015/12/04 职场文书
高考升学宴主持词
2019/06/21 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python