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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
JS 判断代码全收集
Apr 28 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
基于Proxy的小程序状态管理实现
Jun 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/02/23 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php实现socket推送技术的示例
2017/12/20 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python中字符串的格式化方法小结
2016/05/03 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Pycharm调试程序技巧小结
2020/08/08 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
暑期社会实践方案
2014/02/05 职场文书
《藏戏》教学反思
2016/02/23 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python