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

列印頁面