javaScript中的對象語法

關鍵要點

• 理解 JavaScript 對像對於在該語言中成功開發至關重要，因為許多內置數據類型都表示為對象。對像是由基元和其他對象構建的複合數據類型，其屬性描述對象的各個方面。
• 通過多種方法可以在 JavaScript 中創建和訪問對象。對象文字表示法（用大括號表示）允許快速創建具有鍵/值對的對象。可以通過點表示法或方括號表示法訪問對象屬性，方括號表示法為變量屬性名稱或包含特殊字符的屬性名稱提供了更大的靈活性。
• 用作對象屬性的函數稱為方法，可以使用點表示法和方括號表示法調用它們。可以通過賦值語句將屬性和方法添加到現有對像中，並且可以通過將點和/或方括號引用鏈接在一起訪問嵌套對象的屬性。

JavaScript 對像是該語言的基石。許多內置數據類型（例如錯誤、正則表達式和函數）在 JavaScript 中都表示為對象。要成為一名成功的 JavaScript 開發人員，您必須牢固掌握對象的運作方式。本文將教您 JavaScript 對象創建和操作的基礎知識。對像是複合數據類型，由基元和其他對象構建而成。對象的構建塊通常被稱為其字段或屬性。屬性用於描述對象的某些方面。例如，屬性可以描述列表的長度、狗的顏色或人的出生日期。

創建對象

在 JavaScript 中創建對像很容易。該語言提供了稱為對象文字表示法的語法，用於快速創建對象。對象文字用大括號表示。以下示例創建一個沒有屬性的空對象。

var object = {};

在大括號內，屬性及其值被指定為鍵/值對列表。鍵可以是字符串或標識符，而值可以是任何有效的表達式。鍵/值對列表用逗號分隔，每個鍵和值用冒號分隔。以下示例使用文字表示法創建一個具有三個屬性的對象。第一個屬性 foo 存儲數字 1。第二個屬性 bar 使用字符串指定，也存儲字符串值。第三個屬性 baz 存儲一個空對象。

var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};

請注意前面示例中空格的使用。每個屬性都寫在單獨一行並縮進。整個對象可以寫在單行上，但是以這種格式編寫的代碼更易讀。對於具有許多屬性或嵌套對象的 對象，尤其如此。

訪問屬性

JavaScript 提供了兩種訪問對象屬性的表示法。第一種也是最常見的一種稱為點表示法。在點表示法中，通過給出主機對象的名稱，後跟一個句點（或點），然後是屬性名稱來訪問屬性。以下示例顯示瞭如何使用點表示法讀取和寫入屬性。如果 object.foo 最初存儲的值為 1，則執行此語句後其值將變為 2。 請注意，如果 object.foo 還沒有值，則它將是未定義的。

var object = {};

訪問對象屬性的另一種語法稱為方括號表示法。在方括號表示法中，對象名稱後跟一組方括號。在方括號內，屬性名稱指定為字符串。前麵點表示法的示例已在下面重寫為使用方括號表示法。雖然代碼可能看起來不同，但它在功能上與前面的示例等效。

var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};

方括號表示法比點表示法更具表現力，因為它允許變量指定屬性名稱的全部或部分。這是可能的，因為 JavaScript 解釋器會自動將方括號內的表達式轉換為字符串，然後檢索相應的屬性。以下示例顯示瞭如何使用方括號表示法動態創建屬性名稱。在此示例中，屬性名稱 foo 是通過將變量 f 的內容與字符串“oo”連接起來創建的。

object.foo = object.foo + 1;

方括號表示法還允許屬性名稱包含點表示法中禁止的字符。例如，以下語句在方括號表示法中完全合法。但是，如果您嘗試在點表示法中創建相同的屬性名稱，則會遇到語法錯誤。

object["foo"] = object["foo"] + 1;

訪問嵌套屬性

可以通過將點和/或方括號引用鏈接在一起訪問嵌套對象的屬性。例如，以下對象包含一個名為 baz 的嵌套對象，該對象包含另一個名為 foo 的對象，該對像有一個名為 bar 的屬性，該屬性存儲值 5。

var f = "f";

object[f + "oo"] = "bar";

以下表達式訪問嵌套屬性 bar。第一個表達式使用點表示法，而第二個表達式使用方括號表示法。第三個表達式結合了兩種表示法以達到相同的結果。

object["!@#$%^&*()."] = true;

如果使用不當，像前面示例中所示的表達式可能會導致性能下降。評估每個點或方括號表達式都需要時間。如果多次使用相同的屬性，則最好只訪問一次該屬性，然後將該值存儲在局部變量中以供將來所有用途使用。以下示例在循環中多次使用 bar。但是，與其浪費時間一遍又一遍地計算相同的值，不如將 bar 存儲在局部變量中。

var object = {
  baz: {
    foo: {
      bar: 5
    }
  }
};

函數作為方法

當函數用作對象屬性時，它被稱為方法。與屬性一樣，方法也可以在對象文字表示法中指定。以下示例顯示瞭如何實現這一點。

object.baz.foo.bar;
object["baz"]["foo"]["bar"];
object["baz"].foo["bar"];

也可以使用點表示法和方括號表示法調用方法。以下示例使用這兩種表示法調用前面示例中的 sum() 方法。

var object = {};

添加屬性和方法

對象文字表示法對於創建新對像很有用，但它不能向現有對象添加屬性或方法。幸運的是，向對象添加新數據就像創建賦值語句一樣簡單。以下示例創建一個空對象。然後使用賦值語句添加兩個屬性 foo 和 bar 以及一個方法 baz。請注意，此示例使用點表示法，但方括號表示法也能同樣有效。

var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};

結論

本文介紹了 JavaScript 對象語法的基礎知識。掌握這些內容至關重要，因為它構成了該語言其餘部分的基礎。他們說你必須先學會走路才能跑步。那麼，在 JavaScript 的世界裡，你必須先了解對象才能了解面向對象編程。

關於 JavaScript 對象語法的常見問題 (FAQ)

JavaScript 對象語法中點表示法和方括號表示法有什麼區別？

在 JavaScript 中，對像是鍵值對的集合。您可以使用點表示法或方括號表示法訪問這些值。點表示法更直接，更易於閱讀。當您知道屬性名稱時使用它。例如，如果您有一個名為“person”的對象，它有一個名為“name”的屬性，您可以像這樣訪問它：person.name。

另一方面，方括號表示法更靈活。它允許您使用變量或可能不是有效標識符的屬性名稱來訪問屬性。例如，如果屬性名稱包含空格或特殊字符，或者它是一個數字，您可以像這樣訪問它：person['property name']。

如何向現有的 JavaScript 對象添加屬性？

您可以使用點表示法或方括號表示法向現有的 JavaScript 對象添加屬性。對於點表示法，您只需使用語法 object.property = value。對於方括號表示法，語法為 object['property'] = value。在這兩種情況下，如果對像中還不存在該屬性，則會添加它。

如何從 JavaScript 對像中刪除屬性？

您可以使用“delete”運算符從 JavaScript 對像中刪除屬性。 “delete”運算符的語法對於點表示法為 delete object.property，對於方括號表示法為 delete object['property']。這將從對像中刪除屬性及其值。

JavaScript 對像中的方法是什麼？

方法是存儲為對象屬性的函數。它們用於執行利用對像數據的操作。您可以使用函數語法在對像中定義方法，如下所示：object.methodName = function() { / code / }。

如何迭代 JavaScript 對象的屬性？

您可以使用“for...in”循環迭代 JavaScript 對象的屬性。此循環將迭代對象的所以可枚舉屬性，包括從原型鏈繼承的屬性。語法如下：for (var property in object) { / code / }。

JavaScript 對像中的“this”關鍵字是什麼？

JavaScript 對像中的“this”關鍵字指的是它所屬的對象。在方法內部，“this”指的是所有者對象。在構造函數中，“this”指的是新創建的對象。

JavaScript 中的構造函數是什麼？

JavaScript 中的構造函數是用於創建相同類型對象的特殊函數。它們以大寫字母命名，以區別於普通函數。 “new”關鍵字用於調用構造函數並創建一個新對象。

JavaScript 中的對象原型是什麼？

每個 JavaScript 對像都有一個原型。原型也是一個對象，所有對像都從其原型繼承屬性和方法。這是 JavaScript 的一個強大功能，因為它允許您向對像類型的所以實例添加新的屬性或方法。

如何檢查 JavaScript 對像中是否存在屬性？

您可以使用“in”運算符或“hasOwnProperty”方法檢查 JavaScript 對像中是否存在屬性。 “in”運算符如果屬性存在於對像或其原型鏈中，則返回 true。 “hasOwnProperty”方法僅當屬性存在於對象本身時才返回 true。

JavaScript 中的對象解構是什麼？

JavaScript 中的對象解構是一個允許您從對像中提取屬性並將它們綁定到變量的功能。這可以使您的代碼更簡潔易讀。語法如下：var { property1, property2 } = object。

以上是javaScript中的對象語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！