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 相关文章推荐
dojo随手记 gird组件引用
Feb 24 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
Python获取当前路径实现代码
2017/05/08 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Django如何实现防止XSS攻击
2020/10/13 Python
python实现按日期归档文件
2021/01/30 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
好听的队名和口号
2014/06/09 职场文书
宣传普通话标语
2014/06/27 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers