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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
javascript常见用法总结
May 22 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 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技巧与注意事项分析
2011/02/03 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
会议欢迎词
2015/01/23 职场文书
会计求职自荐信
2015/03/26 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS