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继承 Base类的源码解析
Dec 30 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
js实现金山打字通小游戏
Jul 24 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
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
用Python抢过年的火车票附源码
2015/12/07 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python实现图书借阅系统
2019/02/20 Python
Python argparse模块应用实例解析
2019/11/15 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
主题酒店策划书
2014/01/28 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
Python学习之异常中的finally使用详解
2022/03/16 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技