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 相关文章推荐
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
JavaScript数组复制详解
Feb 02 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
VScode格式化ESlint方法(最全最好用方法)
Sep 10 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
用PHP生成html分页列表的代码
2007/03/18 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
小程序自定义日历效果
2018/12/29 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python redis 删除key脚本的实例
2019/02/19 Python
python导入库的具体方法
2020/06/18 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
外企测试工程师面试题
2015/02/01 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
日语求职信范文
2013/12/17 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
环保建议书范文
2015/09/14 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python