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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
js取整数、取余数的方法
May 11 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
vue 自定义 select内置组件
2018/04/10 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Django框架 querySet功能解析
2019/09/04 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
2013年高中生自我评价
2013/10/23 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
交通安全寄语大全
2014/04/08 职场文书
生活部的活动方案
2014/08/19 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
闪闪的红星观后感
2015/06/08 职场文书
道士塔读书笔记
2015/06/30 职场文书