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实现复制功能各浏览器支持情况实测
Jul 18 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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 Array交叉表实现代码
2010/08/05 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
想学画画?python满足你!
2020/12/24 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
生物学学生自我评价
2014/01/17 职场文书
家长对孩子评语
2014/01/30 职场文书
老干部工作先进事迹
2014/08/17 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
对学校的意见和建议
2015/06/04 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL