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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
用javascript制作qq注册动态页面
Apr 14 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结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python 装饰器的使用示例
2020/10/10 Python
如何通过python计算圆周率PI
2020/11/11 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
《蒲公英》教学反思
2014/02/28 职场文书
工作失职检讨书500字
2014/10/17 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
合作协议书格式范本
2016/03/21 职场文书
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis