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 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
原生js实现放大镜组件
Jan 22 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
vue resource post请求时遇到的坑
2017/10/19 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
科室工作的个人自我评价
2013/10/30 职场文书
护理工作感言
2014/01/16 职场文书
医院保洁服务方案
2014/06/11 职场文书
单位病假条范文
2015/08/17 职场文书
校园之声广播稿
2015/08/18 职场文书
周末问候语大全
2015/11/10 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server