理解 JavaScript 中的對象

本文最初是為 DigitalOcean 編寫的 .

簡介

一個對象 在 JavaScript 中是由 names 的集合組成的數據類型 或鍵 和價值觀 , 以 name:value 對 表示 . name:value 對可以由 properties 組成 可能包含任何數據類型（包括字符串、數字和布爾值）以及方法 ，它們是包含在對像中的函數。

JavaScript 中的對像是獨立的實體，可以比作現實生活中的對象。例如，一本書可能是您可以通過標題、作者、頁數和類型來描述的對象。同樣，汽車可能是您可以通過顏色、品牌、型號和馬力來描述的對象。 JavaScript 數組也是一種對象。

對像是大多數 JavaScript 程序不可或缺的基礎方面。例如，用戶帳戶對象可能包含用戶名、密碼和電子郵件地址等數據。另一個常見的用例是網絡購物平台的購物車，它可能由許多對象組成，其中包含每個項目的所有相關信息，例如名稱、價格和運輸信息的重量。待辦事項列表是另一種可能由對象組成的常見應用程序。

在本教程中，我們將回顧如何創建對象，對象屬性和方法是什麼，以及如何訪問、添加、刪除、修改和循環訪問對象屬性。

創建對象

對像是一種 JavaScript 數據類型，就像數字或字符串也是一種數據類型一樣。作為數據類型，對象可以包含在變量中。

在 JavaScript 中構造對像有兩種方式：

• 對象字面量 ，它使用大括號：{}
• 對象構造函數 ，它使用 new 關鍵詞

我們可以使用這兩種方法製作一個空對象示例以進行演示。

首先是對象字面量。

// Initialize object literal with curly brackets
const objectLiteral = {}

對象字面量用大括號初始化對象。

在下一個示例中，我們將使用對象構造函數。

// Initialize object constructor with new Object
const objectConstructor = new Object()

使用用 new Object() 初始化的對象構造方法創建了相同的數據 .

這兩種方法都將創建一個空對象。使用對象字面量是更常見和首選的方法，因為它不太可能出現不一致和意外結果。

我們可以創建一個示例對象，包含在變量 gimli 中 , 來形容一個人物。

// Initialize gimli object
const gimli = {
  name: 'Gimli',
  race: 'dwarf',
  weapon: 'axe',
  greet: function () {
    return `Hi, my name is ${this.name}!`
  },
}

我們的新對像是 gimli ，它具有三個屬性。每個屬性都包含一個 name:value 對，也稱為 key:value 一對。 weapon 是屬性名稱之一，與屬性值 "axe" 相關聯 ，一個字符串。它有一個方法，方法名稱為 greet 以及由函數內容組成的方法值。

greet內 ，您可能會注意到 this 關鍵詞。使用 this 時 在對象內部，它指的是當前對象，在本例中為 gimli .

發送 gimli 到控制台會打印出整個對象。

gimli

{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

此輸出的呈現方式可能因您使用的控制台而異，但您應該注意到傳遞給對象的所有值都顯示在輸出中。

接下來，我們將回顧 JavaScript 對象的屬性和方法。

屬性和方法

對象可以有屬性 和方法 .

屬性是對象內名稱（鍵）和值之間的關聯，它可以包含任何數據類型。屬性一般是指對象的特性。

方法是一個函數，它是一個對象屬性的值，因此是一個對象可以執行的任務。

記住對象屬性和方法之間區別的一種簡單方法是將屬性視為名詞，將方法視為動詞。 name , race 和 weapon 都是與對象相關聯的名詞，並且是屬性。 fight() 或 talk() 是可以用作方法函數定義的動詞。

訪問對象屬性

有兩種方法可以訪問對象的屬性。

• 點符號：.
• 括號表示法：[]

讓我們重溫一下我們原來的示例對象，gimli .

const gimli = {
  name: 'Gimli',
  race: 'dwarf',
  weapon: 'axe',
  greet: function () {
    return `Hi, my name is ${this.name}!`
  },
}

如果我們要檢索 weapon 的屬性值 ，我們可以通過輸入對象的變量名，然後是一個點 (. ) 和屬性或方法名稱。

// Retrieve the value of the weapon property
gimli.weapon

"axe"

gimli.weapon 輸出屬性值，即"axe" .我們還可以使用對象括號表示法檢索相同的數據。與您可能索引和訪問字符串的方式類似，括號表示法的語法是兩個方括號 ([] ) 封裝屬性名稱。

// Retrieve the value of the weapon property
gimli['weapon']

"axe"

點表示法和括號表示法都經常使用。點表示法更快、更易讀，但有更多限制。括號表示法允許訪問存儲在變量中的屬性名稱，如果對象的屬性包含任何類型的特殊字符，則必須使用括號表示法。

為了檢索對象方法，您可以像調用常規函數一樣調用它，只是附加到對像變量上。

gimli.greet()

"Hi, my name is Gimli!"

在上面的示例中，我們看到對象方法 greet() 的字符串值 被退回。

我們現在可以繼續通過添加名稱：值對或修改現有的來修改對象屬性。

添加和修改對象屬性

為了向對象添加新屬性，您可以使用賦值運算符（= )。

例如，我們可以將數值數據類型添加到 gimli 對像作為新的 age 財產。點和括號都可以用來添加一個新的對象屬性。

// Add new age property to gimli
gimli.age = 139

// Add new age property to gimli
gimli['age'] = 139

我們可以像上面一樣使用點符號或括號符號來訪問該值。

gimli.age

139

也可以使用相同的過程將方法添加到對像中。

// Add new fight method to gimli
gimli.fight = function () {
  return `Gimli attacks with an ${this.weapon}.`
}

一旦我們創建了這個新的對象方法，我們就可以像上面那樣調用它。

gimli.fight()

"Gimli attacks with an axe."

使用相同的方法，可以通過為現有屬性分配新值來修改對象的屬性。

// Update weapon from axe to battle axe
gimli.weapon = 'battle axe'

此時，如果我們調用該對象，就會看到我們所有的添加和修改。

gimli

{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

通過賦值操作，我們可以修改JavaScript對象的屬性和方法。

刪除對象屬性

為了從對像中刪除屬性，您將使用 delete 關鍵詞。 delete 是從對像中刪除屬性的運算符。

在下面的示例中，我們將刪除 weapon gimli 的屬性 使用 delete .

// Remove weapon from gimli
delete gimli.weapon

true

delete 操作評估為 true 如果該屬性已成功刪除，或者是否用於不存在的屬性。

我們可以測試gimli的輸出 看看是否成功。

gimli

{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

在上面的輸出中，weapon 名稱及其關聯值不再可用，表明我們已成功刪除該屬性。

在下一節中，我們將介紹在 JavaScript 中遍歷對象的方法。

通過對象屬性循環

JavaScript 有一個內置類型 for 專門用於迭代對象屬性的循環。這稱為 for...in 循環。

這是我們主要對象示例的簡化版本，gimli .

const gimli = {
  name: 'Gimli',
  race: 'dwarf',
  weapon: 'battle axe',
}

我們可以使用 for...in 遍歷gimli的所有屬性 並將它們打印到控制台。使用括號表示法，我們可以將屬性值作為變量檢索，在本例中為 key .

// Iterate through properties of gimli
for (let key in gimli) {
  console.log(gimli[key])
}

Gimli
dwarf
battle axe

我們還可以僅使用 for...in 中的第一個變量來檢索屬性名稱本身 環形。我們使用了字符串方法將鍵值轉換為大寫。

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key])
}

NAME: Gimli
RACE: dwarf
WEAPON: battle axe

for...in 循環不要與 for...of 混淆 循環，專門用於 Array 對像類型。您可以在“了解 JavaScript 中的數組”教程中了解更多關於遍歷數組的內容。

另一個有用的枚舉方法是 Object.keys() 方法，它將返回一個對象鍵的數組。

// Initialize method on gimli object to return property keys
Object.keys(gimli)

["name", "race", "weapon"]

此方法允許我們將對象的鍵或名稱作為數組使用，因此您可以利用 JavaScript 數組可用的所有方法。

結論

對像是 JavaScript 編程語言的一個非常有用和通用的特性。它們是用 JavaScript 編寫代碼的一些主要構建塊，是組織相關數據和功能的實用方法。待辦事項列表、購物車、用戶帳戶和 web 地圖上的位置都是您可能遇到的真實世界 JavaScript 對象的眾多示例中的一小部分。

在本教程中，我們了解了屬性和方法之間的區別，如何創建對象，以及如何添加、刪除、修改和循環對象屬性。要了解有關 JavaScript 對象的更多信息，請閱讀 Mozilla 開發人員網絡上的使用對象。