屬性存取器

了解 JavaScript 中的屬性存取器

在 JavaScript 中，屬性存取器是允許您存取物件屬性的機制。有兩種主要方法可以做到這一點：點表示法和括號表示法。

點符號

點表示法是存取屬性最常見的方法。您只需使用點 (.) 後接屬性名稱即可。

括號表示法

當屬性名稱是動態的或不是有效的標識符（例如，它包含空格或特殊字元）時​​，括號表示法非常有用。您使用方括號 ([]) 並將屬性名稱作為字串傳遞

在 JavaScript 中建立對象

該語言提供了稱為物件文字表示法的語法，用於快速建立物件。物件字面量用花括號表示。以下範例建立一個沒有屬性的空物件。

var animal = {};

在大括號內，屬性及其值被指定為鍵/值對清單。
鍵可以是字串或標識符，而值可以是任何有效的表達式。鍵/值對列表以逗號分隔，每個鍵和值以冒號分隔。

以下範例使用文字表示法建立一個具有三個屬性的物件。

第一個屬性，動物，佔據第一。
第二個屬性 dolphin 使用字串指定，並且也儲存字串值。第三個屬性，哺乳動物，儲存一個空物件。

var animal = {
  dolphin: 1,
  "swim": "some string",
  mammal: {
  }
};

每個屬性都寫在單獨的行上並縮排。整個物件可以寫在一行上，但這種格式的程式碼更具可讀性。對於具有許多屬性的物件或嵌套物件尤其如此。

JavaScript 提供了兩種用於存取物件屬性的表示法。

第一個也是最常見的，稱為點符號。
在點表示法下，透過給予宿主物件的名稱、後接句點（或點）、再後接屬性名稱來存取屬性。

點符號

點表示法是存取屬性最常見的方法。您只需使用點 (.) 後接屬性名稱即可。例如：

以下範例顯示如何使用點表示法讀取和寫入屬性。如果對象.dolphin
最初的值為一，執行該語句後其值為二。

• 請注意，如果animal.dolphon 還沒有值，那麼它將是未定義的。

var animal = {};

存取物件屬性的語法稱為括號表示法。在方括號中，物件名稱後面跟著一組方括號。
在方括號內，屬性名稱被指定為字串。
前面的點表示法範例已在下面重寫為使用括號表示法。雖然程式碼可能看起來不同，但它在功能上與前面的範例相同。

var animal = {
  dolphin: 1,
  "swim": "some string",
  mammal: {
  }
};

括號表示法比點表示法更具表現力，因為它允許變數指定全部或部分屬性名稱。
這是可能的，因為 JavaScript 解釋器會自動將方括號內的表達式轉換為字串，然後檢索對應的屬性。

以下範例顯示如何使用括號表示法動態建立屬性名稱。在範例中，屬性名稱 foo 是透過將變數 d 的內容與字串「dolphin」連接起來來建立的。

animal.dolphin = animal.dolphin + 1;

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

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

存取嵌套屬性

巢狀物件的屬性可以透過將點和/或括號參考連結在一起來存取。
例如，以下物件包含一個名為 dolphin 的嵌套物件，其中包含另一個名為哺乳動物的對象，該物件具有一個名為years 的屬性，該屬性的值為 1。

var d = "d";

object[d + "dolphin"] = "bar";

以下表達式存取嵌套屬性years。第一個表達式使用 點表示法 ，而第二個表達式使用 方括號表示法 。
第三個表達式結合了兩種表示法來得到相同的結果.

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

如果使用不當，像上一個範例中所示的表達式可能會導致效能下降。
評估每個點或括號表達式需要時間。

如果多次使用相同屬性，則更有意義的是存取該屬性一次，然後將該值儲存在局部變數中以供將來使用。以下範例在迴圈內多次使用 bar。然而，bar 不是浪費時間一遍又一遍地計算相同的值，而是儲存在局部變數中。

var animal = {};

函數作為方法

當函數用作物件屬性時，它被稱為方法。與屬性一樣，方法也可以用物件文字表示法指定。以下範例展示如何實現這一點。

var animal = {
  dolphin: 1,
  "swim": "some string",
  mammal: {
  }
};

方法也可以使用點和括號表示法呼叫。
以下範例使用兩種表示法呼叫上一個範例中的 sum() 方法。

animal.dolphin = animal.dolphin + 1;

新增屬性和方法

物件文字表示法對於建立新物件很有用，但它不能為現有物件新增屬性或方法。
幸運的是，向物件新增資料就像建立賦值語句一樣簡單。

以下範例建立一個空物件。
然後使用賦值語句加入兩個屬性（海豚和哺乳動物）以及方法年。
請注意，此範例使用 點表示法 ，但 括號表示法 也同樣有效。

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

總結
物件是由基元和其他物件建構的複合資料類型。物件的建構塊通常稱為其欄位或屬性。屬性用於描述物件的某些方面。例如，屬性可以描述清單的長度、狗的顏色或人的出生日期。
因此 JavaScript 物件語法對於理解至關重要，因為它是語言的基礎。
首先，您需要先了解對象，然後才能了解物件導向的程式設計。

• 點表示法：當屬性名稱是有效識別符時使用。
• 括號表示法：當屬性名稱是動態或無效識別碼時使用。 這些存取器是 JavaScript 中有效操作物件及其屬性的基礎。

編碼快樂！

以上是屬性存取器的詳細內容。更多資訊請關注PHP中文網其他相關文章！