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当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
详解Js模块化的作用原理和方案
Apr 29 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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
微信小程序select下拉框实现源码
2019/11/08 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python+Wordpress制作小说站
2017/04/14 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
浅析Python3 pip换源问题
2020/01/06 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
管理心得体会
2013/12/28 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
客房服务员岗位职责
2015/02/09 职场文书
升职自荐信范文
2015/03/27 职场文书
交通事故责任认定书
2015/08/06 职场文书
法院执行局工作总结
2015/08/11 职场文书
旅行社计调工作总结
2015/08/12 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android