用函数式编程技术编写优美的 JavaScript_ibm_javascript技巧

因为函数式编程采用了完全不同的组织程序的方式,所以那些习惯于采用命令式范例的程序员可能会发现函数式编程有点难学。在这篇文章中,您将了解一些关于如何采用函数式风格,用 JavaScript 编写良好的、优美的代码的示例。我将讨论: 

函数式编程概念,包括匿名函数、调用函数的不同方法,以及将函数作为参数传递给其他函数的方式。

函数式概念的运用,采用的示例包括:扩展数组排序;动态 HTML 生成的优美代码;系列函数的应用。 
函数式编程概念

 请告诉每个人。请把这个提交给:

  
  Digg  

  Slashdot  

 

在那些通过描述 “如何做” 指定解决问题的方法的语言中,许多开发人员都知道如何进行编码。例如,要编写一个计算阶乘的函数,我可以编写一个循环来描述程序,或者使用递归来查找所有数字的乘积。在这两种情况下,计算的过程都在程序中进行了详细说明。清单 1 显示了一个计算阶乘的可能使用的 C 代码。

清单 1. 过程风格的阶乘

int factorial (int n)
{
  if (n <= 0)
    return 1;
  else
    return n * factorial (n-1);
}

这类语言也叫做过程性 编程语言,因为它们定义了解决问题的过程。函数式编程与这个原理有显著不同。在函数式编程中,需要描述问题 “是什么”。 函数式编程语言又叫做声明性 语言。同样的计算阶乘的程序可以写成所有到 n 的数字的乘积。计算阶乘的典型函数式程序看起来如 清单 2 中的示例所示。

清单 2. 函数式风格的阶乘

factorial n, where n <= 0     := 1
factorial n    := foldr * 1 take n [1..]

第二个语句指明要得到从 1 开始的前 n 个数字的列表(take n [1..]),然后找出它们的乘积,1 为基元。这个定义与前面的示例不同,没有循环或递归。它就像阶乘函数的算术定义。一旦了解了库函数(take 和 foldr)和标记(list notation [ ])的意义,编写代码就很容易,而且可读性也很好。

 只用三行 Miranda 代码就可以编写例程,根据参数,使用广度优先或深度优先遍历处理 n 叉树的每个节点,而且元素可以是任何通用类型。  

从历史上看,函数式编程语言不太流行有各种原因。但是最近,有些函数式编程语言正在进入计算机行业。其中一个例子就是 .NET 平台上的 Haskell。其他情况下,现有的一些语言借用了函数式编程语言中的一些概念。一些 C++ 实现中的迭代器和 continuation,以及 JavaScript 中提供的一些函数式构造(functional construct),就是这种借用的示例。但是,通过借用函数式构造,总的语言编程范例并没有发生变化。JavaScript 并没因为函数式构造的添加就变成了函数式编程语言。

我现在要讨论 JavaScript 中的函数式构造的各种美妙之处,以及在日常编码和工作中使用它们的方式。我们将从一些基本功能开始,然后用它们查看一些更有趣的应用。

匿名函数

在 JavaScript 中,可以编写匿名函数或没有名称的函数。为什么需要这样的函数?请继续往下读,但首先我们将学习如何编写这样一个函数。如果拥有以下 JavaScript 函数: 
清单 3. 典型的函数

function sum(x,y,z) {
  return (x+y+z);
}

然后对应的匿名函数看起来应当如下所示: 
清单 4. 匿名函数

function(x,y,z) {
  return (x+y+z);
}

要使用它,则需要编写以下代码:

清单 5. 应用匿名函数

var sum = function(x,y,z) {
  return (x+y+z);
}(1,2,3);
alert(sum);

使用函数作为值

也可以将函数作为值使用。还可以拥有一些所赋值是函数的变量。在最后一个示例中,还可以执行以下操作: 
清单 6. 使用函数赋值

var sum = function(x,y,z) {
  return (x+y+z);
}
alert(sum(1,2,3));

在上面 清单 6 的示例中,为变量 sum 赋的值是函数定义本身。这样,sum 就成了一个函数,可以在任何地方调用。

调用函数的不同方法

JavaScript 允许用两种方式调用函数,如清单 7 和 8 所示。 

清单 7. 典型的函数应用

alert (“Hello, World!");

清单 8. 用函数作为表达式

(alert) (“Hello, World!");

所以也可以编写以下代码:

清单 9. 定义函数之后就可以立即使用它

( function(x,y,z) { return (x+y+z) } ) (1, 2, 3);

可以在括号中编写函数表达式,然后传递给参数,对参数进行运算。虽然在 清单 8 的示例中,有直接包含在括号中的函数名称,但是按 清单 9 中所示方式使用它时,就不是这样了。

将函数作为参数传递给其他函数

也可以将函数作为参数传递给其他函数。虽然这不是什么新概念,但是在后续的示例中大量的使用了这个概念。可以传递函数参数,如 清单 10 所示。

清单 10. 将函数作为参数传递,并应用该函数

var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); };

var sum = function(x,y,z) {
  return x+y+z;
};

alert( passFunAndApply(sum,3,4,5) ); // 12

执行最后一个 alert 语句输出了一个大小为 12 的值。

使用函数式概念

前一节介绍了一些使用函数式风格的编程概念。所给的示例并没有包含所有的概念,它们在重要性方面也没有先后顺序,只是一些与这个讨论有关的概念而已。下面对 JavaScript 中的函数式风格作一快速总结: 

函数并不总是需要名称。 
函数可以像其他值一样分配给变量。 
函数表达式可以编写并放在括号中,留待以后应用。 
函数可以作为参数传递给其他函数。 

这一节将介绍一些有效使用这些概念编写优美的 JavaScript 代码的示例。(使用 JavaScript 函数式风格,可以做许多超出这个讨论范围的事。)

扩展数组排序 
先来编写一个排序方法,可以根据数组元素的日期对数据进行排序。用 JavaScript 编写这个方法非常简单。数据对象的排序方法接受一个可选参数,这个可选参数就是比较函数。在这里,需要使用 清单 11 中的比较函数。

清单 11. 比较函数

function (x,y) {
    return x.date – y.date;
}

要得到需要的函数,请使用 清单 12 的示例。

清单 12. 排序函数的扩展

arr.sort( function (x,y) {    return x.date – y.date; } );

其中 arr 是类型数组对象。排序函数会根据 arr 数组中对象的日期对所有对象进行排序。比较函数和它的定义一起被传递给排序函数,以完成排序操作。使用这个函数: 

每个 JavaScript 对象都有一个 date 属性。 
JavaScript 的数组类型的排序函数接受可选参数,可选参数是用来排序的比较函数。这与 C 库中的 qsort 函数类似。 

动态生成 HTML 的优美代码 
在这个示例中,将看到如何编写优美的代码,从数组动态地生成 HTML。可以根据从数据中得到的值生成表格。或者,也可以用数组的内容生成排序和未排序的列表。也可以生成垂直或水平的菜单项目。 
清单 13 中的代码风格通常被用来从数组生成动态 HTML。

清单 13. 生成动态 HTML 的普通代码

var str=' ';
for (var i=0;i<arr.length;i++) {
  var element=arr[i];
  str+=... HTML generation code...
}
document.write(str);

可以用 清单 14 的代码替换这个代码。

清单 14. 生成动态 HTML 的通用方式

Array.prototype.fold=function(templateFn) {
  var len=this.length;
  var str=' ';
  for (var i=0 ; i<len ; i++) 
    str+=templateFn(this[i]);
  return str;
}

function templateInstance(element) {
  return ... HTML generation code ...
}

document.write(arr.fold(templateInstance));

我使用 Array 类型的 prototype 属性定义新函数 fold。现在可以在后面定义的任何数组中使用该函数。

系列函数的应用 
考虑以下这种情况:想用一组函数作为回调函数。为实现这一目的,将使用 window.setTimeout 函数,该函数有两个参数。第一个参数是在第二个参数表示的毫秒数之后被调用的函数。清单 15 显示了完成此操作的一种方法。 
清单 15. 在回调中调用一组函数

window.setTimeout(function(){alert(‘First!');alert(‘Second!');}, 5000);

清单 16 显示了完成此操作的更好的方式。

清单 16. 调用系列函数的更好的方式

Function.prototype.sequence=function(g) {
  var f=this;
  return function() {
    f();g();
  }
};
function alertFrst() { alert(‘First!'); }
function alertSec() { alert(‘Second!'); }
setTimeout( alertFrst.sequence(alertSec), 5000);

在处理事件时,如果想在调用完一个回调之后再调用一个回调,也可以使用 清单 16 中的代码扩展。这可能是一个需要您自行完成的一个练习,现在您的兴趣被点燃了吧。

 

 回页首 

结束语

在许多领域中都可以应用 JavaScript 中的函数式编程,以优美的方式完成日常活动。这篇文章中的示例只介绍了几种情况。如果您找到了函数式编程的合适场景,并应用这些概念,那么您就会有更多的理解,并且可以增加您的优美程度。
更多来自

时间: 2024-10-02 16:48:00

用函数式编程技术编写优美的 JavaScript_ibm_javascript技巧的相关文章

用函数式编程技术编写优美的 JavaScript_javascript技巧

级别: 初级 Shantanu Bhattacharya (shantanu@justawordaway.com), 首席顾问, Siemens Information Systems Limited 2006 年 7 月 20 日 函数式或声明性编程是非常强大的编程方法,正逐渐在软件行业流行起来.这篇文章将介绍一些相关的函数式编程概念,并提供有效使用这些概念的示例.作者将解释如何使用 JavaScript(TM)(JavaScript 能导入函数式编程的构造和特性)编写优美的代码. 简介 函数

F#入门:使用.NET Framework中的函数式编程技术

本文讨论: 安装 F# F# 语言基础 .NET 互操作性 异步 F# 本文使用了以下技术: .NET Framework, F# 目录 为什么要使用 F#? 安装 F# 您好,F# Let 表达式 关键字 For 管道 F# 也能够处理对象 异步 F# 与 F# 合作 作 为 Microsoft .NET Framework 家族的新成员,F# 提供类型安全.性能以及类似脚本语言的工作能力,所有这些都是 .NET 环境的一部分.此函数式语言由 Microsoft 研究院的 Don Syme 发

[译]跌宕起伏的函数式编程(软件编写)(第一部分)

本文讲的是[译]跌宕起伏的函数式编程(软件编写)(第一部分), 烟雾的方块艺术 -MattysFlicks -(CC BY 2.0) 注意:这是从基础学习函数式编程和使用 JavaScript ES6+ 编写软件的第一部分.保持关注,接下来还有很多! 当我 6 岁时,我花了很多时间跟我的小伙伴玩电脑游戏,他家有一个装满电脑的房间.对于我说,它们有不可抗拒的魔力.我花了很多时间探索所有的游戏.一天我问他,"我们怎样做一个游戏?" 他不知道,所以我们问了他的老爸,他的老爸爬上一个很高的架子

[译] JavaScript 的函数式编程是一种反模式

本文讲的是[译] JavaScript 的函数式编程是一种反模式, 原文地址:Functional programming in JavaScript is an antipattern 原文作者:Alex Dixon 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:sunui 校对者:LeviDing.xekri 其实 Clojure 更简单些 写了几个月 Clojure 之后我再次开始写 JavaScript.就在我试着写一些很普通的东西的时候,我

探究JavaScript函数式编程的乐趣_javascript技巧

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

使用 JavaScript 进行函数式编程 (一) 翻译_javascript技巧

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

为什么用 JavaScript 学习函数式编程?(软件编写)(第二部分)

本文讲的是为什么用 JavaScript 学习函数式编程?(软件编写)(第二部分), 烟雾的方块艺术 -MattysFlicks -(CC BY 2.0) 注意:这是从基础学习函数式编程和使用 JavaScript ES6+ 撰写软件的第二部分.保持关注,接下来还有很多!第一篇 | 第三篇 > 忘掉你认为知道的关于 JavaScript 的一切,用初学者的眼光去看待它.为了帮助你做到这一点,我们将会从头复习一下 JavaScript 的基础,就像你与其尚未谋面一样.如果你是初学者,那你就很幸运了

Python中的函数式编程

虽然人们总把Python当作过程化的,面向对象的语言,但是他实际上包含了函数化编程中,你需要的任何东西.这篇文章主要讨论函数化编程的一般概念,并说明用Python来函数化编程的技术. 我们最好从艰难的问题开始出发:"到底什么是函数化编程呢?"其中一个答案可能是这样的,函数化编程就是你在使用Lisp这样的语言时所做的(还有Scheme,Haskell,ML,OCAML,Mercury,Erlang和其他一些语言).这是一个保险的回答,但是它解释得并不清晰.不幸的是对于什么是函数化编程,很

函数式思维:为什么函数式编程越来越受关注

到目前为止,在本系列的每期文章中,我都说明了为什么理解函数式编程非常重要.但是,有些原因是在 多期文章中进行说明的,只有在综合思路的更大背景中,才可以完全了解这些原因.在本期文章中,我会探讨 函数式编程方兴未艾的所有原因,并综合前几期文章中的一些个人经验教训. 在计算机科学短短的发 展历史中,技术的主流有时会产生分支,包括实用分支和学术分支.20 世纪 90 年代的 4GL(第四代语言) 是一个实用分支,而函数式编程是来自学术界的一个示例.每隔一段时间,都会有一些分支加入主流,函数式 编程目前也