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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 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简单判断手机设备的方法
2016/08/23 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Python Http请求json解析库用法解析
2020/11/28 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
数据库连接池的工作原理
2012/09/26 面试题
办公室副主任职责范本
2014/03/08 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
个人先进材料范文
2014/12/30 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers