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选择器使用方法总结
Apr 09 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
JS实现分页导航效果
Feb 19 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
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP学习记录之数组函数
2018/06/01 PHP
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
django的登录注册系统的示例代码
2018/05/14 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
介绍一下#error预处理
2015/09/25 面试题
千元咖啡店的创业计划书范文
2013/12/29 职场文书
提拔干部考察材料
2014/05/26 职场文书
设计师求职信
2014/07/01 职场文书
2014年安全生产责任书
2014/07/22 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
公司年夜饭通知
2015/04/25 职场文书
大学生暑假实习总结
2015/07/13 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis