javascript之典型高阶函数应用介绍


Posted in Javascript onJanuary 10, 2013

缘由
虽然以前也使用过javascript语言,但终究是为了配合后端写的一些零零散散的“代码段”,更不能说是javascript项目了。很荣幸的是上个月刚到公司正好碰上项目开始推倒重写,我们team从头开始做架构和实现,目的很清楚,为了改进和超越前面的版本。这是个真正意义上的javascript“项目”,当然服务端不是我们team来负责啦。这也是我真正开始全职使用javascript来编程。由于之前在学校对形式化方法这门课程比较感兴趣,而javascript又是函数式语言,因此我想把更多functional的东西用javascript来表现一下。

几个函数
这几个方法均为javascript 1.6 数组新增的方法。是很典型的functional 函数,当然也非常实用。下面是functional的定义并不来自javascript。

filter:接受一个集合Xs(X表示类型,s表示集合),一个谓词,这个谓词是从X到bool的映射(函数)。然后过虑这个集合,并返回谓词为true的元素组成的集合。下面是简单的实现:

function filter(arr,callback){ 
var i,out=[]; 
for(i=0;i<arr.length;i++){ 
if(callback(arr[i])) 
out.push(arr[i]); 
} 
return out; 
}

再加一个简单的测试:
var arr = [1,2,3,4,5,6,7,8,9,10]; 
var even = function(item){ 
if(typeof item !== "number") return false; 
return !(item & 1); 
}; 
var filtered = filter(arr,even); 
console.log(filtered);

结果:
2,4,6,8,10
map:接受一个集合Xs,一个函数f,然后把Xs集合中每一个元素按照顺序使用f映射,并返回集合f x1, f x2, f x3 ... f xn。实现如下:
function map(arr,callback){ 
var i,l= arr && arr.length || 0,out = new Array(l); 
for(i=0;i<l;i++) 
out[i]=callback(arr[i]); 
return out; 
}

测试一下:
var arr = [1,2,3,4,5,6,7,8,9,10]; 
var addTen = function(item){ 
return item + 10; 
}; 
var mapAdded = map(arr,addTen); 
console.log(mapAdded);

结果:
11,12,13,14,15,16,17,18,19,20
另外还有forEach,every和some三个函数在javascript 1.6中出现。但在使用过程中感觉还是缺少一个有力的函数,它就是折叠函数(fold)。正所谓map-reduce,有了map而没有"reduce"岂不是很扫兴?下面就来看看这个”reduce“。

Reduce的实现
上面说的reduce其实也就是折叠函数(fold)。它接受一个Xs集合,一个二元操作符f。然后将f插入到集合中的每两个相邻元素之间。举个例子,fold plus [1,2,3,4] 意即 1+2+3+4。为了更加精确,通常需要一个”起始元素“作为f最开始时的第二个参数。例如 fold plus [1,2,3,4] 意即 (1+(2+(3+(4+0)))。下面是实现:

function fold(arr,callback,b){ 
var i,x; 
if(b) x=b,i=0; 
else x=arr[0],i=1; 
for(;i<arr.length;i++) 
x=callback(arr[i],x); 
return x; 
}

测试:
var arr = [1,2,3,4,5,6,7,8,9,10]; 
var plus = function(a,b){ 
return a+b; 
}; 
var foldPlus = fold(arr,plus,0); 
console.log(foldPlus);

结果:
55

这个函数在ECMAScript 5中名字就叫reduce,而函数式里面通常称做fold而已,这是很形象的名字。
总结
其实上面在实现这些functional函数的时候编写风格并不是函数式的,因为javascript 语言有具有循环语句。如果没有循环语句呢?留给下一次探索吧。

Javascript 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
canvas时钟效果
Feb 16 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
浅谈vuex中store的命名空间
Nov 08 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
根据json字符串生成Html的一种方式
Jan 09 #Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 #Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 #Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 #Javascript
js去除重复字符串两种实现方法
Jan 09 #Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 #Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 #Javascript
You might like
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
浅谈php自定义错误日志
2015/02/13 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
javascript 闭包疑问
2010/12/30 Javascript
javascript event 事件解析
2011/01/31 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
九种原生js动画效果
2015/11/11 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
python抓取文件夹的所有文件
2018/02/27 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python实现单链表的方法示例
2019/09/03 Python
Django实现文件上传和下载功能
2019/10/06 Python
Python通过Pillow实现图片对比
2020/04/29 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
图书馆标语
2014/06/19 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js