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,这意味着这里的形参会被第一个实参填补(见前面partial的代码);再说的明白点: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表示对以上除法得出的结果求平方根;大家可以对照一下前面非函数编程的代码,是一样一样滴 :) 看似蛮怕人的一大坨代码,展开分析后难度立马将至零。如果各位看官最后表示还是未看明白,那完全是本猫语言表达能力的问题,欢迎提问。
解释完毕,打完收功,大功告成。

相关文章
|
4月前
|
前端开发 JavaScript 数据处理
深入学习JavaScript ES8函数式编程:特性与实践指南
深入学习JavaScript ES8函数式编程:特性与实践指南
45 0
|
4天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
1月前
|
监控 JavaScript 安全
监控内网电脑软件设计与实现:基于Node.js的服务器端架构分析
在当今信息技术高度发达的时代,监控内网电脑的需求日益增长。企业需要确保网络安全,个人用户也需要监控家庭网络以保护隐私和安全。本文将介绍一种基于Node.js的服务器端架构,用于设计和实现监控内网电脑软件。
86 0
|
6月前
|
JavaScript 数据安全/隐私保护 Python
JS逆向 -- 某视频vurl值的加密分析
JS逆向 -- 某视频vurl值的加密分析
81 0
|
2月前
|
机器学习/深度学习 自然语言处理 JavaScript
GEE机器学习——最大熵分类器案例分析(JavaScript和python代码)
GEE机器学习——最大熵分类器案例分析(JavaScript和python代码)
41 0
|
3月前
|
前端开发 JavaScript 数据处理
深入学习JavaScript ES8函数式编程:特性与实践指南
深入学习JavaScript ES8函数式编程:特性与实践指南
65 0
|
4月前
|
JavaScript 前端开发 索引
JavaScript函数式编程【进阶】
JavaScript函数式编程【进阶】
24 1
|
4月前
|
存储 JavaScript 前端开发
JavaScript函数式编程[入门]
JavaScript函数式编程[入门]
28 1
|
4月前
|
自然语言处理 JavaScript 前端开发
javaScript-06 表单验证 详细易懂,加案例分析
javaScript-06 表单验证 详细易懂,加案例分析
|
5月前
|
JavaScript 前端开发 安全
JavaScript安全性分析:了解常见的Web安全问题和防范攻击手段
JavaScript安全性分析:了解常见的Web安全问题和防范攻击手段