JavaScript 物件

在本教程中,你將學習如何在 JavaScript 中建立和使用物件。

什麼是物件?

JavaScript 是一種基於物件的語言,在 JavaScript 中,幾乎所有東西都是一個物件,或者就像一個物件。因此,要有效地使用 JavaScript,我們需要了解物件的工作方式以及如何建立自己的物件並使用它們。

JavaScript 物件只是命名值的集合。這些命名值通常稱為物件的屬性。如果你還記得 JavaScript 陣列章節,則陣列是值的集合,其中每個值都有一個索引(數字鍵),從零開始,每個值遞增 1。物件類似於陣列,但區別在於你自己定義鍵,例如名稱、年齡、性別等。在以下部分中,我們將詳細瞭解物件。

建立物件

可以使用帶有可選屬性列表的大括號 {} 建立物件。屬性是 鍵:值 對,其中鍵(或屬性名稱)始終是字串,值(或屬性值)可以是任何資料型別,如字串、數字、布林值或複雜資料型別(如陣列)、函式和其他物件。此外,將函式作為其值的屬性通常稱為方法,以將它們與其他屬性區分開來。典型的 JavaScript 物件可能如下所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

上面的例子中建立名為 person 的物件,其具有三個屬性 nameage 以及 gender 和一個方法 displayName() 。該 displayName() 方法顯示 this.name 解析為 person.name 的值。這是在 JavaScript 中建立新物件的最簡單且首選的方法,稱為物件文字語法。

屬性名稱通常不需要引用,除非它們是保留字,或者它們包含空格或特殊字元(除字母,數字 _$ 字元之外的任何字元),或者如果它們以數字開頭,如以下示例:

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

注意: 從 ECMAScript 5 開始,保留字可以作為物件的屬性名而不用引用。但是,你應該避免這樣做以獲得更好的相容性。

訪問物件的屬性

要訪問或獲取屬性的值,可以使用點(.)或方括號([])表示法,如以下示例所示:

var book = {
    "name": "Harry Potter and the Goblet of Fire",
    "author": "J. K. Rowling",
    "year": 2000
};

// Dot notation
document.write(book.author);  // Prints: J. K. Rowling

// Bracket notation
document.write(book["year"]); // Prints: 2000

點符號更易於讀寫,但不能始終使用。如果屬性的名稱無效(即如果它包含空格或特殊字元),則不能使用點表示法; 你必須使用括號表示法,如下例所示:

var book = {
    name: "Harry Potter and the Goblet of Fire",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

// Bracket notation
document.write(book["publication date"]); // Prints: 8 July 2000

方括號表示法比點符號提供了更多的靈活性。它還允許你將屬性名稱指定為變數而不僅僅是字串文字,如下例所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = prompt("Enter any property name to get its value");
alert(person[key]); // Outputs: Peter (if enter "name")

迴圈物件的屬性

你可以使用 for...in 迴圈遍歷物件的鍵值對。此迴圈專門針對迭代物件的屬性進行了優化。這是一個例子:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Iterating over object properties
for(var i in person) {  
    document.write(person[i] + "<br>"); // Prints: name, age and gender
}

設定物件的屬性

同樣,你可以使用點(.)或括號([])表示法設定新屬性或更新現有屬性,如以下示例所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

// Setting a new property
person.country = "United States";
document.write(person.country); // Prints: United States

person["email"] = "peterparker@mail.com";
document.write(person.email); // Prints: peterparker@mail.com

// Updating existing property
person.age = 30;
document.write(person.age); // Prints: 30

person["name"] = "Peter Parker";
document.write(person.name); // Prints: Peter Parker

刪除物件的屬性

delete 運算子可以被用來從一個物件中完全刪除屬性。刪除是從物件中實際刪除屬性的唯一方法。將屬性設定為 undefinednull 僅更改屬性的值。它不會從物件中刪除屬性。

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

// Deleting property
delete person.age;
alert(person.age); // Outputs: undefined

注意: delete 運算子僅刪除一個物件的屬性或陣列元素。它對變數或宣告的函式沒有影響。但是,你應該避免使用 delete 操作符來刪除陣列元素,因為它不會更改陣列的長度,只會在陣列中留下一個洞。

呼叫物件的方法

你可以像訪問屬性一樣訪問物件的方法 - 使用點表示法或使用方括號表示法。這是一個例子:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // Outputs: Peter
person["displayName"](); // Outputs: Peter

對數值和引用操作的區別

JavaScript 物件是引用型別,意味著當你複製它們時,你實際上只是複製對該物件的引用。而字串和數字等原始值則作為整體值分配或複製。為了更好地理解這一切,讓我們看看以下示例:

var message = "Hello World!";

var greet = message; // Assign message variable to a new variable
greet = "Hi, there!";

document.write(message);  // Prints: Hello World!
document.write(greet);  // Prints: Hi, there!

在上面的例子中,我們製作了一個變數的副本 message 並更改了該副本的值(即變數 greet)。這兩個變數保持不同和獨立。但是,如果我們對一個物件做同樣的事情,我們將得到一個不同的結果,如下例所示:

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var user = person; // Assign person variable to a new variable
user.name = "Harry";

document.write(person.name);  // Prints: Harry
document.write(user.name);  // Prints: Harry

你可以清楚地看到,對 user 變數所做的任何更改也會更改 person 變數; 它發生是因為兩個變數都引用同一個物件。因此,簡單地複製物件實際上並不克隆它,而是複製對該物件的引用。