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中添加属性和删除属性
Jun 03 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
Vue声明式渲染详解
May 17 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
react-native android状态栏的实现
Jun 15 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
JavaScript生成随机验证码代码实例
Sep 28 Javascript
vuex入门最详细整理
Mar 04 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
收音机的保养
2021/03/01 无线电
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
windows下python安装小白入门教程
2018/09/18 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Django实现基于类的分页功能
2019/10/31 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
自荐书格式
2013/12/01 职场文书
护士实习鉴定范文
2013/12/22 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang