JavaScript - 物件屬性

您好，未來的 JavaScript 巫師們！今天，我們將深入探索 JavaScript 物件屬性的神奇世界。作為你們親切鄰居的計算機科學老師，我將帶領你們走過這段令人興奮的旅程。所以，拿起你們的虛擬魔杖（鍵盤），讓我們施展一些代碼魔法吧！

JavaScript 物件屬性

JavaScript 中的物件就像寶藏箱一樣 - 它們以屬性的形式保存有價值的信息。每個屬性都是一個鍵值對，其中鍵就像標籤，值就是寶藏本身。讓我們創建我們的第一個物件：

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

在這裡，我們創建了一個 wizard 物件，它有三個屬性：name、age 和 house。每個屬性都有一個鍵（如 "name"）和一個值（如 "Harry"）。

存取物件屬性

現在我們有了 wizard 物件，我們如何存取它的屬性呢？有兩種方法可以做到這點：

1. 點運算符
2. 括號運算符

讓我們兩種都試一試：

// 點運算符
console.log(wizard.name);  // 輸出：Harry

// 括號運算符
console.log(wizard["house"]);  // 輸出：Gryffindor

點運算符更簡單，也更常見。然而，括號運算符在屬性名稱有空格或特殊字符，或者當你使用變量來存取屬性時，會派上用場。

let property = "age";
console.log(wizard[property]);  // 輸出：17

存取嵌套物件屬性

有時候，物件中可以包含其他物件。這就像神奇的嵌套娃！讓我們擴展我們的 wizard 物件：

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor",
wand: {
wood: "Holly",
core: "Phoenix feather",
length: 11
}
};

要存取嵌套屬性，我們只需簡單地鏈接我們的點或括號運算符：

console.log(wizard.wand.wood);  // 輸出：Holly
console.log(wizard["wand"]["core"]);  // 輸出：Phoenix feather

添加或更新物件屬性

JavaScript 中的物件是可變的，這意味著我們可以在創建後更改它們。讓我們給我們的巫師一些新技能：

// 添加一個新屬性
wizard.skill = "Quidditch";

// 更新一個現有的屬性
wizard.age = 18;

console.log(wizard.skill);  // 輸出：Quidditch
console.log(wizard.age);  // 輸出：18

刪除物件屬性

有時候，我們需要讓屬性消失。為此，我們使用 delete 運算符：

delete wizard.house;
console.log(wizard.house);  // 輸出：undefined

噗！house 屬性消失了。記住，使用 delete 只會從物件中移除屬性，它不會影響任何可能持有該屬性值的變量。

列舉物件屬性

如果我們想查看物件的所有屬性怎麼辦？我們可以使用 for...in 循環：

for (let key in wizard) {
console.log(key + ": " + wizard[key]);
}

這將列舉 wizard 物件的所以可列舉屬性。但等等，還有更多！我們也可以使用 Object.keys()、Object.values() 或 Object.entries() 來獲取物件鍵、值或兩者的數組：

console.log(Object.keys(wizard));    // 輸出：["name", "age", "wand", "skill"]
console.log(Object.values(wizard));  // 輸出：["Harry", 18, {wood: "Holly", core: "Phoenix feather", length: 11}, "Quidditch"]
console.log(Object.entries(wizard)); // 輸出： [["name", "Harry"], ["age", 18], ["wand", {...}], ["skill", "Quidditch"]]

屬性屬性

JavaScript 中的每個屬性都有一些定義其行為的屬性。這些屬性就像屬性的個性特徵。讓我們來認識它們：

1. value：屬性的值（顯然！）
2. writable：我們能否更改屬性的值？
3. enumerable：當我們列舉物件的屬性時，這個屬性應該出現嗎？
4. configurable：我們能否刪除這個屬性或修改其屬性？

默認情況下，我們正常創建的屬性這些都設置為 true。但我們可以使用 Object.defineProperty() 來更改它們：

Object.defineProperty(wizard, "name", {
writable: false,
enumerable: false
});

wizard.name = "Ron";  // 這不起作用
console.log(wizard.name);  // 輸出：Harry

for (let key in wizard) {
console.log(key);  // "name" 這裡不會出現
}

這裡是一個總結我們學到的屬性方法的表格：

方法	描述
object.property	使用點運算符訪問屬性
object["property"]	使用括號運算符訪問屬性
object.property = value	添加或更新屬性
delete object.property	刪除屬性
for...in	列舉物件屬性
Object.keys(object)	獲取物件鍵的數組
Object.values(object)	獲取物件值的數組
Object.entries(object)	獲取物件 [鍵, 值] 對的數組
Object.defineProperty()	定義一個新屬性或修改現有屬性

年輕的編程者們，這就是你的 JavaScript 物件屬性速成課程。記住，熟能生巧，所以請持續實驗這些概念。在你還沒有意識到之前，你就會像真正的 JavaScript 巫師一樣召喚出複雜的物件！

Credits: Image by storyset