javascript函数式编程实例分析


Posted in Javascript onApril 25, 2015

本文实例讲述了javascript函数式编程。分享给大家供大家参考。具体分析如下:

js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数。因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件。

下面给出一个例子代码,出自一本js教程,功能是计算数组元素的平均值和标准差,先列出非函数式编程的一种写法:

var data = [1,1,3,5,5];
var total = 0;
for(var i = 0;i < data.length;i++)
  total += data[i];
var mean = tatal/data.length; //平均数为3
//计算标准差
total = 0;
for(var i = 0;i < data.length;i++){
  var deviation = data[i] - mean;
  tatal += deviation * deviation;
  }
var stddev = Math,.sqrt(total/(data.length-1));//标准差为2

为了使用函数式编程,我们预先定义一些帮助函数(helper functions):

//将类数组对象转换为真正的数组
function array(a,n){
 return Array.prototype.slice.call(a,n||0);
}
//将函数实参传递至左侧
function partial_left(f){
 var args = arguments;
 return function(){
  var a = array(args,1);
  a = a.concat(array(arguments));
  return f.apply(this,a);
 };
}
//将函数的实参传递至右侧
function partial_right(f){
 var args = arguments;
 return function(){
  var a = array(arguments);
  a = a.concat(array(args,1));
  return f.apply(this,a);
 };
}
//该函数实参被用做模版,
//实参列表中的undefined值会被实际实参值填充。
function partial(f){
 var args = arguments;
 return function(){
  var a = array(args,1);
  var i = 0,j = 0;
  for(;i<a.length;i++)
   if(a[i] === undefined)
    a[i] = arguments[j++];
  a = a.concat(array(arguments,j));
  return f.apply(this,a);
 };
}
//返回一个函数类似于f(g())
function compose(f,g){
 return function(){
  return f.call(this,g.apply(this,arguments));
 };
}

下面我们给出完全用函数式编程的js代码:

var data = [1,1,3,5,5];
var sum = function(x,y){return x+y;};
var product = function(x,y){return x*y;};
var neg = partial(product,-1);
var square = partial(Math.pow,undefined,2);
var sqrt = partial(Math.pow,undefined,0.5);
var reciprocal = partial(Math.pow,undefined,-1);
//好吧,高潮来鸟 :)
var mean = product(reduce(data,sum),reciprocal(data.length));
var stddev = sqrt(product(reduce(map(data,compose(square,partial(sum,neg(mean)))),sum),reciprocal(sum(data.length,-1))));

除了reduce和map函数,其他函数前面都给出了。reduce函数类似与ruby中的inject函数:

ary = (1..10).to_a
ary.inject(0) {|sum,i|sum + i} //结果为55

js的写法如下:

var ary = [1,2,3,4,5,6,7,8,9,10]
ary.reduce(function(sum,i){
 return sum + i;
},0);

0为sum的初始值,如果省略则sum为数组第一个元素的值,这里可以省略。

map函数也很简单,类似与对数组的每一个元素做操作,然后返回一个经过操作后的数组,就以ruby代码为例,js代码与此类似:

a = (1..3).to_a; #数组[1,2,3]
a.map {|x| x*2} #返回新数组[2,4,6]

下面我们来分析下那一长串的代码:)

sum和product定义了元素相加和相乘的函数;

neg也是一个函数功能等价于:product(-1,x),即对x值求负;

square函数等价于:Math.pow(x,2),即计算x的平方值,注意这里partial的第二个参数是undefined,这意味着这里的形参会被第一个实参填补;再说的明白点:square(x)功能等于Math.pow(x,2)。

sqrt函数和square类似,功能等价于:Math.pow(x,0.5),相当于计算x的开二次方。
最后一个函数reciprocal也没什么难度,等价于:Math.pow(x,-1),即计算x的负一次方,相当于计算x的倒数。

下面就是如何把上面各种函数揉捏在一起鸟 :)

先看平均值的计算,很简单:就是先计算数组元素的和然后乘上数组长度的倒数,即数组和/数组长度。

最后来看貌似很难的标准差,我们最好由内向外看:
先看包含neg的那层:

//等价于函数sum(-1 * mean + x)
partial(sum,neg(mean)

下面看compose函数:

//下面在源代码上做了等价替换,可以再次等价于:
//square(sum(-1*mean + x)),再次展开(我剥,我剥,我剥洋葱...):
//Math.pow(sum(-1*mean + x),2);
compose(square,sum(-1*mean + x))

接下来看map函数:

//很清楚吧!?即data中每一个元素都为一个x,将其传入后面的函数,然后返回一个计算后的新数组,即新数组中的每个元素的值是data中的每个元素加上data负的平均数,然后对其结果计算2次方的结果。

map(data,Math.pow(sum(-1*mean + x),2))

再接着看map外面的reduce函数:

//将前面新数组的每个元素值加起来。
reduce(map(...),sum)

然后看一下reciprocal函数:

//等价于求(data.length-1)的倒数
reciprocal(sum(data.length,-1))

再看外层的product函数:

//等价于新数组元素的和除以(data.length-1)
product(reduce(...),reciprocal(...))

最外层的sqrt表示对以上除法得出的结果求平方根;大家可以对照一下前面非函数编程的代码,是一样一样滴 :) 看似蛮怕人的一大坨代码,展开分析后难度立马将至零。如果各位看官最后表示还是未看明白,那完全是本猫语言表达能力的问题,欢迎提问。

解释完毕,打完收功,大功告成。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
javascript回到顶部特效
Jul 30 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
javascript中eval函数用法分析
Apr 25 #Javascript
javascript属性访问表达式用法分析
Apr 25 #Javascript
javascript变量声明实例分析
Apr 25 #Javascript
javascript显式类型转换实例分析
Apr 25 #Javascript
javascript原始值和对象引用实例分析
Apr 25 #Javascript
JavaScript分页功能的实现方法
Apr 25 #Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 #Javascript
You might like
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
django框架如何集成celery进行开发
2017/05/24 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
利用python求积分的实例
2019/07/03 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
详解Python中的路径问题
2020/09/02 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
网络技术专业推荐信
2014/02/20 职场文书
关于安全演讲稿
2014/05/09 职场文书
工厂见习报告范文
2014/10/31 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
党支部先进事迹材料
2014/12/24 职场文书
高温慰问简报
2015/07/21 职场文书
同学聚会祝酒词
2015/08/10 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server