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 iframe内部出滚动条
Feb 11 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
根据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给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
php简单中奖算法(实例)
2017/08/15 PHP
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
npm的lock机制解析
2019/06/20 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python创建模块及模块导入的方法
2015/05/27 Python
python处理按钮消息的实例详解
2017/07/11 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python查看模块安装位置的方法
2018/10/16 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
一行python实现树形结构的方法
2019/08/09 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
浅析Python requests 模块
2020/10/09 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
高三英语教学反思
2014/01/13 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Python 如何安装Selenium
2021/05/06 Python
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang