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 中建立類並繼承它們。除此之外，它還提供例項和靜態屬性以及mixin。它使用 JavaScript 的原生原型來建立類。

• 無需 var 關鍵字 - 在 CoffeeScript 中，無需使用var關鍵字來建立變數，因此我們可以避免意外或不需要的作用域宣告。

• 避免有問題的符號 - 在 CoffeeScript 中，無需使用有問題的分號和括號。我們可以使用空格來區分程式碼塊，如函式、迴圈等，而不是使用花括號。

• 廣泛的庫支援 - 在 CoffeeScript 中，我們可以使用 JavaScript 的庫，反之亦然。因此，在使用 CoffeeScript 時，我們可以訪問豐富的庫。

CoffeeScript 的歷史

• CoffeeScript 由 Jeremy Ashkenas 開發。它於 2009 年 12 月 13 日首次提交到 Git。

• 最初，CoffeeScript 的編譯器是用 Ruby 語言編寫的。

• 2010 年 3 月，CoffeeScript 編譯器被替換；這次他們使用 CoffeeScript 本身代替了 Ruby。

• 同年，CoffeeScript 1.0 釋出，在釋出時，它是 GitHub 上最受歡迎的專案之一。

CoffeeScript 的侷限性

• 對空格敏感 - CoffeeScript 對空格非常敏感，因此程式設計師在提供縮排時需要非常小心。如果我們沒有保持正確的縮排，整個程式碼可能會出錯。

TutorialsPoint 的 CoffeeScript IDE

您可以使用 TutorialsPoint 的 CoffeeScript 編譯器（在我們“程式碼練習場”部分提供）編譯 CoffeeScript 檔案 https://tutorialspoint.tw/codingground.htm。請按照以下步驟使用我們的 CoffeeScript 編譯器。

步驟 1

單擊以下連結訪問我們網站的首頁 www.tutorialspoint.com。

步驟 2

單擊位於主頁右上角的程式碼練習場按鈕，如下面的快照所示。

步驟 3

這將引導您進入我們的程式碼練習場部分，該部分為大約 135 種程式語言提供線上終端和 IDE。在下面的快照中顯示的線上 IDE 部分中開啟 CoffeeScript IDE。

步驟 4

如果您將 CoffeeScript 程式碼貼上到main.coffee中（您可以更改檔名）並單擊預覽按鈕，那麼您可以在控制檯中看到編譯後的 JavaScript，如下面的快照所示。

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 的安裝。

c:\> coffee -v

安裝成功後，此命令將顯示 CoffeeScript 的版本，如下所示。

CoffeeScript - 命令列工具

在 Node.js 上安裝 CoffeeScript 後，我們可以訪問coffee 命令列工具。在這裡，coffee命令是關鍵命令。使用此命令的各種選項，我們可以編譯和執行 CoffeeScript 檔案。

您可以使用-h或--help選項檢視coffee命令的選項列表。開啟Node.js 命令提示符並在其中執行以下命令。

c:\>coffee -help

此命令將顯示coffee的各種選項列表，以及每個選項執行的操作說明，如下所示。

編譯 CoffeeScript 程式碼

CoffeeScript 檔案以.coffee副檔名儲存。您可以使用 coffee 命令的-c 或 --compile選項編譯這些檔案，如下所示。

c:\>coffee -c filename.coffee

示例

假設您的系統中有一個檔案，其中包含以下 CoffeeScript 程式碼，該程式碼在控制檯中列印一條訊息。

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

注意 - console.log()函式在控制檯中列印給定的字串。

要編譯上述程式碼，請將其儲存在名為sample.coffee的檔案中。開啟 Node.js 命令提示符。瀏覽到儲存檔案的路徑，並使用coffee 命令列工具的 coffee 命令的-c選項進行編譯，如下所示。

c:\> coffee -c sample.coffee

執行上述命令後，CoffeeScript 編譯器將編譯給定的檔案 (sample.coffee)，並將其以 sample.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選項同時監視和編譯檔案，如下所示。當我們使用此選項時，每次更改指令碼時，檔案都會重新編譯，留下 Node.js 命令提示符，如下所示。

c:\>coffee -wc file_name

示例

假設我們使用-wc選項編譯了一個名為sample.coffee的檔案，並且我們修改了該指令碼三次。每次我們更改指令碼時，都會重新編譯.coffee檔案，留下 Node.js 命令提示符，如下所示。

設定輸出目錄

使用-o選項，我們可以設定輸出目錄來放置編譯後的 JavaScript 檔案，如下所示。

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

示例

讓我們使用-o選項在 E 盤中名為data的資料夾中儲存 sample.coffee 檔案的 JavaScript 程式碼，方法是在命令提示符中執行以下命令。

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

以下是執行上述命令後給定資料夾的快照。在這裡您可以看到 sample.coffee 的 JavaScript 檔案。

列印編譯後的 JavaScript

如果我們想在控制檯中列印編譯後的 javascript，我們必須使用 coffee 命令的-p選項，如下所示。

c:\>coffee -p file_name

示例

例如，您可以使用如下所示的 -p 選項在控制檯上列印 sample.coffee 檔案的編譯後的 JavaScript 程式碼。

REPL（讀取-求值-列印迴圈）

CoffeeScript 提供了一個 REPL 互動式 shell。此 shell 用於評估 CoffeeScript 表示式。您可以在此 shell 中輸入任何 CoffeeScript 程式碼並立即獲得結果。您可以透過在不帶任何選項的情況下執行 **coffee** 命令來開啟 REPL，如下所示。

使用此 shell，我們可以為變數賦值、建立函式和評估結果。如下面的螢幕截圖所示，如果我們在 REPL 中呼叫函式，它將列印函式的值。如果我們向它提供一個表示式，它將評估並打印表達式的結果。如果我們只是在其中鍵入語句，它將列印最後一條語句的值。

在 REPL 中，您可以透過按 ctrl+v 進入多行模式，在其中您可以評估多行程式碼（如函式），並且您可以透過再次按 ctrl+v 返回 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 變數、函式、方法、迴圈標籤或任何物件名稱。

CoffeeScript - 資料型別

CoffeeScript 資料型別

程式語言最基本的特點之一就是它支援的資料型別集合。這些是在程式語言中可以表示和操作的值的型別。

由於 CoffeeScript 逐行編譯到 JavaScript，因此 CoffeeScript 提供的資料型別與 JavaScript 相同。只是 CoffeeScript 增加了一些額外的特性。

CoffeeScript 提供以下資料型別：

• **字串** - 字串資料型別通常表示一組字元，我們用雙引號 (" ") 表示字串值。

  **示例**: "Raj"，"Rahman"

• **數字** - 數字資料型別表示數值。

  **示例**: 12、212 等。

• **布林值** - 布林資料型別表示一位資訊。只有兩個可能的值：true 和 false。

• **陣列** - Array 物件允許您在一個變數中儲存多個值。它儲存相同型別元素的固定大小的順序集合。

  **示例**: student = ["Rahman","Ramu","Ravi","Robert"]

• **物件** - CoffeeScript 中的物件類似於 JavaScript 中的物件，它們是屬性的集合。屬性包括一個鍵和一個值，用冒號 (:) 分隔。簡而言之，CoffeeScript 物件是鍵值對的集合。

  **示例**: student = {name: "Mohammed", age: 24, phone: 9848022338 }

• **Null** - 一個已定義但沒有儲存任何值的變數被認為是 null。這類似於 JavaScript 中的 null 值。

• **Undefined** - 一個沒有賦值的變數被認為是未定義變數。如果在程式碼中使用此類變數，則會收到未定義錯誤。

我們將在單獨的章節中詳細介紹陣列和物件資料型別。

CoffeeScript - 變數

變數只不過是命名的容器。您可以將資料放入這些容器中，然後使用其容器的名稱引用資料。

CoffeeScript 變數

在 JavaScript 中，在使用變數之前，我們需要宣告並初始化它（賦值）。與 JavaScript 不同的是，在 CoffeeScript 中建立變數時，無需使用 **var** 關鍵字宣告它。我們只需透過為字面量賦值來建立變數，如下所示。

name = variable name

示例

在下面的 CoffeeScript 程式碼中，我們定義了兩個變數 **name** 和 **age**，它們分別為字串和數字資料型別。將其儲存在名為 **variable_example.coffee** 的檔案中。

name = "Javed"
age = 25

編譯程式碼

透過在命令提示符中執行以下命令來編譯上述 CoffeeScript 程式碼。

c:\> compile -c variable_example.coffee

編譯後，將生成一個名為 **variable_example.js** 的 JavaScript 檔案，其內容如下。在這裡您可以看到，編譯器代表我們使用了 **var** 關鍵字聲明瞭變數 (age 和 name)。

// 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 保留關鍵字作為變數名。這些關鍵字在下一節中提到。例如，break 或 Boolean 變數名無效。

• CoffeeScript 變數名不能以數字 (0-9) 開頭。它們必須以字母或下劃線字元開頭。例如，123test 是無效的變數名，但 _123test 是有效的變數名。

• CoffeeScript 變數名區分大小寫。例如，**Name** 和 **name** 是兩個不同的變數。

CoffeeScript - 運算子和別名

CoffeeScript 運算子

運算子是一個符號，它告訴編譯器執行特定的數學或邏輯函式。讓我們來看一個簡單的表示式 **4 + 5 等於 9**。這裡 4 和 5 稱為 **運算元**，而 ‘+’ 稱為 **運算子**。

CoffeeScript 提供的運算子與 JavaScript 中的相同，但有一些區別。JavaScript 中有一些有問題的運算子。CoffeeScript 刪除了它們或修改了它們的功能，並且它還引入了一些新的運算子。

以下是 CoffeeScript 支援的運算子列表。

• 算術運算子
• 比較運算子
• 邏輯（或關係）運算子
• 賦值運算子

CoffeeScript 別名

除了運算子之外，CoffeeScript 還提供別名。CoffeeScript 為各種運算子和符號提供別名，以便使您的 CoffeeScript 程式碼更具可讀性和使用者友好性。

讓我們逐一瞭解 CoffeeScript 的所有運算子和別名。

算術運算子

CoffeeScript 支援以下算術運算子。假設變數A的值為10，變數B的值為20，則：

顯示示例

比較運算子

JavaScript 支援以下比較運算子。假設變數A的值為10，變數B的值為20，則：

顯示示例

下表顯示了一些比較運算子的別名。假設A的值為20，變數B的值為20。

顯示示例

邏輯運算子

CoffeeScript 支援以下邏輯運算子。假設變數A的值為10，變數B的值為20，則：

顯示示例

下表顯示了一些邏輯運算子的別名。假設X的值為true，變數Y的值為false。

顯示示例

位運算子

CoffeeScript 支援以下位運算子。假設變數A的值為2，變數B的值為3，則：

顯示示例

賦值運算子

CoffeeScript 支援以下賦值運算子：

顯示示例

注意 - 位運算子也適用相同的邏輯，因此它們將變為 <<=, >>=, >>=, &=, |= 和 ^=。

CoffeeScript 中的相等運算子

在使用 JavaScript 時，您會遇到兩種型別的相等運算子==和===。

JavaScript 中的==運算子是型別強制的，即，如果運算中的兩個運算元的型別不同，則將其中一個運算元的資料型別轉換為另一個，然後進行比較。

CoffeeScript 避免了這種不希望的強制轉換，它將==運算子編譯成 JavaScript 的嚴格比較運算子===。

如果我們使用===比較兩個運算元，則只有當它們的值和資料型別都相等時，它才返回true，否則返回false。

示例

考慮以下示例。這裡我們有兩個變數a和b。a儲存整數型別的值 21，而b儲存相同的值，但它是字串型別。在 CoffeeScript 中，當我們比較a和b時，結果將為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 或 undefined，否則存在運算子返回 true。

示例

下面是一個存在運算子的示例。這裡我們有三個變數，即name、age和subject，我們正在使用存在運算子驗證變數 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 提供的別名。

示例

以下示例顯示如何在 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 還包括unless語句（if 的否定）等等。

以下是 CoffeeScript 提供的條件語句。

CoffeeScript中的then關鍵字

if和unless語句是多行編寫的塊語句。CoffeeScript提供then關鍵字，我們可以用它在一行中編寫if和unless語句。

以下是使用then關鍵字編寫的CoffeeScript語句。

字尾if和字尾unless語句

在CoffeeScript中，你也可以先編寫帶有程式碼塊的if和unless語句，然後跟if或unless關鍵字，如下所示。這是這些語句的字尾形式。在CoffeeScript中編寫程式時，它非常方便。

#Postfix if
Statements to be executed if expression

#Postfix unless
Statements to be executed unless expression

顯示示例

CoffeeScript - 迴圈

在編碼過程中，你可能會遇到需要反覆執行一段程式碼的情況。在這種情況下，可以使用迴圈語句。

通常，語句是順序執行的：函式中的第一個語句首先執行，然後是第二個語句，依此類推。

迴圈語句允許我們多次執行語句或語句組。下面是在大多數程式語言中迴圈語句的一般形式

JavaScript提供while、for和for..in迴圈。CoffeeScript中的迴圈與JavaScript中的迴圈類似。

while迴圈及其變體是CoffeeScript中唯一的迴圈結構。CoffeeScript沒有使用常用的for迴圈，而是提供了Comprehensions（推導式），將在後面的章節中詳細討論。

CoffeeScript中的while迴圈

while迴圈是CoffeeScript提供的唯一低階迴圈。它包含一個布林表示式和一個語句塊。只要給定的布林表示式為真，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變體。

CoffeeScript - 列表推導式

在上一章中，我們學習了CoffeeScript提供的各種迴圈，while及其變體。除此之外，CoffeeScript還提供了稱為推導式（comprehensions）的其他迴圈結構。

如果我們新增可選的保護子句並顯式指定當前陣列索引的值，這些推導式將替換其他程式語言中的for迴圈。使用推導式，我們可以迭代陣列和物件，迭代陣列的推導式是表示式，我們可以在函式中返回它們或將其賦值給變數。

推導式的索引

元素的列表/陣列有一個索引，可以在推導式中使用。你可以使用變數在推導式中使用它，如下所示。

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 

推導式的字尾形式

就像字尾if和unless一樣，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推導式檢索了陣列的元素，並將其賦值給名為names的變數。我們還有一個函式，它使用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中的函式

與JavaScript相比，CoffeeScript中函式的語法更簡單。在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);

多行函式

我們還可以透過保持縮排而不是花括號來定義一個多行函式。但是，我們必須與整行函式遵循的縮排保持一致。

greet =  ->
  console.log "Hello how are you"

編譯後，上面的CoffeeScript會給你以下JavaScript程式碼。CoffeeScript編譯器會獲取我們使用縮排分隔並放在花括號內的函式體。

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

  greet = function() {
    return console.log("Hello how are you");
  };

}).call(this);

帶引數的函式

我們還可以使用括號在函式中指定引數，如下所示。

add =(a,b) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c

編譯上面的CoffeeScript檔案後，它將生成以下JavaScript程式碼。

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

  add = function(a, b) {
    var c;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

}).call(this);

呼叫函式

定義函式後，我們需要呼叫該函式。你可以簡單地在函式名稱後面加上括號來呼叫函式，如下例所示。

add = ->
  a=20;b=30
  c=a+b
  console.log "Sum of the two numbers is: "+c  
add()

編譯後，上面的示例會給你以下JavaScript程式碼

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

  add = function() {
    var a, b, c;
    a = 20;
    b = 30;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };
  add();
}).call(this);

執行上面的CoffeeScript程式碼後，它會生成以下輸出。

Sum of the two numbers is: 50

呼叫帶引數的函式

同樣，我們可以透過向函式傳遞引數來呼叫帶引數的函式，如下所示。

my_function argument_1,argument_2
or
my_function (argument_1,argument_2)

注意 − 在透過向函式傳遞引數來呼叫函式時，括號的使用是可選的。

在下面的示例中，我們建立了一個名為add()的函式，它接受兩個引數，我們已經呼叫了它。

add =(a,b) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c
add 10,20 

編譯後，上面的示例會給你以下JavaScript程式碼。

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

  add = function(a, b) {
    var c;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

  add(10, 20);

}).call(this);

執行上面的CoffeeScript程式碼後，它會生成以下輸出。

Sum of the two numbers is: 30

預設引數

CoffeeScript也支援預設引數。我們可以為函式的引數賦值預設值，如下例所示。

add =(a = 1, b = 2) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c
add 10,20

#Calling the function with default arguments
add()

編譯後，上面的CoffeeScript會生成以下JavaScript檔案。

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

  add = function(a, b) {
    var c;
    if (a == null) {
      a = 1;
    }
    if (b == null) {
      b = 2;
    }
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

  add(10, 20);
  add()

}).call(this);

執行上面的CoffeeScript程式碼後，它會生成以下輸出。

Sum of the two numbers is: 30
Sum of the two numbers is: 3

CoffeeScript - 字串

String物件允許你使用一系列字元。與大多數程式語言一樣，CoffeeScript中的字串使用引號宣告為：

my_string = "Hello how are you"
console.log my_string

編譯後，它將生成以下JavaScript程式碼。

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

  my_string = "Hello how are you";

  console.log(my_string);

}).call(this);

字串連線

我們可以使用“+”符號連線兩個字串，如下所示。

new_string = "Hello how are you "+"Welcome to Tutorialspoint"
console.log new_String

編譯後，它將生成以下JavaScript程式碼。

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

  new_string = "Hello how are you " + "Welcome to Tutorialspoint";

  console.log(new_String);

}).call(this);

如果你執行上面的示例，你將看到連線的字串，如下所示。

Hello how are you Welcome to Tutorialspoint

字串插值

CoffeeScript還提供了一個稱為字串插值的功能，用於在字串中包含變數。CoffeeScript的這個功能受到了Ruby語言的啟發。

字串插值使用雙引號""、井號#和一對花括號{ }。字串用雙引號宣告，要插值的變數用花括號括起來，花括號前面帶有井號，如下所示。

name = "Raju"
age = 26
message ="Hello #{name} your age is #{age}"
console.log message

編譯上面的示例後，它會生成以下JavaScript程式碼。在這裡你可以看到，字串插值使用+符號轉換為普通的連線。

// Generated by CoffeeScript 1.10.0
(function() {
  var age, message, name;

  name = "Raju";

  age = 26;

  message = "Hello " + name + " your age is " + age;

  console.log(message);

}).call(this);

如果你執行上面的CoffeeScript程式碼，它會給你以下輸出。

Hello Raju your age is 26

僅當字串用雙引號" "括起來時，才會對作為#{variable}傳遞的變數進行插值。使用單引號' '代替雙引號會按原樣輸出該行，不會進行插值。請考慮以下示例。

name = "Raju"
age = 26
message ='Hello #{name} your age is #{age}'
console.log message

如果在插值中使用單引號代替雙引號，則會得到以下輸出。

Hello #{name} your age is #{age}

CoffeeScript允許在字串中使用多行，無需像下面所示那樣進行連線。

my_string = "hello how are you
Welcome to tutorialspoint
Have a nice day."
console.log my_string

它生成以下輸出。

hello how are you Welcome to tutorialspoint Have a nice day.

JavaScript 字串物件

JavaScript 的字串物件允許您處理一系列字元。此物件提供許多方法來對字串執行各種操作。

由於我們可以在 CoffeeScript 程式碼中使用 JavaScript 庫，因此我們可以在 CoffeeScript 程式中使用所有這些方法。

字串方法

以下是 JavaScript 字串物件方法的列表。單擊這些方法的名稱可以獲取一個示例，該示例演示了它們在 CoffeeScript 中的用法。

CoffeeScript - 陣列

Array 物件允許您在一個變數中儲存多個值。它儲存大小固定的相同型別元素的順序集合。陣列用於儲存資料集合，但通常將陣列視為相同型別變數的集合更有用。

語法

要建立陣列，我們必須使用new運算子對其進行例項化，如下所示。

array = new (element1, element2,....elementN)

Array() 建構函式接受字串或整數型別列表。我們還可以透過向其建構函式傳遞單個整數來指定陣列的長度。

我們還可以透過簡單地在方括號 ([ ]) 中提供其元素列表來定義陣列，如下所示。

array = [element1, element2, ......elementN]

示例

以下是 CoffeeScript 中定義陣列的示例。將此程式碼儲存在名為array_example.coffee的檔案中。

student = ["Rahman","Ramu","Ravi","Robert"]

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c array_example.coffee

編譯後，它會給你以下JavaScript程式碼。

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

  student = ["Rahman", "Ramu", "Ravi", "Robert"];

}).call(this);

換行符代替逗號

我們還可以透過在每一行建立一個元素並保持正確的縮排，從而刪除陣列元素之間的逗號 (,)，如下所示。

student = [
  "Rahman"
  "Ramu"
  "Ravi"
  "Robert"
  ]

陣列推導式

我們可以使用推導式檢索陣列的值。

示例

以下示例演示了使用推導式檢索陣列元素的方法。將此程式碼儲存在名為array_comprehensions.coffee的檔案中。

students = [ "Rahman", "Ramu", "Ravi", "Robert" ]
console.log student for student in students 

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c array_comprehensions.coffee

編譯後，它會給你以下JavaScript程式碼。

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

  students = ["Rahman", "Ramu", "Ravi", "Robert"];

  for (i = 0, len = students.length; i − len; i++) {
    student = students[i];
    console.log(student);
  }

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee array_comprehensions.coffee

執行後，CoffeeScript檔案會產生以下輸出。

Rahman
Ramu
Ravi
Robert

與其他程式語言中的陣列不同，CoffeeScript 中的陣列可以包含多種型別的資料，即字串和數字。

示例

這是一個包含多種型別資料的 CoffeeScript 陣列的示例。

students = [ "Rahman", "Ramu", "Ravi", "Robert",21 ]

CoffeeScript - 物件

CoffeeScript 中的物件類似於 JavaScript 中的物件。它們是屬性的集合，其中屬性包括由分號 (;) 分隔的鍵和值。簡而言之，CoffeeScript 物件是鍵值對的集合。物件使用花括號定義，空物件表示為{}。

語法

下面是 CoffeeScript 中物件的語法。在這裡，我們將物件的鍵值對放在花括號中，並用逗號 (,) 分隔。

object ={key1: value, key2: value,......keyN: value}

示例

以下是 CoffeeScript 中定義物件的示例。將此程式碼儲存在名為objects_example.coffee的檔案中。

student = {name: "Mohammed", age: 24, phone: 9848022338 } 

開啟命令提示符並編譯.coffee檔案，如下所示。

> coffee -c objects_example.coffee

編譯後，它會給你以下JavaScript程式碼。

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

  student = {
    name: "Mohammed",
    age: 24,
    phone: 9848022338
  };

}).call(this);

就像在陣列中一樣，我們可以透過在新行中指定鍵值對來刪除逗號，如下所示。

student = {
  name: "Mohammed" 
  age: 24
  phone: 9848022338 
  }

縮排代替花括號

就像 CoffeeScript 中的其他塊語句一樣，我們可以使用縮排代替花括號{}，如下例所示。

示例

我們可以像下面這樣重寫上面的示例，不使用花括號。

student = 
  name: "Mohammed" 
  age: 24
  phone: 9848022338 

巢狀物件

在 CoffeeScript 中，我們可以在物件中編寫物件。

示例

以下示例演示了 CoffeeScript 中的巢狀物件。將此程式碼儲存在名為nested_objects.coffee的檔案中。

contact =
  personal:
    email: "personal@gmail.com"
    phone:  9848022338
  professional:
    email: "professional@gmail.com"
    phone:  9848033228

開啟命令提示符並編譯.coffee檔案，如下所示。

> coffee -c nested_objects.coffee

編譯後，它會給你以下JavaScript程式碼。

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

  contact = {
    personal: {
      email: "personal@gmail.com",
      phone: 9848022338
    },
    professional: {
      email: "professional@gmail.com",
      phone: 9848033228
    }
  };

}).call(this);

物件推導式

要迭代物件的內容，我們可以使用推導式。迭代物件的內容與迭代陣列的內容相同。在物件中，由於我們必須檢索兩個元素鍵和值，因此我們將使用兩個變數。

示例

以下是一個示例，演示如何使用推導式迭代物件的內容。將此程式碼儲存在名為object_comprehensions.coffee的檔案中。

student = 
  name: "Mohammed" 
  age: 24
  phone: 9848022338 

console.log key+"::"+value for key,value of student

開啟命令提示符並編譯.coffee檔案，如下所示。

> coffee -c object_comprehensions.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var key, student, value;

  student = {
    name: "Mohammed",
    age: 24,
    phone: 9848022338
  };

  for (key in student) {
    value = student[key];
    console.log(key(+"::" + value));
  }

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

> coffee object_comprehensions.coffee

執行後，CoffeeScript檔案會產生以下輸出。

name::Mohammed
age::24
phone::9848022338 

物件陣列

在 CoffeeScript 中，陣列也可以包含物件，如下所示。

  a = [
     object1_key1: value
     object1_key2: value
     object1_key3: value
  ,
     object2_key1: value
     object2_key2: value
     object2_key3: value
]

以下示例顯示如何定義物件陣列。我們可以透過使用逗號(,)分隔它們來列出我們想要包含在陣列中的物件的鍵值對。

students =[  
    name: "Mohammed" 
    age: 24
    phone: 9848022338 
  ,  
    name: "Ram" 
    age: 25
    phone: 9800000000 
  ,  
    name: "Ram" 
    age: 25
    phone: 9800000000   
 ]  
console.log student for student in students

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c array_of_objects.coffee

編譯後，它會給你以下JavaScript程式碼。

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

  students = [
    {
      name: "Mohammed",
      age: 24,
      phone: 9848022338
    }, {
      name: "Ram",
      age: 25,
      phone: 9800000000
    }, {
      name: "Ram",
      age: 25,
      phone: 9800000000
    }
  ];

  for (i = 0, len = students.length; i < len; i++) {
    student = students[i];
    console.log(student);
  }

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee array_of_objects.coffee

執行後，CoffeeScript檔案會產生以下輸出。

{ name: 'Mohammed', age: 24, phone: 9848022338 }
{ name: 'Ram', age: 25, phone: 9800000000 }
{ name: 'Ram', age: 25, phone: 9800000000 }

保留關鍵字

JavaScript 不允許將保留關鍵字作為物件的屬性名稱，如果我們想要使用它們，則必須使用雙引號" "將它們括起來。

示例

請考慮以下示例。在這裡，我們建立了一個名為class的屬性，它是一個保留關鍵字。將此程式碼儲存在名為reserved_keywords.coffee的檔案中。

student ={ 
  name: "Mohammed" 
  age: 24
  phone: 9848022338
  class: "X"
  }
console.log key+"::"+value for key,value of student

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c reserved_keywords.coffee

編譯後，它會為您提供以下 JavaScript 程式碼。在這裡您可以看到，CoffeeScript 編譯器代表我們用雙引號將關鍵字 class 括起來了。

// Generated by CoffeeScript 1.10.0
(function() {
  var key, student, value;

  student = {
    name: "Mohammed",
    age: 24,
    phone: 9848022338,
    "class": "X"
  };

  for (key in student) {
    value = student[key];
    console.log(key + "::" + value);
  }

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee array_of_objects.coffee

執行後，CoffeeScript檔案會產生以下輸出。

name::Mohammed
age::24
phone::9848022338
class::X 

CoffeeScript - 範圍

在上一章中，我們看到了 CoffeeScript 中的陣列，在程式設計過程中，我們會遇到一些需要在陣列中儲存一系列數值的情況，如下所示。

numbers =[1,2,3,4,5,6,7,8,9,10]

CoffeeScript 提供了一種更簡潔的表達包含一系列數值的陣列的方式，稱為範圍。CoffeeScript 的此功能源自 Ruby。

語法

範圍由兩個數值建立，即範圍中的第一個和最後一個位置，由 .. 或 .... 分隔。用兩個點 (1..4)，範圍是包含的 (1, 2, 3, 4)；用三個點 (1...4)，範圍不包括結尾 (1, 2, 3)。

以下是 CoffeeScript 中範圍的語法。我們將像陣列一樣在方括號[ ]中定義範圍內的值。在範圍中，在儲存一系列數值時，無需提供整個序列的值，我們只需指定其起始和結束值，並用兩個點 (..) 分隔，如下所示。

range =[Begin..End]

示例

這是一個 CoffeeScript 範圍的示例。將其儲存在名為ranges_example.coffee的檔案中。

numbers =[0..9]
console.log "The contents of the range are: "+ numbers 

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c ranges_example.coffee

編譯後，它會為您提供以下 JavaScript 程式碼。在這裡您可以看到，範圍已轉換為完整的 CoffeeScript 陣列。

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

  numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  console.log("The contents of the range are:: " + numbers);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee ranges_example.coffee

執行後，CoffeeScript檔案會產生以下輸出。

The contents of the range are:: 0,1,2,3,4,5,6,7,8,9

排除結束值

範圍被編譯成包含所有數字的完整陣列。如果我們想要排除結束值，則必須使用三個點 (...) 分隔範圍的起始和結束元素，如下所示。

range =[Begin...End]

示例

我們可以透過排除結束值來重寫上面的示例，如下所示。將以下內容儲存在名為range_excluding_end.coffee的檔案中。

numbers =[0...9]
console.log "The contents of the range are:: "+ numbers 

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c ranges_example.coffee

編譯後，它會給你以下JavaScript程式碼。

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

  numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8];

  console.log("The contents of the range are:: " + numbers);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee ranges_example.coffee

執行後，CoffeeScript 檔案會產生以下輸出。在這裡，您可以看到排除了結束值9。

The contents of the range are:: 0,1,2,3,4,5,6,7,8 

將範圍與變數一起使用

我們還可以透過將起始值和結束值賦值給變數來定義範圍。

示例

請考慮以下示例。在這裡，我們使用變數定義了一個範圍。將此程式碼儲存在名為range_variables.coffee的檔案中。

start=0
end=9
numbers =[start..end]
console.log "The contents of the range are: "+ numbers

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c range_variables.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var end, i, numbers, results, start;

  start = 0;

  end = 9;

  numbers = (function() {
    results = [];
    for (var i = start; start <= end ? i <= end : i >= end; start <= end ? i++ : i--) {
      results.push(i);
    }
    return results;
  }).apply(this);

  console.log("The contents of the range are:: " + numbers);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee range_variables.coffee

執行後，CoffeeScript 檔案會產生以下輸出。在這裡，您可以看到排除了結束值9。

The contents of the range are:: 0,1,2,3,4,5,6,7,8,9

範圍與陣列

我們可以使用範圍來切片陣列。每當我們在陣列（變數）後立即指定範圍時，CoffeeScript 編譯器會將其轉換為 JavaScript 的slice()方法呼叫。

假設我們有一個包含數值的陣列，例如 0 到 9，那麼我們可以像下面這樣檢索其前 4 個元素。

num  = [1, 2, 3, 4, 5, 6, 7, 8, 9]
data = num[0..5]

負值表示從結尾開始的元素，例如，-1 表示 9。如果我們指定一個負數 3 後跟兩個點，則將提取陣列的最後三個元素。

data = num[-3..]

如果我們只在陣列的範圍內指定兩個點，如num[..]，則將提取整個陣列。我們還可以使用範圍用其他元素替換陣列段，如下所示。

num[2..6] = [13,14,15,16,17]

示例

以下示例演示了範圍與陣列的用法。將此程式碼儲存在名為range_arrays.coffee的檔案中。

#slicing an array using ranges
num  = [1, 2, 3, 4, 5, 6, 7, 8, 9]
data = num[0..5]
console.log "The first four elements of the array : "+data


#Using negative values
data = num[-3..]
console.log "The last 3 elements of the array : "+data

#Extracting the whole array
console.log "Total elements of the array : "+num[..]


#Replacing the elements of an array
num[2..6] = [13,14,15,16,17]
console.log "New array : "+num 

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c range_arrays.coffee

編譯後，它會為您提供以下 JavaScript 程式碼。在這裡您可以看到，所有範圍都已轉換為 JavaScript 的 slice() 方法呼叫。

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

  num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  data = num.slice(0, 6);

  console.log("The first four elements of the array : " + data);

  data = num.slice(-3);

  console.log("The last 3 elements of the array : " + data);

  console.log("Total elements of the array : " + num.slice(0));

  [].splice.apply(num, [2, 5].concat(ref = [13, 14, 15, 16, 17])), ref;

  console.log("New array : " + num);

}).call(this); 

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee range_arrays.coffee

執行後，CoffeeScript 檔案會產生以下輸出。在這裡，您可以看到排除了結束值9。

The first four elements of the array : 1,2,3,4,5,6
The last 3 elements of the array : 7,8,9
Total elements of the array : 1,2,3,4,5,6,7,8,9
New array : 1,2,13,14,15,16,17,8,9

範圍與字串

我們還可以將範圍與字串一起使用。如果我們在字串後指定範圍，則 CoffeeScript 會切片它們並返回一個新的字元子集。

示例

以下示例演示了範圍與字串的用法。在這裡，我們建立了一個字串，並使用範圍從中提取了一個子字串。將此程式碼儲存在名為ranges_with_strings.coffee的檔案中。

my_string = "Welcome to tutorialspoint"
new_string = my_string[0..10]
console.log new_string

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c ranges_with_strings.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var my_string, new_string;

  my_string = "Welcome to tutorialspoint";

  new_string = my_string.slice(0, 6);

  console.log(new_string);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee ranges_with_strings.coffee

執行後，CoffeeScript 檔案會產生以下輸出。在這裡，您可以看到排除了結束值9。

Welcome to

範圍推導式

與物件和陣列一樣，我們還可以使用推導式迭代範圍的元素。

示例

以下是範圍推導式的示例。在這裡，我們建立了一個範圍，並使用推導式檢索其中的元素。將此程式碼儲存在名為comprehensions_over_ranges.coffee的檔案中。

numbers =[0..9]
console.log "The elements of the range are: "
console.log num for num in numbers

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c comprehensions_over_ranges.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var i, len, num, numbers;

  numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  console.log("The elements of the range are: ");

  for (i = 0, len = numbers.length; i < len; i++) {
    num = numbers[i];
    console.log(num);
  }

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee comprehensions_over_ranges.coffee

執行後，CoffeeScript 檔案會產生以下輸出。在這裡，您可以看到排除了結束值9。

The elements of the range are:
0
1
2
3
4
5
6
7
8

同樣，我們也可以使用推導式的by關鍵字更改此增量。

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

CoffeeScript - 展開運算子

在之前的章節中，我們學習瞭如何定義函式、呼叫函式以及向函式傳遞引數。通常情況下，我們向函式傳遞的引數個數是固定的。但在程式設計過程中，我們可能會遇到需要向函式傳遞可變數量引數的情況。在 JavaScript 中，我們使用物件來接收函式的可變數量引數。

CoffeeScript 提供了一個名為 **splat** 的特性，用於向函式傳遞多個引數。我們在函式中使用 splat，方法是在引數名後新增三個點，表示為 **...**

語法

下面是使用 splat 在函式中接收多個引數的語法。

my_function = (arguments...)->
   ............
   ............
   ............

示例

下面是一個使用 splat 在函式中接收多個引數的示例。這裡我們定義了一個名為 **indian_team()** 的函式，並使用了 splat。我們三次呼叫此函式，每次分別傳遞 4 名球員、6 名球員和完整的陣容。由於我們在函式定義中使用了 splat，因此每次呼叫它時都可以接收可變數量的引數。將此程式碼儲存到名為 **splats_definition.coffee** 的檔案中。

indian_team = (first, second, others...) ->
  Captain = first
  WiseCaptain = second
  team  = others
  console.log "Captain: " +Captain
  console.log "Wise captain: " +WiseCaptain
  console.log "Other team members: " +team

#Passing 4 arguments
console.log "############## Four Players ############"
indian_team "Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma"

#Passing 6 arguments
console.log "############## Six Players ############"
indian_team "Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan"
  
#Passing full squad
console.log "############## Full squad #############"
indian_team "Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane"

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c splats_definition.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var indian_team,
    slice = [].slice;

  indian_team = function() {
    var Captain, WiseCaptain, first, others, second, team;
    first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? slice.call(arguments, 2) : [];
    Captain = first;
    WiseCaptain = second;
    team = others;
    console.log("Captain: " + Captain);
    console.log("Wise captain: " + WiseCaptain);
    return console.log("Other team members: " + team);
  };

  console.log("############## Four Players ############");

  indian_team("Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma");

  console.log("############## Six Players ############");

  indian_team("Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan");

  console.log("############## Full squad #############");

  indian_team("Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane");

}).call(this); 

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee splats_definition.coffee

執行後，CoffeeScript檔案會產生以下輸出。

############## Four Players ############
Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members: Shikhar Dhawan,Rohit Sharma
############## Six Players ############
Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members: Shikhar Dhawan,Rohit Sharma,Gurkeerat Singh Mann,Rishi Dhawan
############## Full squad #############
Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members: Shikhar Dhawan,Rohit Sharma,Gurkeerat Singh Mann,Rishi Dhawan,Ravindra Jadeja,Axar Patel,Jasprit Bumrah,Umesh Yadav,Harbhajan Singh,Ashish Nehra,Hardik Pandya,Suresh Raina,Yuvraj Singh,Ajinkya Rahane 

使用 Splats 呼叫函式

我們也可以使用 splat 呼叫函式。為此，我們必須建立一個數組來儲存需要傳遞給函式的元素，然後透過傳遞字尾為三個點的陣列來呼叫函式，如下所示。

my_function values...

示例

下面是使用 splat 呼叫函式的示例。將此程式碼儲存到名為 **splats_call.coffee** 的檔案中。

indian_team = (first, second, others...) ->
  Captain = first
  WiseCaptain = second
  team  = others
  console.log "Captain: " +Captain
  console.log "Wise captain: " +WiseCaptain
  console.log "Other team members: " +team

squad = [
   "Mahendra Singh Dhoni"
   "Virat Kohli"
   "Shikhar Dhawan"
   "Rohit Sharma"   
   "Gurkeerat Singh Mann"
   "Rishi Dhawan"
   "R Ashwin"
   "Ravindra Jadeja"
   "Axar Patel"
   "Jasprit Bumrah"
   "Umesh Yadav"
   "Harbhajan Singh"
   "Ashish Nehra"
   "Hardik Pandya"
   "Suresh Raina"
   "Yuvraj Singh"
   "Ajinkya Rahane"
 ]

indian_team squad...

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c splats_call.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var indian_team, squad,
    slice = [].slice;

  indian_team = function() {
    var Captain, WiseCaptain, first, others, second, team;
    first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? slice.call(arguments, 2) : [];
    Captain = first;
    WiseCaptain = second;
    team = others;
    console.log("Captain: " + Captain);
    console.log("Wise captain: " + WiseCaptain);
    return console.log("Other team members: " + team);
  };

  squad = ["Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "R Ashwin", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane"];

  indian_team.apply(null, squad);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee splats_call.coffee

執行後，CoffeeScript檔案會產生以下輸出。

Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members: Shikhar Dhawan,Rohit Sharma,Gurkeerat Singh Mann,Rishi Dhawan,R Ashwin,Ravindra Jadeja,Axar Patel,Jasprit Bumrah,Umesh Yadav,Harbhajan Singh,Ashish Nehra,Hardik Pandya,Suresh Raina,Yuvraj Singh,Ajinkya Rahane

帶尾隨引數的 Splats

我們還可以向 splat 傳遞尾隨引數。在下面的示例中，我們在 splat 後傳遞了一個名為 **last** 的尾隨引數。將此示例儲存到名為 **tailing_arguments.coffee** 的檔案中。

indian_team = (first, second, others..., last) ->
  Captain = first
  WiseCaptain = second
  team  = others
  Wicketkeeper =last
  console.log "Captain: " +Captain
  console.log "Wise captain: " +WiseCaptain
  console.log "Wicket keeper is:"+last
  console.log "Other team members: " +team  
  
squad = [
   "Mahendra Singh Dhoni"
   "Virat Kohli"
   "Shikhar Dhawan"
   "Rohit Sharma"   
   "Gurkeerat Singh Mann"
   "Rishi Dhawan"
   "R Ashwin"
   "Ravindra Jadeja"
   "Axar Patel"
   "Jasprit Bumrah"
   "Umesh Yadav"
   "Harbhajan Singh"
   "Ashish Nehra"
   "Hardik Pandya"
   "Suresh Raina"
   "Yuvraj Singh"
   "Ajinkya Rahane"
 ]

indian_team squad...

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c tailing_arguments.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var indian_team, squad,
    slice = [].slice;

  indian_team = function() {
    var Captain, Wicketkeeper, WiseCaptain, first, i, last, others, second, team;
    first = arguments[0], second = arguments[1], others = 4 <= arguments.length ? slice.call(arguments, 2, i = arguments.length - 1) : (i = 2, []), last = arguments[i++];
    Captain = first;
    WiseCaptain = second;
    team = others;
    Wicketkeeper = last;
    console.log("Captain: " + Captain);
    console.log("Wise captain: " + WiseCaptain);
    console.log("Wicket keeper is:" + last);
    return console.log("Other team members: " + team);
  };

  squad = ["Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "R Ashwin", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane"];

  indian_team.apply(null, squad);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee tailing_arguments.coffee

執行後，CoffeeScript檔案會產生以下輸出。

Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Wicket keeper is:Ajinkya Rahane
Other team members: Shikhar Dhawan,Rohit Sharma,Gurkeerat Singh Mann,Rishi Dhawan,R Ashwin,Ravindra Jadeja,Axar Patel,Jasprit Bumrah,Umesh Yadav,Harbhajan Singh,Ashish Nehra,Hardik Pandya,Suresh Raina,Yuvraj Singh

帶有 Splats 的推導式

在函式內部，我們還可以使用推導式迭代 splat 的元素，如下例所示。將此程式碼儲存到名為 **splats_comprehensions.coffee** 的檔案中。

indian_team = (first, second, others...) ->
  Captain = first
  WiseCaptain = second
  team  = others
  console.log "Captain: " +Captain
  console.log "Wise captain: " +WiseCaptain
  console.log "Other team members:: "
  console.log member for member in others

squad = [
   "Mahendra Singh Dhoni"
   "Virat Kohli"
   "Shikhar Dhawan"
   "Rohit Sharma"   
   "Gurkeerat Singh Mann"
   "Rishi Dhawan"
   "R Ashwin"
   "Ravindra Jadeja"
   "Axar Patel"
   "Jasprit Bumrah"
   "Umesh Yadav"
   "Harbhajan Singh"
   "Ashish Nehra"
   "Hardik Pandya"
   "Suresh Raina"
   "Yuvraj Singh"
   "Ajinkya Rahane"
 ]

indian_team squad...

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c splats_comprehensions.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var indian_team, squad,
    slice = [].slice;

  indian_team = function() {
    var Captain, WiseCaptain, first, i, len, member, others, results, second, team;
    first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? slice.call(arguments, 2) : [];
    Captain = first;
    WiseCaptain = second;
    team = others;
    console.log("Captain: " + Captain);
    console.log("Wise captain: " + WiseCaptain);
    console.log("Other team members:: ");
    results = [];
    for (i = 0, len = others.length; i < len; i++) {
      member = others[i];
      results.push(console.log(member));
    }
    return results;
  };

  squad = ["Mahendra Singh Dhoni", "Virat Kohli", "Shikhar Dhawan", "Rohit Sharma", "Gurkeerat Singh Mann", "Rishi Dhawan", "R Ashwin", "Ravindra Jadeja", "Axar Patel", "Jasprit Bumrah", "Umesh Yadav", "Harbhajan Singh", "Ashish Nehra", "Hardik Pandya", "Suresh Raina", "Yuvraj Singh", "Ajinkya Rahane"];

  indian_team.apply(null, squad);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee splats_comprehensions.coffee

執行後，CoffeeScript檔案會產生以下輸出。

Captain: Mahendra Singh Dhoni
Wise captain: Virat Kohli
Other team members::
Shikhar Dhawan
Rohit Sharma
Gurkeerat Singh Mann
Rishi Dhawan
R Ashwin
Ravindra Jadeja
Axar Patel
Jasprit Bumrah
Umesh Yadav
Harbhajan Singh
Ashish Nehra
Hardik Pandya
Suresh Raina
Yuvraj Singh
Ajinkya Rahane

CoffeeScript - 日期

Date 物件是 JavaScript 語言內建的一種資料型別。Date 物件的建立方式為 **new Date()**。

建立 Date 物件後，可以使用許多方法對其進行操作。大多數方法只是允許您使用本地時間或 UTC（世界協調時間，或格林威治標準時間）來獲取和設定物件的年、月、日、時、分、秒和毫秒欄位。

ECMAScript 標準要求 Date 物件能夠表示 1970 年 1 月 1 日前後 1 億天內的任何日期和時間，精確到毫秒。這大約是正負 273,785 年，因此 JavaScript 可以表示到 275755 年的日期和時間。

與其他 JavaScript 物件類似，我們也可以在 CoffeeScript 程式碼中使用 Date 物件。

Date 方法

以下是 JavaScript **Date** 物件的方法列表。點選這些方法的名稱可以檢視演示它們在 CoffeeScript 中用法的示例。

CoffeeScript - 數學

JavaScript 的 **Math** 物件提供了用於數學常數和函式的屬性和方法。與其他全域性物件不同，**Math** 不是建構函式。**Math** 的所有屬性和方法都是靜態的，可以透過使用 Math 作為物件來呼叫，而無需建立它。

因此，您可以將常數 **pi** 引用為 **Math.PI**，並將正弦函式呼叫為 **Math.sin(x)**，其中 x 是方法的引數。我們可以在 CoffeeScript 程式碼中使用 JavaScript 的 Math 物件執行數學運算。

數學常數

如果我們想使用任何常見的數學常數，例如 pi 或 e，我們可以使用 JavaScript 的 **Math** 物件。

以下是 JavaScript Math 物件提供的 Math 常數列表。

示例

以下示例演示了在 CoffeeScript 中使用 JavaScript 提供的數學常數。將此程式碼儲存到名為 **math_example.coffee** 的檔案中。

e_value = Math.E
console.log "The value of the constant E is: " + e_value

LN2_value = Math.LN2
console.log "The value of the constant LN2 is: " + LN2_value

LN10_value = Math.LN10
console.log "The value of the constant LN10 is: " + LN10_value

LOG2E_value = Math.LOG2E
console.log "The value of the constant LOG2E is: " + LOG2E_value

LOG10E_value = Math.LOG10E
console.log "The value of the constant LOG10E is: " + LOG10E_value

PI_value = Math.PI
console.log "The value of the constant PI is: " + PI_value

SQRT1_2_value = Math.SQRT1_2
console.log "The value of the constant SQRT1_2 is: " + SQRT1_2_value

SQRT2_value = Math.SQRT2
console.log "The value of the constant SQRT2 is: " + SQRT2_value

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c math_example.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var LN10_value, LN2_value, LOG10E_value, LOG2E_value, PI_value, SQRT1_2_value, SQRT2_value, e_value;

  e_value = Math.E;

  console.log("The value of the constant E is: " + e_value);

  LN2_value = Math.LN2;

  console.log("The value of the constant LN2 is: " + LN2_value);

  LN10_value = Math.LN10;

  console.log("The value of the constant LN10 is: " + LN10_value);

  LOG2E_value = Math.LOG2E;

  console.log("The value of the constant LOG2E is: " + LOG2E_value);

  LOG10E_value = Math.LOG10E;

  console.log("The value of the constant LOG10E is: " + LOG10E_value);

  PI_value = Math.PI;

  console.log("The value of the constant PI is: " + PI_value);

  SQRT1_2_value = Math.SQRT1_2;

  console.log("The value of the constant SQRT1_2 is: " + SQRT1_2_value);

  SQRT2_value = Math.SQRT2;

  console.log("The value of the constant SQRT2 is: " + SQRT2_value);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee math_example.coffee

執行後，CoffeeScript檔案會產生以下輸出。

The value of the constant E is: 2.718281828459045
The value of the constant LN2 is: 0.6931471805599453
The value of the constant LN10 is: 2.302585092994046
The value of the constant LOG2E is: 1.4426950408889634
The value of the constant LOG10E is: 0.4342944819032518
The value of the constant PI is: 3.141592653589793
The value of the constant SQRT1_2 is: 0.7071067811865476
The value of the constant SQRT2 is: 1.4142135623730951

Math 方法

除了屬性外，Math 物件還提供方法。以下是 JavaScript **Math** 物件的方法列表。點選這些方法的名稱可以檢視演示它們在 CoffeeScript 中用法的示例。

CoffeeScript - 異常處理

異常（或異常事件）是在程式執行期間出現的錯誤。當發生異常時，程式的正常流程會被中斷，程式/應用程式會異常終止，這並不可取，因此需要處理這些異常。

異常可能由於多種不同的原因發生。以下是一些發生異常的情況。

• 使用者輸入無效資料。
• 需要開啟的檔案找不到。

CoffeeScript 中的異常

CoffeeScript 使用 **try...catch...finally** 塊來支援異常/錯誤處理。這些塊的功能與 JavaScript 中相同，**try** 塊包含異常語句，**catch** 塊包含發生異常時要執行的操作，**finally** 塊用於無條件執行語句。

以下是 CoffeeScript 中 **try...catch...finally** 塊的語法。

 try 
   // Code to run
   
 catch ( e ) 
   // Code to run if an exception occurs

 finally 
   // Code that is always executed regardless of 
   // an exception occurring

**try** 塊必須後跟一個 **catch** 塊或一個 **finally** 塊（或兩者兼有）。當 **try** 塊中發生異常時，異常會被放置在 **e** 中，並執行 **catch** 塊。可選的 **finally** 塊會在 try/catch 後無條件執行。

示例

以下示例演示了在 CoffeeScript 中使用 try 和 catch 塊進行異常處理。在這裡，我們嘗試在 CoffeeScript 操作中使用未定義的符號，並使用 **try** 和 **catch** 塊處理發生的錯誤。將此程式碼儲存到名為 **Exception_handling.coffee** 的檔案中。

try
  x = y+20
  console.log "The value of x is :" +x
catch e
  console.log "exception/error occurred"
  console.log "The STACKTRACE for the exception/error occurred is ::"
  console.log e.stack

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c Exception_handling.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var e, error, x;

  try {
    x = y + 20;
    console.log("The value of x is :" + x);
  } catch (error) {
    e = error;
    console.log("exception/error occurred");
    console.log("The STACKTRACE for the exception/error occurred is ::");
    console.log(e.stack);
  }

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee Exception_handling.coffee

執行後，CoffeeScript檔案會產生以下輸出。

exception/error occurred
The STACKTRACE for the exception/error occurred is :: 
ReferenceError: y is not defined
  at Object.<anonymous> (C:\Examples\strings_exceptions\Exception_handling.coffee:3:7)
  at Object.<anonymous> (C:\Examples\strings_exceptions\Exception_handling.coffee:2:1)
  at Module._compile (module.js:413:34)
  at Object.exports.run (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\coffee-script.js:134:23)
  at compileScript (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:224:29)
  at compilePath (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:174:14)
  at Object.exports.run (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:98:20)
  at Object.<anonymous> (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\bin\coffee:7:41)
  at Module._compile (module.js:413:34)
  at Object.Module._extensions..js (module.js:422:10)
  at Module.load (module.js:357:32)
  at Function.Module._load (module.js:314:12)
  at Function.Module.runMain (module.js:447:10)
  at startup (node.js:139:18)
  at node.js:999:3

finally 塊

我們也可以使用 **finally** 塊重寫上面的示例。如果這樣做，則此塊的內容會在 **try** 和 **catch** 塊之後無條件執行。將此程式碼儲存到名為 **Exception_handling_finally.coffee** 的檔案中。

try
  x = y+20
  console.log "The value of x is :" +x
catch e
  console.log "exception/error occurred"
  console.log "The STACKTRACE for the exception/error occurred is ::"
  console.log e.stack
 
finally
  console.log "This is the statement of finally block"

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c Exception_handling_finally.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var e, error, x;

  try {
    x = y + 20;
    console.log("The value of x is :" + x);
  } catch (error) {
    e = error;
    console.log("exception/error occurred");
    console.log("The STACKTRACE for the exception/error occurred is ::");
    console.log(e.stack);
  } finally {
    console.log("This is the statement of finally block");
  }

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee Exception_handling_finally.coffee

執行後，CoffeeScript檔案會產生以下輸出。

exception/error occurred
The STACKTRACE for the exception/error occurred is :: 
ReferenceError: y is not defined
  at Object.<anonymous> (C:\Examples\strings_exceptions\Exception_handling.coffee:3:7)
  at Object.<anonymous> (C:\Examples\strings_exceptions\Exception_handling.coffee:2:1)
  at Module._compile (module.js:413:34)
  at Object.exports.run (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\coffee-script.js:134:23)
  at compileScript (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:224:29)
  at compilePath (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:174:14)
  at Object.exports.run (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:98:20)
  at Object.<anonymous> (C:\Users\Tutorialspoint\AppData\Roaming\npm\node_modules\coffee-script\bin\coffee:7:41)
  at Module._compile (module.js:413:34)
  at Object.Module._extensions..js (module.js:422:10)
  at Module.load (module.js:357:32)
  at Function.Module._load (module.js:314:12)
  at Function.Module.runMain (module.js:447:10)
  at startup (node.js:139:18)
  at node.js:999:3

This is the statement of finally block

throw 語句

CoffeeScript 也支援 **throw** 語句。可以使用 throw 語句丟擲內建異常或自定義異常。之後可以捕獲這些異常並採取相應的措施。

示例

以下示例演示了在 CoffeeScript 中使用 **throw** 語句的方法。將此程式碼儲存到名為 **throw_example.coffee** 的檔案中

myFunc = ->
  a = 100
  b = 0
  try
    if b == 0
      throw ("Divided by zero error.")
    else
      c = a / b
  catch e
    console.log "Error: " + e

myFunc()

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c throw_example.coffee

編譯後，它會給你以下JavaScript程式碼。

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

  myFunc = function() {
    var a, b, c, e, error;
    a = 100;
    b = 0;
    try {
      if (b === 0) {
        throw "Divided by zero error.";
      } else {
        return c = a / b;
      }
    } catch (error) {
      e = error;
      return console.log("Error: " + e);
    }
  };

  myFunc();

}).call(this); 

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee throw_example.coffee

執行後，CoffeeScript檔案會產生以下輸出。

Divided by zero error.

CoffeeScript - 正則表示式

正則表示式是一個描述字元模式的物件，JavaScript 支援它。在 JavaScript 中，RegExp 類表示正則表示式，String 和 RegExp 都定義了使用正則表示式對文字執行強大的模式匹配和搜尋替換功能的方法。

CoffeeScript 中的正則表示式

CoffeeScript 中的正則表示式與 JavaScript 中的相同。訪問以下連結檢視 JavaScript 中的正則表示式：javascript_regular_expressions

語法

CoffeeScript 中的正則表示式透過將 RegExp 模式放在正斜槓之間來定義，如下所示。

pattern =/pattern/

示例

以下是在 CoffeeScript 中使用正則表示式的示例。在這裡，我們建立了一個表示式，用於查詢以粗體顯示的資料（`` 和 `` 標籤之間的資料）。將此程式碼儲存到名為 **regex_example.coffee** 的檔案中

input_data ="hello how are you welcome to <b>Tutorials Point.</b>"
regex = /<b>(.*)<\/b>/
result = regex.exec(input_data)
console.log result

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c regex_example.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var input_data, regex, result;

  input_data = "hello how are you welcome to <b>Tutorials Point.</b>";

  regex = /<b>(.*)<\/b>/;

  result = regex.exec(input_data);

  console.log(result);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee regex_example.coffee

執行後，CoffeeScript檔案會產生以下輸出。

[ '<b>Tutorials Point.</b>',
  'Tutorials Point.',
  index: 29,
  input: 'hello how are you welcome to <b> Tutorials Point.</b>' ]

heregex

我們使用 JavaScript 提供的語法編寫的複雜的正則表示式難以閱讀，因此，為了使正則表示式更易讀，CoffeeScript 為正則表示式提供了一種擴充套件語法，稱為 **heregex**。使用此語法，我們可以使用空格來分解普通的正則表示式，並且我們還可以在這些擴充套件的正則表示式中使用註釋，從而使它們更易於使用。

示例

以下示例演示了在 CoffeeScript 中使用高階正則表示式 **heregex** 的方法。在這裡，我們使用高階正則表示式重寫了上面的示例。將此程式碼儲存到名為 **heregex_example.coffee** 的檔案中

input_data ="hello how are you welcome to Tutorials Point."
heregex = ///
<b>  #bold opening tag 
(.*) #the tag value
</b>  #bold closing tag
///
result = heregex.exec(input_data)
console.log result

開啟命令提示符並編譯.coffee檔案，如下所示。

c:\> coffee -c heregex_example.coffee

編譯後，它會給你以下JavaScript程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var heregex, input_data, result;

  input_data = "hello how are you welcome to <b> Tutorials Point.</b>";

  heregex = /<b>(.*) <\/b>/;

  result = heregex.exec(input_data);

  console.log(result);

}).call(this);

現在，再次開啟命令提示符並執行CoffeeScript檔案，如下所示。

c:\> coffee heregex_example.coffee

執行後，CoffeeScript檔案會產生以下輸出。

[ '<b>Tutorials Point.</b>',
  'Tutorials Point.',
  index: 29,
  input: 'hello how are you welcome to <b>Tutorials Point.</b>' ]

CoffeeScript - 類和繼承

JavaScript 不提供 **class** 關鍵字。我們可以使用物件及其原型在 JavaScript 中實現繼承。每個物件都有自己的原型，它們繼承自其原型的函式和屬性。由於原型也是一個物件，它也擁有自己的原型。

儘管原型繼承比經典繼承強大得多，但對於新手使用者來說，它很難理解且令人困惑。

CoffeeScript 中的類

為了解決這個問題，CoffeeScript 提供了一個稱為 **class** 的基本結構，該結構是使用 JavaScript 的原型構建的。可以使用 class 關鍵字在 CoffeeScript 中定義類，如下所示。

class Class_Name

示例

考慮以下示例，這裡我們使用關鍵字 **class** 建立了一個名為 **Student** 的類。

class Student

編譯上述程式碼後，將生成以下 JavaScript 程式碼。

var Student;

Student = (function() {
  function Student() {}

  return Student;

})();

例項化類

我們可以使用 new 運算子例項化類，就像其他面向物件程式語言一樣，如下所示。

new Class_Name

可以使用 **new** 運算子例項化上面建立的 (Student) 類，如下所示。

class Student
new  Student

編譯上述程式碼後，將生成以下 JavaScript 程式碼。

var Student;

Student = (function() {
  function Student() {}

  return Student;

})();

new Student;

定義建構函式

建構函式是在例項化類時呼叫的函式，其主要目的是初始化例項變數。在 CoffeeScript 中，只需建立一個名為 **constructor** 的函式即可定義建構函式，如下所示。

class Student
  constructor: (name)->
  @name = name

在這裡，我們定義了一個建構函式並將區域性變數名賦值給例項變數。

**@** 運算子是 **this** 關鍵字的別名，用於指向類的例項變數。

如果在建構函式的引數前加上 **@**，則它將自動設定為例項變數。因此，上述程式碼可以簡寫為：

class Student
  constructor: (@name)->

示例

這是一個 CoffeeScript 建構函式的示例。將其儲存到名為 **constructor_example.coffee** 的檔案中

#Defining a class
class Student
  constructor: (@name)->

#instantiating a class by passing a string to constructor
student = new Student("Mohammed");
console.log "the name of the student is :"+student.name

編譯程式碼

開啟命令提示符並編譯上述示例，如下所示。

c:\>coffee -c constructor_example.coffee

執行上述命令後，將生成以下 JavaScript 程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var Student, student;

  Student = (function() {
    function Student(name) {
      this.name = name;
    }

    return Student;

  })();

  student = new Student("Mohammed");

  console.log("The name of the student is :"+student.name);

}).call(this);

執行程式碼

在命令提示符下執行以下命令來執行上述示例。

coffee constructor_example.coffee

執行上述示例後，將得到以下輸出。

The name of the student is :Mohammed

例項屬性

與物件一樣，我們也可以在類中擁有屬性。這些被稱為 **例項屬性**。

示例

考慮以下示例。在這裡，我們在類中建立了變數（name、age）和函式 (message())，並使用其物件訪問了它們。將此示例儲存到名為 **instance_properties_example.coffee** 的檔案中

#Defining a class
class Student
  name="Ravi"
  age=24
  message: ->
    "Hello "+name+" how are you" 

#instantiating a class by passing a string to constructor
student = new Student();
console.log student.message()

編譯後，上述程式碼將生成以下輸出。

// Generated by CoffeeScript 1.10.0
(function() {
  var Student, student;

  Student = (function() {
    var age, name;

    function Student() {}

    name = "Ravi";

    age = 24;

    Student.prototype.message = function() {
      return "Hello " + name + " how are you";
    };

    return Student;

  })();

  student = new Student();

  console.log(student.message());

}).call(this);

靜態屬性

我們可以在類中定義靜態屬性。靜態屬性的作用域僅限於類內，我們使用 **this 關鍵字** 或其別名 **@** 符號建立靜態函式，並且必須使用類名作為 `Class_Name.property` 來訪問這些屬性。

示例

在下面的示例中，我們建立了一個名為 message 的靜態函式，並訪問了它。將其儲存到名為 **static_properties_example.coffee** 的檔案中。

#Defining a class
class Student
  @message:(name) ->
    "Hello "+name+" how are you" 
console.log Student.message("Raju")

開啟命令提示符，使用以下命令編譯上述 CoffeeScript 檔案。

c:\>coffee -c  static_properties_example.coffee

編譯後，它會給你以下JavaScript程式碼。

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

  Student = (function() {
    function Student() {}

    Student.message = function(name) {
      return "Hello " + name + " how are you";
    };

    return Student;

  })();

  console.log(Student.message("Raju"));

}).call(this);

在命令提示符下執行上述 CoffeeScript 程式碼，如下所示。

c:\>coffee static_properties_example.coffee

執行上述示例後，將得到以下輸出。

Hello Raju how are you

繼承

在 CoffeeScript 中，我們可以使用 **extends** 關鍵字繼承一個類的屬性到另一個類。

示例

以下是在 CoffeeScript 中繼承的示例。這裡，我們有兩個類，名為 **Add** 和 **My_class**。我們在 My_class 類中繼承了名為 Add 類的屬性，並使用 **extends** 關鍵字訪問了它們。

#Defining a class
class Add
   a=20;b=30
   
   addition:->
     console.log "Sum of the two numbers is :"+(a+b) 

class My_class extends Add

my_class = new My_class()
my_class.addition()

CoffeeScript 在幕後使用原型繼承。在 CoffeeScript 中，每當我們建立例項時，都會呼叫父類的建構函式，直到我們覆蓋它為止。

我們可以使用 **super()** 關鍵字從子類呼叫父類的建構函式，如下面的示例所示。

#Defining a class
class Add
   constructor:(@a,@b) ->
   
   addition:=>
     console.log "Sum of the two numbers is :"+(@a+@b) 

class Mul extends Add
   constructor:(@a,@b) ->
     super(@a,@b)
   
   multiplication:->
     console.log "Product of the two numbers is :"+(@a*@b)

mul = new Mul(10,20)
mul.addition()
mul.multiplication()

動態類

CoffeeScript 使用原型繼承自動繼承類的所有例項屬性。這確保了類的動態性；即使在建立子類後向父類新增屬性，該屬性仍然會傳播到其所有繼承的子類。

class Animal
  constructor: (@name) ->

class Parrot extends Animal

Animal::rip = true

parrot = new Parrot("Macaw")
console.log "This parrot is no more" if parrot.rip

執行後，上述 CoffeeScript 將生成以下 JavaScript 程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var Animal, Parrot, parrot,
    extend = function(child, parent) { for (var key in parent) {
      if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() {
      this.constructor = child; } ctor.prototype = parent.prototype;
      child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
    hasProp = {}.hasOwnProperty;

  Animal = (function() {
    function Animal(name) {
      this.name = name;
    }

    return Animal;

  })();

  Parrot = (function(superClass) {
    extend(Parrot, superClass);

    function Parrot() {
      return Parrot.__super__.constructor.apply(this, arguments);
    }

    return Parrot;

  })(Animal);

  Animal.prototype.rip = true;

  parrot = new Parrot("Macaw");

  if (parrot.rip) {
    console.log("This parrot is no more");
  }
  
}).call(this);  

CoffeeScript - Ajax

AJAX 是一種用於建立互動式 Web 應用程式的 Web 開發技術。

• AJAX 代表 **A**synchronous **Ja**vaScript and **X**ML。這是一種使用 XML、HTML、CSS 和 JavaScript 建立更好、更快、更互動式 Web 應用程式的新技術。

• Ajax 使用 XHTML 用於內容，CSS 用於表示，以及文件物件模型和 JavaScript 用於動態內容顯示。

• 傳統的 Web 應用程式使用同步請求在伺服器之間傳輸資訊。這意味著您填寫表單，點選提交，然後被定向到包含伺服器新資訊的新的頁面。

• 使用 AJAX，當您點選提交時，JavaScript 將向伺服器發出請求，解釋結果並更新當前螢幕。從最純粹的意義上講，使用者甚至永遠不會知道任何東西被傳輸到伺服器。

• XML 通常用作接收伺服器資料的格式，儘管可以使用任何格式，包括純文字。

• AJAX 是一種獨立於 Web 伺服器軟體的 Web 瀏覽器技術。

• 客戶端程式在後臺向伺服器請求資訊時，使用者可以繼續使用應用程式。

通常，我們使用 jQuery 來處理 Ajax。以下是一個 Ajax 和 jQuery 的示例

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
	
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
		
   </body>
	
</html>

這裡 **load()** 啟動對指定 URL ** /coffeescript/result.html** 檔案的 Ajax 請求。載入此檔案後，所有內容都將填充到 ID 為 *stage* 的 `

<h1>THIS IS RESULT...</h1>

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>
        
      <script type="text/coffeescript">
        $(document).ready ->
          $('#driver').click (event) ->
            $('#stage').load '/jquery/result.html'
            return
          return
      </script>
   </head>
	
   <body>
	
      <p>Click on the button to load /jquery/result.html file -</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
		
   </body>
	
</html>

$(document).ready

$(document).ready ->

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
	
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
		
   </body>
	
</html>

 <html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>
	  
      <script type="text/coffeescript">
        $(document).ready ->
          $('div').click ->
            $(this).before '<div class="div"></div>'
            return
          return
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
	
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
		
   </body>
	
</html>

Tutorials Point is giving self learning content 
to teach the world in simple and easy way!!!!! 

var fs = require("fs");  
var data = fs.readFileSync('input.txt');  
console.log(data.toString()); 
console.log("Program Ended");

$ node main.js

Tutorials Point is giving self learning content 
to teach the world in simple and easy way!!!!! 
Program Ended

Tutorials Point is giving self learning content 
to teach the world in simple and easy way!!!!! 

var fs = require("fs");  
fs.readFile('input.txt', function (err, data) { 
  if (err) return console.error(err); 
    console.log(data.toString()); 
}); 
console.log("Program Ended");

$ node main.js 

Program Ended 
Tutorials Point is giving self learning content 
to teach the world in simple and easy way!!!!!

C:\Program Files\MongoDB\Server\3.2\bin> mongod

npm install mongodb --save

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url
    #Close connection
    db.close()
  return

c:\> coffee connect_db.coffee
coffee connect_db.collection
Connection established to mongodb://:27017/testdb

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url
	
    #Create collection
    col = db.collection('My_collection')
    console.log "Collection created successfully."
	
    #Close connection
    db.close()
  return

c:/> coffee create_collection.coffee
Connection established to mongodb://:27017/testdb
Collection created successfully.

#Sample JSON Documents
doc1 = {name: 'Ram', age: 26, city: 'Hyderabad'}
doc2 = {name: 'Rahim', age: 27, city: 'Banglore'}
doc3 = {name: 'Robert', age: 28, city: 'Mumbai'}

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url  
  #Creating collection
  col = db.collection('My_collection')
	
  #Inserting documents
  col.insert [doc1,doc2,doc3], (err, result) ->
    if err
      console.log err
    else
      console.log "Documents inserted successfully"
    #Close connection
    db.close()
    return
  return

c:/> coffee insert_documents.coffee
Connection established to mongodb://:27017/testdb
Documents inserted successfully

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url	
	#Creating collection object
    col = db.collection('My_collection')    
    #Inserting Documents
    col.find({name: 'Ram'}).toArray (err, result)->
      if err
        console.log err
      else 
      console.log 'Found:', result			
      #Closing connection
      db.close()
      return
  return

C:\> coffee read_documents.coffee
Connection established to mongodb://:27017/testdb
Found: [ { _id: 56e269c10478809c3009ad1e,
    name: 'Ram',
    age: 26,
    city: 'Hyderabad' } ]

#Requiring the Mongodb package
mongo = require 'mongodb'

#Creating a MongoClient object
MongoClient = mongo.MongoClient

#Preparing the URL
url = 'mongodb://:27017/testdb'

#Connecting to the server
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url	
	#Creating collection object
    col = db.collection('My_collection')    
    #Reading all Documents
    col.find().toArray (err, result)->
      if err
        console.log err
      else 
      console.log 'Found:', result			
      #Closing connection
      db.close()
      return
  return

C:\> coffee read_all_documents.coffee
Connection established to mongodb://:27017/testdb
Found: [ { _id: 56e2c5e27e0bad741a68c03e,
    name: 'Ram',
    age: 26,
    city: 'Hyderabad' },
  { _id: 56e2c5e27e0bad741a68c03f,
    name: 'Rahim',
    age: 27,
    city: 'Banglore' },
  { _id: 56e2c5e27e0bad741a68c040,
    name: 'Robert',
    age: 28,
    city: 'Mumbai' } ]

#Get mongo client object
MongoClient = require('mongodb').MongoClient
#Connecting to mongodb
url = 'mongodb://:27017/testdb'
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url	
	#Creating collection
    col = db.collection('My_collection')
    #Reading Data
    col.update {name:'Ram'},{$set:{city:'Delhi'}},(err, result)->
      if err
        console.log err
      else 
      console.log "Document updated"    
      
      #Closing connection
      db.close()
	  return
  return

C:\> coffee update_documents.coffee
Connection established to mongodb://:27017/testdb
Document updated

C:\> coffee Read_all_documents.coffee
Connection established to mongodb://:27017/testdb
Found: [ { _id: 56e2c5e27e0bad741a68c03e,
    name: 'Ram',
    age: 26,
    city: 'Delhi' },
  { _id: 56e2c5e27e0bad741a68c03f,
    name: 'Rahim',
    age: 27,
    city: 'Banglore' },
  { _id: 56e2c5e27e0bad741a68c040,
    name: 'Robert',
    age: 28,
    city: 'Mumbai' } ]

#Get mongo client object
MongoClient = require('mongodb').MongoClient
#Connecting to mongodb
url = 'mongodb://:27017/testdb'
MongoClient.connect url, (err, db) ->
  if err
    console.log 'Unable to connect . Error:', err
  else
    console.log 'Connection established to', url	
	#Creating collection
    col = db.collection('My_collection')
    #Deleting Data
    col.remove()
    console.log "Document deleted"
      
    #Closing connection
    db.close()	  
  return

C:\> coffee delete_documents.coffee
Connection established to mongodb://:27017/testdb
Document deleted

C:\> coffee Read_all_documents.coffee
Connection established to mongodb://:27017/testdb
Found: [ ]

npm install sqlite3

#Creating sqlite3 package
sqlite3 = require('sqlite3')

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Database opened successfully."

c:\> coffee create_db.coffee
Successfully connected

#Creating sqlite3 package
sqlite3 = require('sqlite3')

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  db.run 'CREATE TABLE STUDENT (name TEXT, age INTEGER, city TEXT)'
  console.log "Table created successfully"  
  return
db.close()

C:\> coffee create_table.coffee
Successfully connected
Table created successfully

#Creating sqlite3 package
sqlite3 = require('sqlite3').verbose()

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  stmt = db.prepare('INSERT INTO STUDENT VALUES (?,?,?)')
  stmt.run 'Ram',24,'Hyderabad'
  stmt.run 'Robert',25,'Mumbai'
  stmt.run 'Rahim',26,'Bangalore'
  stmt.finalize()
  console.log "Data inserted successfully"
  return
db.close()

C:\> coffee insert_data.coffee
Successfully connected
Data inserted successfully

#Creating sqlite3 package
sqlite3 = require('sqlite3').verbose()

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  console.log "The contents of the table STUDENT are ::"
  db.each 'SELECT rowid AS id, name,age,city FROM STUDENT', (err, row) ->
    console.log row.id + ': ' +row.name+', '+ row.age+', '+ row.city
    return
  return
db.close()

C:\> coffee retrive_data.coffee
Successfully connected
The contents of the table STUDENT are ::
1: Ram, 24, Hyderabad
2: Robert, 25, Mumbai
3: Rahim, 26, Bangalore

#Creating sqlite3 package
sqlite3 = require('sqlite3').verbose()

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  #Updating data
  stmt = db.prepare('UPDATE STUDENT SET city = ? where name = ?')
  stmt.run 'Delhi','Ram'
  console.log "Table updated"
  stmt.finalize()

  #Retrieving data after update operation
  console.log "The contents of the table STUDENT after update operation are ::"
  db.each 'SELECT rowid AS id, name, city FROM STUDENT', (err, row) ->
    console.log row.id + ': ' +row.name+', '+ row.city
    return
  return
db.close()

C:\> coffee update_data.coffee
Successfully connected
Table updated
The contents of the table STUDENT after update operation are ::
1: Ram, Delhi
2: Robert, Mumbai
3: Rahim, Bangalore

#Creating sqlite3 package
sqlite3 = require('sqlite3').verbose()

#Creating a Database instance
db = new (sqlite3.Database)('test.db')
console.log "Successfully connected"

db.serialize ->
  #Deleting data
  stmt = db.prepare('DELETE FROM STUDENT WHERE name = ?')
  stmt.run 'Ram'
  console.log "Record deleted"
  stmt.finalize()

  #Retrieving data after delete operation
  console.log "The contents of the table STUDENT after delete operation are ::"
  db.each 'SELECT rowid AS id, name, city FROM STUDENT', (err, row) ->
    console.log row.id + ': ' +row.name+', '+ row.city
    return
  return
db.close()

Successfully connected
Record deleted
The contents of the table STUDENT after delete operation are ::
2: Robert, Mumbai
3: Rahim, Bangalore