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压缩混淆工具
May 16 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 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上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
群众路线教育实践活动总结
2014/10/30 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
工程资料员岗位职责
2015/04/13 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL