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 09 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
js面向对象的写法
Feb 19 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
微信小程序实现可长按移动控件
Nov 01 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 多行多列显示
2009/08/15 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP打印输出函数汇总
2016/08/28 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
php经典趣味算法实例代码
2020/01/21 PHP
jquery 插件学习(五)
2012/08/06 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
Vuex 入门教程
2018/01/10 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
numpy中矩阵合并的实例
2018/06/15 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
骨干教师事迹材料
2014/12/17 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
简爱读书笔记
2015/06/26 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript