CoffeeScript - 快速指南


CoffeeScript - 概述

目前,JavaScript 是最快的主流动态语言,被称为网络通用语言。它是由 Brendan Eich 在 1995 年用 10 天开发出来的。

由于其有效的特性,JavaScript 开始流行并迅速走向全球。它在实验室中存在的时间非常短,不足以完善语言。可能正是因为这个原因,尽管 JavaScript 有很多好的部分,但它仍然存在很多设计错误,并且被认为是一种古怪的语言。

什么是 CoffeeScript ?

CoffeeScript 是一种基于 Ruby 和 Python 的轻量级语言,可转编译(从一种源语言编译为另一种源语言)为 JavaScript。它提供了更好的语法,避免了 JavaScript 的古怪部分,同时仍然保留了该语言的灵活性和美丽。

CoffeeScript 的优点

以下是 CoffeeScript 的优点 -

  • 易于理解- CoffeeScript 是 JavaScript 的简写形式,与 JavaScript 相比,它的语法非常简单。使用 CoffeeScript,我们可以编写干净、清晰且易于理解的代码。

  • 少写多做- 对于 JavaScript 中的大量代码,我们需要相对较少的 CoffeeScript 行数。

  • 可靠- CoffeeScript 是一种安全可靠的编程语言,用于编写动态程序。

  • 可读且可维护- CoffeeScript 为大多数运算符提供别名,使代码可读。用 CoffeeScript 编写的程序也很容易维护。

  • 基于类的继承- JavaScript 没有类。它提供了强大但令人困惑的原型来代替它们。与 JavaScript 不同,我们可以在 CoffeeScript 中创建类并继承它们。除此之外,它还提供实例和静态属性以及mixins。它使用 JavaScript 的本机原型来创建类。

  • 无 var 关键字- 无需使用var关键字在 CoffeeScript 中创建变量,因此我们可以避免意外或不需要的范围减速。

  • 避免有问题的符号- 无需在 CoffeeScript 中使用有问题的分号和括号。我们可以使用空格来代替大括号来区分函数、循环等块代码。

  • 广泛的库支持- 在 CoffeeScript 中,我们可以使用 JavaScript 的库,反之亦然。因此,我们在使用 CoffeeScript 时可以访问一组丰富的库。

CoffeeScript 的历史

  • CoffeeScript 由 Jeremy Ashkenas 开发。它于 2009 年 12 月 13 日在 Git 中首次提交。

  • 最初 CoffeeScript 的编译器是用 Ruby 语言编写的。

  • 2010年3月,更换CoffeeScript编译器;这次他们没有使用 Ruby,而是使用了 CoffeeScript 本身。

  • 同年,CoffeeScript 1.0 发布,发布时它是 Git 中心最受欢迎的项目之一。

CoffeeScript 的局限性

  • 对空格敏感- CoffeeScript 对空格非常敏感,因此程序员在提供缩进时需要非常小心。如果我们不保持正确的缩进,整个代码可能会出错。

TutorialsPoint 的 CoffeeScript IDE

您可以使用 Coding Ground 部分https://www.tutorialspoint.com/codingground.htm中提供的 TutorialsPoint CoffeeScript 编译器来编译 CoffeeScript 文件。请按照下面给出的步骤使用我们的 CoffeeScript 编译器。

步骤1

单击以下链接www.tutorialspoint.com访问我们网站的主页。

第2步

单击位于主页右上角的名为CODING GROUND的按钮,如下面的快照中突出显示的那样。

教程点主页

步骤3

这将导致我们的CODING GROUND部分,该部分提供大约 135 种编程语言的在线终端和 IDE。在 Online IDEs 部分中打开 CoffeeScript IDE,如以下快照所示。

编码地面

步骤4

如果您将 CoffeeScript 代码粘贴到main.coffee中(您可以更改文件名)并单击“预览”按钮,那么您可以在控制台中看到编译后的 JavaScript,如下面的快照所示。

CoffeeScript IDE

CoffeeScript - 环境

CoffeeScript 最新版本的编译器是用 CoffeeScript 本身编写的。要在没有浏览器的情况下在系统中运行 CoffeeScript 文件,您需要 JavaScript 运行时。

Node.js

Node.js 是一个 JavaScript 框架,用于开发网络服务器应用程序。它还充当 JavaScript 和操作系统之间的桥梁。

CoffeeScript 的命令行版本作为 Node.js 包分发。因此,要在系统中安装 CoffeeScript(命令行),首先需要安装 node.js。

安装 Node.js

以下是在系统中下载并安装 Node.js 的步骤。

步骤1

访问NodeJS 主页并通过单击下面给出的快照中突出显示的按钮下载其 Windows 稳定版本。

主页

第2步

单击后,名为node-v5.50-x64的.msc文件将下载到您的系统中,运行下载的文件以启动 Node.js 设置。这是 Node.js 设置向导的欢迎页面的快照。

点击下一步

步骤3

单击 Node.js 设置向导的欢迎页面中的下一步按钮,这将引导您进入最终用户许可协议页面。接受许可协议并单击“下一步”按钮,如下所示。

许可协议

步骤4

在下一页中,您需要将目标文件夹设置为要安装 Node.js 的路径。将路径更改为所需文件夹,然后单击“下一步”按钮。

设置目标文件夹

步骤5

“自定义安装”页面中,选择 Node.js 运行时来安装 node.exe 文件,然后单击“下一步”。

自定义设置

步骤6

最后,单击“安装”按钮,这将开始 Node.js 安装。

单击安装

单击 Node.js 设置向导的“完成”按钮(如下所示)以完成 Node.js 安装。

单击“完成”

安装 CoffeeScript

Node.js 为您提供命令提示符(Node.js 命令提示符)。您可以通过在其中输入以下命令来全局安装 CoffeeScript。

c:\> npm install -g coffeescript

执行上述命令后,CoffeeScript 将通过生成以下输出安装在您的系统中。

安装 CoffeeScript

确认

您可以通过键入以下命令来验证 CoffeeScript 的安装。

c:\> coffee -v

成功安装后,此命令将为您提供 CoffeeScript 的版本,如下所示。

确认

CoffeeScript - 命令行实用程序

在 Node.js 上安装 CoffeeScript 时,我们可以访问咖啡命令行实用程序。在这里,咖啡命令是关键命令。使用此命令的各种选项,我们可以编译并执行 CoffeeScript 文件。

您可以使用Coffee命令的-h--help选项查看选项列表。打开Node.js 命令提示符并在其中执行以下命令。

c:\>coffee -help

此命令为您提供咖啡的各种选项的列表,以及每个选项执行的操作的描述,如下所示。

咖啡命令帮助

编译 CoffeeScript 代码

CoffeeScript 文件以扩展名.coffee保存。您可以使用 Coffee 命令的-c 或 --compile选项来编译这些文件,如下所示。

c:\>coffee -c filename.coffee

例子

假设您的系统中有一个文件,其中包含以下 CoffeeScript 代码,该代码在控制台上打印一条消息。

name = "Raju"
console.log "Hello"+name+" Welcome to Tutorialspoint"

注意- console.log()函数在控制台上打印给定的字符串。

要编译上述代码,请将其保存在名为example.coffee的文件中。打开 Node.js 命令提示符。浏览保存文件的路径,并使用Coffee 命令行实用程序的 Coffee 命令的-c选项对其进行编译,如下所示。

c:\> coffee -c sample.coffee

执行上述命令时,CoffeeScript 编译器会编译给定文件 (sample.coffee) 并将其保存在当前位置,名称为 example.js,如下所示。

JS文件

如果打开sample.js 文件,您可以观察生成的JavaScript,如下所示。

// Generated by CoffeeScript 1.10.0
(function() {
  var name;
  name = "Raju";
  console.log("Hello " + name + " Welcome to Tutorialspoint");

}).call(this);

执行 CoffeeScript 代码

您只需将文件名传递给 Node.js 命令提示符中的 Coffee 命令即可执行 CoffeeScript 文件,如下所示。

c:\> coffee sample.coffee

例子

例如,让我们执行sample.coffee 文件。为此,请打开 Node.js 命令提示符。浏览保存文件的路径,并通过直接将其名称传递给 Coffee 命令来执行该文件,如下所示。

执行

观看并编译

在某些情况下,我们有可能对脚本进行大量更改。使用Coffee 命令的–w选项,您可以观察脚本的更改。

您可以使用-wc选项同时监视和编译文件,如下所示。当我们使用此选项时,每次在脚本中进行更改时都会重新编译该文件。

c:\>coffee -wc file_name

例子

假设我们使用-wc选项编译了一个名为example.coffee的文件,并且对脚本进行了三次修改。每次我们更改脚本时,.coffee文件都会重新编译,留下 Node.js 命令提示符,如下所示。

观看并编译

设置输出目录

使用-o选项,我们可以设置输出目录来放置编译后的 JavaScript 文件,如下所示。

c:\>coffee -o "Required path where we want our .js files" file_name

例子

让我们通过在命令提示符下执行以下命令,使用-o选项将 example.coffee 文件的 JavaScript 代码保存在E 驱动器中名为data的文件夹中。

c:\>coffee -o E://data sample.coffee

以下是执行上述命令后给定文件夹的快照。在这里您可以观察sample.coffee的JavaScript文件

输出目录

打印编译后的 JavaScript

如果我们想在控制台上打印编译后的 JavaScript,我们必须使用Coffee 命令的-p选项,如下所示。

c:\>coffee -p file_name

例子

例如,您可以使用-p选项在控制台上打印example.coffee文件的已编译 JavaScript 代码,如下所示。

打印 JavaScript

REPL(读取评估打印循环)

CoffeeScript 为您提供了一个 REPL 交互式 shell。该 shell 用于计算 CoffeeScript 表达式。您可以在此 shell 中键入任何 CoffeeScript 代码并立即获得结果。您可以通过执行不带任何选项的Coffee命令来打开 REPL,如下所示。

执行咖啡命令

使用这个 shell,我们可以为变量赋值、创建函数并评估结果。如下图所示,如果我们在 REPL 中调用函数,它会打印函数的值。如果我们给它一个表达式,它就会计算并打印表达式的结果。如果我们简单地在其中键入语句,它就会打印最后一个语句的值。

REPL 用法

在 REPL 中,您可以通过按ctrl+v访问多行模式,您可以在其中评估多行代码(如函数),并且可以通过再次按ctrl+v返回 REPL 模式。这是多线模式的使用示例。

REPL 多行函数

通过浏览器运行 CoffeeScript

我们可以像 JavaScript 一样使用 HTML 的 <script> 标签运行 CoffeeScript,如下所示。

<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"
   type="text/javascript" charset="utf-8"></script>
<script type="text/coffeescript">
  # Some CoffeeScript
</script>

但为此,我们必须在每个应用程序中导入该库,并且在显示输出之前,CoffeeScript 代码将被逐行解释。这会减慢您的应用程序的速度,因此不建议使用这种方法。

因此,要在应用程序中使用 CoffeeScript,您需要使用 Coffee 命令行实用程序预编译它们,然后就可以在应用程序中使用生成的 JavaScript。

CoffeeScript - 语法

在上一章中,我们已经了解了如何安装 CoffeeScript。在本章中,我们来看看 CoffeeScript 的语法。

与 JavaScript 的语法相比,CoffeeScript 的语法更加优雅。它避免了麻烦的功能,如大括号、分号和可变减速。

CoffeeScript 语句

与 C、C++ 和 Java 等许多其他编程语言不同,CoffeeScript 中的语句不以分号 (;) 结尾。相反,CoffeeScript 编译器将每个新行视为一个单独的语句。

例子

以下是 CoffeeScript 语句的示例。

name = "Javed"
age = 26

同样,我们可以将两条语句写在一行中,并用分号分隔它们,如下所示。

name = "Javed";age = 26

CoffeeScript 变量(无 var 关键字)

在 JavaScript 中,我们在创建变量之前使用var关键字声明变量,如下所示。

var name = "Javed"
var age = 20

在 CoffeeScript 中创建变量时,无需使用var关键字声明它们。我们可以直接创建一个变量,只需为其赋值即可,如下所示。

name = "Javed"
age = 20

无括号

一般来说,我们在声明函数、调用函数以及分隔代码块时使用括号以避免歧义。在 CoffeeScript 中,不需要使用括号,在创建函数时,我们使用箭头标记 ( -> ) 代替括号,如下所示。

myfunction = -> alert "Hello"

尽管如此,在某些情况下我们还是必须使用括号。在调用不带参数的函数时,我们将使用括号。例如,如果我们在 CoffeeScript 中有一个名为 my_function 的函数,那么我们必须如下所示调用它。

my_function()

同样的,我们也可以用括号来分隔不明确的代码。如果观察以下示例,不带大括号,结果为 2233,带大括号时,结果为 45。

alert "The result is  "+(22+33)

没有大括号

在 JavaScript 中,对于函数、循环和条件语句等块代码,我们使用花括号。在 CoffeeScript 中,不需要使用花括号。相反,我们必须在正文中保持适当的缩进(空白)。这是受Python语言启发的功能。

以下是 CoffeeScript 中函数的示例。在这里您可以观察到,我们没有使用花括号,而是使用三个空格作为缩进来分隔函数体。

myfunction = -> 
   name = "John"
   alert "Hello"+name

CoffeeScript 评论

在任何编程语言中,我们都使用注释来编写有关我们编写的代码的描述。这些评论不被视为程序的一部分。CoffeeScript 中的注释与 Ruby 语言的注释类似。CoffeeScript 提供两种类型的注释,如下所示 -

单行注释

每当我们想要在 CoffeeScript 中注释一行时,我们只需在其前面放置一个哈希标签,如下所示。

# This is the single line comment in CoffeeScript

哈希标签 ( # )后面的每一行都被 CoffeeScript 编译器视为注释,并且它会编译给定文件中除注释之外的其余代码。

多行注释

每当我们想要在 CoffeeScript 中注释多行(多行)时,我们可以通过将这些行包装在一对三重哈希标签中来实现,如下所示。

###
These are the multi line comments in CoffeeScript
We can write as many number of lines as we want 
within the pair of triple hash tags.
###

CoffeeScript 保留关键字

下表给出了 CoffeeScript 中所有保留字的列表。它们不能用作 CoffeeScript 变量、函数、方法、循环标签或任何对象名称。

案件

默认

功能

变量

空白

常量

枚举

出口

进口

本国的

__hasProp

__扩展

__片

__绑定

__指数

实施

别的

界面

包裹

私人的

受保护的

民众

静止的

屈服

真的

错误的

无效的

新的

删除

类型

论点

评估

实例化

返回

休息

继续

调试器

如果

别的

转变

为了

尽管

尝试

抓住

最后

班级

延伸

极好的

不明确的

然后

除非

直到

环形

经过

什么时候

或者

不是

不是

是的

离开

CoffeeScript - 数据类型

CoffeeScript 数据类型

编程语言最基本的特征之一是它支持的数据类型集。这些是可以用编程语言表示和操作的值类型。

由于 CoffeeScript 逐行编译为 JavaScript,因此 CoffeeScript 提供的数据类型与 JavaScript 相同。除了 CoffeeScript 添加了一些额外的本质之外。

CoffeeScript 提供以下数据类型可供使用 -

  • 字符串- 字符串数据类型通常表示一组字符,我们表示一个带有双引号(“”)的字符串值。

    示例:“Raj”、“Rahman”

  • 数字- 数字数据类型表示数值。

    示例:12、212 等

  • 布尔- 布尔数据类型表示一位信息。只有两个可能的值:true 和 false。

  • 数组- 数组对象允许您在单个变量中存储多个值。它存储相同类型元素的固定大小的顺序集合。

    示例:学生 = ["Rahman","Ramu","Ravi","Robert"]

  • 对象- CoffeeScript 中的对象与 JavaScript 中的对象类似,它们是属性的集合。其中属性包含由分号 (:) 分隔的键和值。简而言之,CoffeeScript 对象是键值对的集合。

    示例:学生 = {姓名:“Mohammed”,年龄:24,电话:9848022338 }

  • Null - 已定义且不包含任何值的变量被视为 null。这类似于 JavaScript 中的 null 值。

  • 未定义- 未分配任何值的变量被视为未定义变量。如果您在代码中使用此类变量,那么您将收到未定义的错误。

我们将在单独的章节中详细介绍数据类型数组和对象。

CoffeeScript - 变量

变量只不过是命名容器。您可以将数据放入这些容器中,然后使用其容器的名称引用数据。

CoffeeScript 变量

在JavaScript中,在使用变量之前,我们需要声明并初始化它(赋值)。与 JavaScript 不同,在 CoffeeScript 中创建变量时,无需使用var关键字声明它。我们只需将值分配给文字即可创建一个变量,如下所示。

name = variable name

例子

在下面的 CoffeeScript 代码中,我们定义了两个变量nameage,分别是字符串和数字数据类型。将其保存在名为variable_example.coffee的文件中。

name = "Javed"
age = 25

编译代码

通过在命令提示符中执行以下命令来编译上述 CoffeeScript 代码。

c:\> compile -c variable_example.coffee

编译时,将生成一个名为variable_example.js的JavaScript文件,其中包含以下内容。在这里您可以观察到编译器代表我们使用var关键字声明变量(年龄和名称) 。

// Generated by CoffeeScript 1.10.0
(function() {
  var age, name;
  name = "Javed";
  age = 25;
  
}).call(this);

变量范围

变量的作用域是定义它的程序区域。JavaScript 和 CoffeeScript 变量只有两个作用域。

  • 全局变量- 全局变量具有全局作用域,这意味着它可以在 JavaScript 代码中的任何位置使用。

  • 局部变量- 局部变量仅在定义它的函数中可见。函数参数始终是该函数的本地参数。

JavaScript 中变量的问题

在 JavaScript 中,每当我们不使用var关键字定义变量时,它都会在全局范围内创建。这会导致很多问题。考虑以下示例 -

<script type = "text/javascript">
   var i = 10;
   document.write("The value of global variable i is "+ i);   
   document.write("<br>");
   test();
   function test() {
      i = 20;
      document.write("The value of local variable i is "+i);
      document.write("<br>");
   }
   document.write("The value of global variable i is "+i);
</script>

执行时,上面的 JavaScript 会给出以下输出 -

The value of global variable i is 10

The value of local variable i is 20

The value of global variable i is 20

在上面的例子中,我们在全局空间中创建了一个名为i的变量,并为其赋值 10。在函数内,当尝试创建同名的局部变量时,我们声明为i=20;没有 var 关键字。由于我们错过了var关键字,全局变量i的值被重新分配为 20。

因此,建议使用var关键字声明变量。

CoffeeScript 中的变量作用域

每当我们编译 CoffeeScript 文件时,CoffeeScript 编译器都会创建一个匿名函数,并在该函数中将 CoffeeScript 代码逐行转编译为 JavaScript。(如果我们愿意,我们可以使用编译命令的-b--bare选项删除顶级函数包装器)我们创建的每个变量都是使用匿名函数中的var关键字声明的,因此默认情况下,每个变量在 CoffeeScript 中是本地的。

(function() {
  var age, name;
  name = "javed";
  age = 20;
}).call(this);

无论如何,如果我们愿意,我们可以声明一个具有全局命名空间的变量。我们可以明确地做到这一点,如下所示。

obj = this
obj.age = 30

CoffeeScript 变量名称(文字)

在 CoffeeScript 中命名变量时,请记住以下规则。

  • 您不应使用任何 CoffeeScript 保留关键字作为变量名。这些关键字将在下一节中提到。例如,中断或布尔变量名称无效。

  • CoffeeScript 变量名称不应以数字 (0-9) 开头。它们必须以字母或下划线字符开头。例如,123test 是无效变量名称,但 _123test 是有效变量名称。

  • CoffeeScript 变量名称区分大小写。例如,Namename是两个不同的变量。

CoffeeScript - 运算符和别名

CoffeeScript 运算符

运算符是告诉编译器执行特定数学或逻辑函数的符号。让我们看一个简单的表达式4 + 5 等于 9。这里 4 和 5 称为操作数,“+”称为运算符

CoffeeScript 提供的运算符与 JavaScript 中的相同,除了一些差异之外。JavaScript 中存在一些有问题的运算符。CoffeeScript 要么删除了它们,要么修改了它们的功能,并且还引入了一些新的运算符。

以下是 CoffeeScript 支持的运算符列表。

  • 算术运算符
  • 比较运算符
  • 逻辑(或关系)运算符
  • 赋值运算符

CoffeeScript 别名

除了运算符之外,CoffeeScript 还提供别名。CoffeeScript 为各种运算符和符号提供别名,以使您的 CoffeeScript 代码可读且更加用户友好。

让我们一一看看CoffeeScript的所有运算符和别名。

算术运算符

CoffeeScript 支持以下算术运算符。假设变量A10且变量B20,则 -

显示示例

序列号 操作符及说明 例子
1

+(加法)

添加两个操作数

A + B = 30
2

−(减法)

从第一个操作数中减去第二个操作数

A - B = -10
3

*(乘法)

将两个操作数相乘

A * B = 200
4

/ (分配)

将分子除以分母

乙/甲=2
5

%(模数)

输出整数除法的余数

B % A = 0
6

++(增量)

将整数值加一

A++ = 11
7

--(递减)

将整数值减一

A-- = 9

比较运算符

JavaScript 支持以下比较运算符。假设变量A10且变量B20,则 -

显示示例

序列号 操作符及说明 例子
1

= =(等于)

检查两个操作数的值是否相等,如果相等,则条件成立。

(A == B) 不正确。
2

!=(不等于)

检查两个操作数的值是否相等,如果值不相等,则条件成立。

(A != B) 为真。
3

>(大于)

检查左操作数的值是否大于右操作数的值,如果是,则条件成立。

(A > B) 不正确。
4

<(小于)

检查左操作数的值是否小于右操作数的值,如果是,则条件成立。

(A < B) 为真。
5

>=(大于或等于)

检查左操作数的值是否大于或等于右操作数的值,如果是,则条件成立。

(A >= B) 不正确。
6

<=(小于或等于)

检查左操作数的值是否小于或等于右操作数的值,如果是,则条件成立。

(A <= B) 为真。

下表显示了一些比较运算符的别名。假设A持有20且变量B持有20

显示示例

操作员 别名 例子
= =(等于) A is B给你真实的。
!= =(不等于) 不是 A 不是 B给你假的。

逻辑运算符

CoffeeScript 支持以下逻辑运算符。假设变量A10且变量B20,则 -

显示示例

序列号 操作符及说明 例子
1

&&(逻辑与)

如果两个操作数均非零,则条件为真。

(A && B) 是正确的。
2

|| (逻辑或)

如果两个操作数中的任何一个非零,则条件为真。

(A || B) 为真。
3

!(逻辑非)

反转其操作数的逻辑状态。如果条件为真,则逻辑 NOT 运算符会将其设为假。

!(A && B) 是错误的。

下表显示了一些逻辑运算符的别名。假设Xtrue且变量Yfalse

显示示例

操作员 别名 例子
&&(逻辑与) X 和 Y给你假
|| (逻辑或) 或者 X 或 Y给你真实的
!(不是x) 不是 不是 X给你假

按位运算符

CoffeeScript 支持以下按位运算符。假设变量A持有2且变量B持有3,则 -

显示示例

序列号 操作符及说明 例子
1

&(按位与)

它对其整数参数的每一位执行布尔 AND 运算。

(A & B) 为 2。
2

| (按位或)

它对其整数参数的每一位执行布尔 OR 运算。

(A | B) 为 3。
3

^(按位异或)

它对其整数参数的每一位执行布尔异或运算。异或意味着操作数一为真或操作数二为真,但不能两者都为真。

(A^B) 为 1。
4

~(按位非)

它是一个一元运算符,通过反转操作数中的所有位来进行运算。

(~B) 为-4。
5

<<(左移)

它将第一个操作数中的所有位向左移动第二个操作数中指定的位数。新的位用零填充。将值左移一位相当于乘以 2,左移两位相当于乘以 4,依此类推。

(A << 1) 为 4。
6

>>(右移)

二进制右移运算符。左操作数的值向右移动右操作数指定的位数。

(A >> 1) 是 1。

赋值运算符

CoffeeScript 支持以下赋值运算符 -

显示示例

序列号 操作符及说明 例子
1

=(简单赋值)

将右侧操作数中的值分配给左侧操作数

C = A + B 将 A + B 的值赋给 C
2

+=(添加和赋值)

它将右操作数添加到左操作数,并将结果分配给左操作数。

C += A 等价于 C = C + A
3

-=(减法和赋值)

它从左操作数中减去右操作数,并将结果赋给左操作数。

C -= A 相当于 C = C - A
4

*=(乘法和赋值)

它将右操作数与左操作数相乘,并将结果赋给左操作数。

C *= A 相当于 C = C * A
5

/=(除法和赋值)

它将左操作数与右操作数相除,并将结果赋给左操作数。

C /= A 相当于 C = C / A
6

%=(模块和分配)

它使用两个操作数取模并将结果分配给左侧操作数。

C %= A 相当于 C = C % A

注意- 相同的逻辑适用于按位运算符,因此它们将变得像 <<=、>>=、>>=、&=、|= 和 ^=。

CoffeeScript 中的相等运算符

在使用 JavaScript 时,您会遇到两种类型的相等运算符=====

JavaScript 中的==运算符是强制类型的,即如果一个运算中两个操作数的类型不同,则将其中一个运算符的数据类型转换为其他运算符的数据类型,然后对两者进行比较。

CoffeeScript 避免了这种不良的强制转换,它将==运算符编译为 JavaScript ===的严格比较运算符。

如果我们使用===比较两个操作数,那么只有当它们的值和数据类型都相等时才会返回true ,否则返回false

例子

考虑以下示例。这里我们有两个变量aba保存的是整数类型的值 21,b保存的是相同的值,但它是字符串类型。在 CoffeeScript 中,当我们比较ab时,结果将为false。(因为CoffeeScript 的==运算符转换为JavaScript 的===运算符)

a=21
b="21"
result = 21=='21'
console.log result

编译时,上面的 CoffeeScript 会生成以下 JavaScript

// Generated by CoffeeScript 1.10.0
(function() {
  var a, b, result;
  
  a = 21;
  
  b = "21";
  
  result = a === b;
  console.log(result);
}).call(this);

执行时,它会产生以下输出。

false

存在主义运算符

CoffeeScript 提供了一个称为存在运算符的新运算符来验证变量是否存在。它用 表示。除非变量为 null 或未定义,否则存在运算符返回 true。

例子

下面给出了存在运算符的示例。这里我们有三个变量,即name、agesubject,我们使用存在运算符验证变量 name 和 Phone 的存在性。

name="Ramu"
age=24
subject="Engineering"
verify_name = name?
verify_phone = phone?
console.log verify_name
console.log verify_phone

编译时,将生成以下 JavaScript 代码。

// Generated by CoffeeScript 1.10.0
(function() {
  var age, name, subject, verify_name, verify_phone;
  name = "Ramu";
  age = 24;

  subject = "Engineering";
  verify_name = name != null;
  verify_phone = typeof phone !== "undefined" && phone !== null;
  console.log(verify_name);
  console.log(verify_phone);

}).call(this);

如果我们执行上面的 CoffeeScript 文件,它会产生以下输出。

true
false

注意- 我们有存在运算符?的访问器变体 。我们可以用它来代替 . 运算符找出空引用。

连锁比较

与在 Python 中一样,我们可以在 CoffeeScript 的单个表达式中使用一系列比较运算符。

例子

以下是使用链式比较的示例。

score = 70
passed = 100 > score > 40

console.log passed

编译时,示例 CoffeeScript 会为您提供以下 JavaScript 代码。

// Generated by CoffeeScript 1.10.0
(function() {
  var passed, score;

  score = 70;

  passed = (100 > score && score > 40);

  console.log(passed);

}).call(this);

如果执行上面的 CoffeeScript 代码,它会产生以下输出。

true

注意- CoffeeScript 删除了三元运算符;我们可以使用内联 if语句来代替它。

CoffeeScript 别名

一般来说,CoffeeScript 为各种运算符和符号提供别名,以使您的 CoffeeScript 代码可读且更加用户友好。以下是 CoffeeScript 提供的别名。

姓名 运算符/符号 别名
“等于”运算符 ==
“不等于”运算符 !== 不是
“非”运算符 不是
“与”运算符 &&
“或”运算符 || 或者
布尔值 true 真的 是的,是的,在
布尔值 false 错误的 关闭,不
当前对象 @
换行(或)分号 \n 或 ; 然后
如果的逆 !如果 除非
测试阵列是否存在
测试对象是否存在
求幂 一个**
整数除法 一个// b
股息相关模数 %% b _

例子

以下示例展示了如何在 CoffeeScript 中使用别名 -

a=21; b=21

x = true; y = false

console.log a is b

console.log a isnt b

console.log x and y

console.log x or y

console.log yes or no

console.log on or off

console.log a**b

console.log a//b

console.log a%%b

编译上面的示例时,它会为您提供以下 JavaScript 代码。

// Generated by CoffeeScript 1.10.0
(function() {
  var a, b, x, y,
    modulo = function(a, b) { return (+a % (b = +b) + b) % b; };

  a = 21;

  b = 21;

  x = true;

  y = false;

  console.log(a === b);

  console.log(a !== b);

  console.log(x && y);

  console.log(x || y);

  console.log(true || false);

  console.log(true || false);

  console.log(Math.pow(a, b));

  console.log(Math.floor(a / b));

  console.log(modulo(a, b));

}).call(this);

如果执行上面的 CoffeeScript 文件,它会产生以下输出 -

true
false
false
true
true
true
5.842587018385982e+27
1
0

CoffeeScript - 条件

在编程时,我们会遇到一些场景,我们必须从给定的一组路径中选择一条路径。在这种情况下,我们需要条件语句。条件语句帮助我们做出决定并采取正确的行动。

以下是大多数编程语言中常见的典型决策结构的一般形式。

决策结构

JavaScript 支持if语句(包括其变体)和switch语句。除了 JavaScript 中可用的条件之外,CoffeeScript 还包括except语句、if 的否定等等。

以下是 CoffeeScript 提供的条件语句。

编号 声明及说明
1 if 语句

if语句由一个布尔表达式后跟一个或多个语句组成。当给定的布尔表达式为 true 时,这些语句就会执行。

2 if...else 语句

if语句后面可以跟一个可选的else语句,该语句在布尔表达式为 false 时执行

3 除非声明

except语句与if类似,带有一个布尔表达式后跟一个或多个 except 语句。当给定的布尔表达式为 false 时,将执行这些语句。

4 除非...否则声明

except语句后面可以跟一个可选的else语句,该语句在布尔表达式为 true 时执行。

5 switch语句

switch语句允许测试变量是否与值列表相等

CoffeeScript 中的 then 关键字

if和unless语句是多行编写的块语句CoffeeScript 提供了then关键字,使用它我们可以在一行中编写ifexcept语句。

以下是 CoffeeScript 中使用then关键字编写的语句。

编号 声明及说明
1 如果-那么语句

使用 if-then 语句,我们可以将CoffeeScript 的if语句写在一行中。它由一个布尔表达式、后跟 then 关键字、后跟一个或多个语句组成。当给定的布尔表达式为 true 时,这些语句就会执行。

2 if-then...else 语句

if-then 语句后面可以跟一个可选的else语句,该语句在布尔表达式为 false 时执行。使用 if-then...else 语句,我们可以将 if...else 语句写在一行中。

3 除非-则语句

使用unless-then语句,我们可以将CoffeeScript的unless语句写在一行中。它由一个布尔表达式、后跟then关键字、后跟一个或多个语句组成。当给定的布尔表达式为 false 时,将执行这些语句。

4 except...then else 语句

except-then 语句后面可以跟一个可选的else语句,该语句在布尔表达式为 true 时执行。使用unless-then...else 语句,我们可以将unless...else 语句写在一行中。

postfix if 和 postfix except 语句

在 CoffeeScript 中,您还可以编写ifexcept语句,其中先有一个代码块,后跟ifexcept关键字,如下所示。这是这些语句的后缀形式。在用 CoffeeScript 编写程序时它很方便。

#Postfix if
Statements to be executed if expression

#Postfix unless
Statements to be executed unless expression

显示示例

CoffeeScript - 循环

在编码时,您可能会遇到需要一遍又一遍地执行一段代码的情况。在这种情况下,您可以使用循环语句。

一般来说,语句是按顺序执行的:首先执行函数中的第一个语句,然后执行第二个语句,依此类推。

循环语句允许我们多次执行一条语句或一组语句。下面给出的是大多数编程语言中循环语句的一般形式

循环架构

JavaScript 提供while、forfor..in循环。CoffeeScript 中的循环与 JavaScript 中的循环类似。

while循环及其变体是 CoffeeScript 中唯一的循环结构。CoffeeScript 为您提供了推导式,而不是常用的for循环,这些推导式将在后面的章节中详细讨论。

CoffeeScript 中的 while 循环

while循环是 CoffeeScript 提供的唯一低级循环。它包含一个布尔表达式和一个语句块。只要给定的布尔表达式为 true,while 循环就会重复执行指定的语句块一旦表达式变为假,循环就会终止。

句法

以下是 CoffeeScript 中while循环的语法。在这里,不需要括号来指定布尔表达式,我们必须使用(一致数量的)空格来缩进循环体,而不是用大括号括起来。

while expression
   statements to be executed

例子

以下示例演示了CoffeeScript 中while循环的用法。将此代码保存在名为while_loop_example.coffee的文件中

console.log "Starting Loop "
count = 0  
while count < 10
   console.log "Current Count : " + count
   count++;
   
console.log "Set the variable to different value and then try"

打开命令提示符并编译 .coffee 文件,如下所示。

c:\> coffee -c while_loop_example.coffee

编译时,它会给出以下 JavaScript。

// Generated by CoffeeScript 1.10.0
(function() {
  var count;

  console.log("Starting Loop ");

  count = 0;

  while (count < 10) {
    console.log("Current Count : " + count);
    count++;
  }

  console.log("Set the variable to different value and then try");

}).call(this); 

现在,再次打开命令提示符并运行 CoffeeScript 文件,如下所示。

c:\> coffee while_loop_example.coffee

执行时,CoffeeScript 文件会产生以下输出。

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Set the variable to different value and then try 

while 的变体

CoffeeScript中的While循环有两种变体,即until变体loop变体

编号 循环类型和描述
1 直到 while 的变体

while 循环的until体包含一个布尔表达式和一个代码块。只要给定的布尔表达式为假,就会执行该循环的代码块。

2 while 的循环变体

循环变体相当于具有真值(while true)的 while循环。该循环中的语句将重复执行,直到我们使用Break语句退出循环。

CoffeeScript - 理解

在上一章中,我们学习了 CoffeeScript 提供的各种循环、while及其变体。除此之外,CoffeeScript 还提供了称为推导式的附加循环结构。

如果我们显式添加可选的保护子句和当前数组索引的值,这些推导式将取代其他编程语言中的for循环。使用推导式,我们可以迭代数组和对象,迭代数组的推导式是表达式,我们可以在函数中返回它们或分配给变量。

编号 声明及说明
1 for..in 推导式

for..in理解是 CoffeeScript 中理解的基本形式,使用它我们可以迭代列表或数组的元素

2 for..of 理解

就像数组一样,CoffeeScriptScript 提供了一个容器来存储称为对象的键值对。我们可以使用CoffeeScript 提供的for..of推导式来迭代对象。

3 列表推导式

CoffeeScript 中的列表推导式用于将对象数组映射到另一个数组。

理解索引

元素列表/数组有一个可用于推导式的索引。您可以使用变量在推导式中使用它,如下所示。

for student,i in [element1, element2, element3]

例子

以下示例演示了CoffeeScript 中for...in理解式索引的用法。将此代码保存在名为for_in_index.coffee的文件中

for student,i in ['Ram', 'Mohammed', 'John']
   console.log "The name of the student with id "+i+" is: "+student 

打开命令提示符并编译 .coffee 文件,如下所示。

c:\> coffee -c for_in_index.coffee

编译时,它会给出以下 JavaScript。

// Generated by CoffeeScript 1.10.0
(function() {
  var i, j, len, ref, student;

  ref = ['Ram', 'Mohammed', 'John'];
  for (i = j = 0, len = ref.length; j < len; i = ++j) {
    student = ref[i];
    console.log("The name of the student with id " + i + " is: " + student);
  }
}).call(this);

现在,再次打开命令提示符并运行 CoffeeScript 文件,如下所示。

c:\> coffee for_in_index.coffee

执行时,CoffeeScript 文件会产生以下输出。

The name of the student with id 0 is: Ram
The name of the student with id 1 is: Mohammed
The name of the student with id 2 is: John 

推导式的后缀形式

就像后缀ifexcept 一样,CoffeeScript 提供了推导式的后缀形式,这在编写代码时非常方便。使用它,我们可以在一行中编写for..in理解,如下所示。

#Postfix for..in comprehension
console.log student for student in ['Ram', 'Mohammed', 'John']

#postfix for..of comprehension
console.log key+"::"+value for key,value of { name: "Mohammed", age: 24, phone: 9848022338}
显示示例

分配给变量

我们用来迭代数组的推导式可以分配给一个变量,也可以由一个函数返回。

例子

考虑下面给出的例子。在这里您可以观察到我们已经使用for..in理解检索了数组的元素并将其分配给名为名称的变量。我们还有一个使用return关键字显式返回推导式的函数。将此代码保存在名为example.coffee的文件中

my_function =->
   student = ['Ram', 'Mohammed', 'John']
   
   #Assigning comprehension to a variable
   names = (x for x in student )
   console.log "The contents of the variable names are ::"+names
   
   #Returning the comprehension
   return x for x in student
console.log "The value returned by the function is "+my_function() 

打开命令提示符并编译 .coffee 文件,如下所示。

c:\> coffee -c example.coffee

编译时,它会给出以下 JavaScript。

// Generated by CoffeeScript 1.10.0
(function() {
  var my_function;

  my_function = function() {
    var i, len, names, student, x;
    student = ['Ram', 'Mohammed', 'John'];
    names = (function() {
      var i, len, results;
      results = [];
      for (i = 0, len = student.length; i < len; i++) {
        x = student[i];
        results.push(x);
      }
      return results;
    })();
    console.log("The contents of the variable names are ::" + names);
    for (i = 0, len = student.length; i < len; i++) {
      x = student[i];
      return x;
    }
  };

  console.log("The value returned by the function is " + my_function());

}).call(this);

现在,再次打开命令提示符并运行 CoffeeScript 文件,如下所示。

c:\> coffee example.coffee

执行时,CoffeeScript 文件会产生以下输出。

The contents of the variable names are ::Ram,Mohammed,John
The value returned by the function is Ram 

by 关键字

CoffeeScript 提供范围来定义元素列表。例如,范围 [1..10] 相当于 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],其中每个元素都递增 1。我们也可以更改此增量使用推导式的by关键字。

例子

以下示例演示了CoffeeScript 提供的for..in理解中by关键字的用法。将此代码保存在名为by_keyword_example.coffee的文件中

array = (num for num in [1..10] by 2)
console.log array

打开命令提示符并编译 .coffee 文件,如下所示。

c:\> coffee -c by_keyword_example.coffee

编译时,它会给出以下 JavaScript。

// Generated by CoffeeScript 1.10.0
(function() {
  var array, num;

  array = (function() {
    var i, results;
    results = [];
    for (num = i = 1; i <= 10; num = i += 2) {
      results.push(num);
    }
    return results;
  })();

  console.log(array);

}).call(this);

现在,再次打开命令提示符并运行 CoffeeScript 文件,如下所示。

c:\> coffee by_keyword_example.coffee

执行时,CoffeeScript 文件会产生以下输出。

[ 1, 3, 5, 7, 9 ] 

CoffeeScript - 函数

函数是可重用代码块,可以在程序中的任何位置调用。这消除了一次又一次编写相同代码的需要。它可以帮助程序员编写模块化代码。

函数允许程序员将大程序划分为许多小的且可管理的函数。

一般来说,使用 JavaScript,我们可以定义两种类型的函数 -命名函数、具有函数名称主体的常规函数​​和函数表达式。使用函数表达式,我们可以将函数分配给变量。

//named function
function sayHello(){
   return("Hello there");
}
 
//function expressions
var message = function sayHello(){
   return("Hello there");
}

CoffeeScript 中的函数

CoffeeScript 中函数的语法比 JavaScript 更简单。在 CoffeeScript 中,我们仅定义函数表达式。

CoffeeScript 中删除了function关键字。要在这里定义函数,我们必须使用细箭头(->)。

在幕后,CoffeeScript 编译器将箭头转换为 JavaScript 中的函数定义,如下所示。

(function() {});

在 CoffeeScript 中,不强制使用return关键字。CoffeeScript 中的每个函数都会自动返回函数中的最后一条语句。

  • 如果我们想返回调用函数或在到达函数末尾之前返回一个值,那么我们可以使用return关键字。

  • 除了内联函数(单行函数)之外,我们还可以在 CoffeeScript 中定义多行函数。由于消除了花括号,我们可以通过保持适当的缩进来做到这一点。

定义函数

以下是在 CoffeeScript 中定义函数的语法。

function_name = -> function_body

例子

下面给出的是 CoffeeScript 中函数的示例。在这里,我们创建了一个名为greet的函数。该函数自动返回其中的语句。将其保存在名为function_example.coffee 的文件中

greet = -> "This is an example of a function"

通过在命令提示符中执行以下命令来编译它。

c:\>coffee -c function_example.coffee

编译时,它会生成以下 JavaScript 代码。在这里您可以观察到 CoffeeScript 编译器自动返回名为greet()的函数中的字符串值。

// Generated by CoffeeScript 1.10.0
(function() {
  var greet;
  
  greet = function() {
    return "This is an example of a function";
  };

}).call(this);

多行函数

我们还可以通过保持缩进而不是大括号来定义多行函数。但是我们必须与整个函数中一行的缩进保持一致。