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

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

时间: 2024-11-08 09:35:50

javascript函数式编程一例分析的相关文章

JavaScript函数式编程(三)

JavaScript函数式编程(一) JavaScript函数式编程(二) 在第二篇文章里,我们介绍了 Maybe.Either.IO 等几种常见的 Functor,或许很多看完第二篇文章的人都会有疑惑: 『这些东西有什么卵用?』 事实上,如果只是为了学习编写函数式.副作用小的代码的话,看完第一篇文章就足够了.第二篇文章和这里的第三篇着重于的是一些函数式理论的实践,是的,这些很难(但并非不可能)应用到实际的生产中,因为很多轮子都已经造好了并且很好用了.比如现在在前端大规模使用的 Promise

20170917 前端开发周报:JavaScript函数式编程、作用域和闭包

1.用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! https://juejin.im/entry/59b86... 2.JavaScript作用域和闭包 作用域和闭包在JavaScript里非常重要.但是在我最初学习JavaScript的时候,却很难理解.这篇文章会用一些例子帮你理解它们.我们先从作用域开始.作用域 JavaScript的作用域限定了你可以访问哪些变量.有两种作

javaScript函数式编程

第1章 JavaScript函数式编程简介 11.1 JavaScript案例 11.2 开始函数式编程 41.2.1 为什么函数式编程很重要 41.2.2 以函数为抽象单元 71.2.3 封装和隐藏 91.2.4 以函数为行为单位 101.2.5 数据抽象 141.2.6 函数式JavaScript初试 171.2.7 加速 191.3 Underscore示例 221.4 总结 23第2章 一等函数与Applicative编程 242.1 函数是一等公民 242.2 Applicative编

JavaScript函数式编程(1):基本思想

1 函数式编程简介 函数式编程是和传统命令式编程区分的一种编程思想,"在函数式编程语言中,函数是第一类的对象,也就是说,函数 不依赖于任何其他的对象而可以独立存在,而在面向对象的语言中,函数 ( 方法 ) 是依附于对象的,属于对象的一部分.这一点决定了函数在函数式语言中的一些特别的性质,比如作为传出 / 传入参数,作为一个普通的变量等.[1]" 函数式编程思想的源头可以追溯到 20 世纪 30 年代,数学家阿隆左 . 丘奇在进行一项关于问题的可计算性的研究,也就是后来的 lambda

javascript 函数式编程

编程范式 编程范式是一个由思考问题以及实现问题愿景的工具组成的框架.很多现代语言都是聚范式(或者说多重范式): 他们支持很多不同的编程范式,比如面向对象,元程序设计,泛函,面向过程,等等. 函数式编程范式 函数式编程就像一辆氢燃料驱动的汽车——先进的未来派,但是还没有被广泛推广.与命令式编程相反,他由一系列语句组成,这些语句用于更新执行时的全局状态.函数式编程将计算转化作表达式求值.这些表达式全由纯数学函数组成,这些数学函数都是一流的(可以被当做一般值来运用和处理),并且没有副作用. 函数式编程

在JavaScript函数式编程里使用Map和Reduce方法

所有人都谈论道workflows支持ECMAScript6里出现的令人吃惊的新特性,因此我们很容易忘掉ECMAScript5带给我们一些很棒的工具方法来支持在JavaScript里进行函数编程,这些工具方法我们现在可以使用了.在这些函数方法里主要的是基于JavaScript 数组对象的map()方法和reduce()方法. 如果你如今还没有使用map()和reduce()方法,那么现在是时候开始使用了.如今绝大部分的JavaScript开发平台都与生俱来的支持ECMAScript5.使用Map方

javascript函数式编程简单介绍

函数式编程在前端已经成为了一个热门的话题,近几年很多的应用程序代码库里大量使用着函数式编程思想.这里对JavaSctipt中的函数式编程做一个简单介绍. 什么是函数式编程 函数式编程是一种编程范式,主要是利用函数把运算过程封装起来,通过组合各种函数来计算结果.函数式编程意味着开发者可以在更短的时间内编写具有更少错误的代码. 函数式编程的简单例子 假设要把一个字符串转换成每个单词首字母大写,可以这样来实现: var string = 'i do like yanggb'; var result =

JavaScript函数式编程(0):函数基础 arguments、this、apply()、call()

1 函数参数 函数的实参和形参个数可以不等,之所以会这样,原因是 ECMAScript 中的参数在内部是用一个数组来表示的.函数接收到的始终都是这个数组,而不关心数组中包含哪些参数(如果有参数的话).如果实参个数大于形参个数,多余的实参不传递值,但是在arguments中可以访问:如果形参个数大于实参,没有传递值的实参将自动被赋予 undefined 值. 2 arguments和this 所有的函数调用都会传递两个隐式参数:arguments和this.实际上,在函数体内可以通过 argume

javaScript函数式编程-包含闭包、链式优化及柯里化

本文着重介绍个人理解的函数式编程. 函数式编程个人理解为:以函数为主要载体的编程方式. 好处: 语义更加清晰 可复用性高 可维护性好 作用域局限.副作用少 基本函数式编程: //实现数组中每个单词首字母大写 //一般写法 const arr = ['apple','orange','pear']; for(const i in arr) { const c = arr[i][0]; arr[i] = c.toUpperCase() + arr[i].slice(1); //slice()从已有的