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 相关文章推荐
JS正则表达式验证数字代码
Jan 28 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
基于vue实现简易打地鼠游戏
Aug 21 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php 邮件发送问题解决
2014/03/22 PHP
php实现的SESSION类
2014/12/02 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
js实现随机点名功能
2020/12/23 Javascript
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
python基于opencv 实现图像时钟
2021/01/04 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
学前教育毕业生自荐信范文
2013/12/24 职场文书
护理职业生涯规划书
2014/01/24 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL