JavaScript - 顯示物件

你好啊，未來的 JavaScript 巔峰大師！今天，我們將踏上一段令人興奮的旅程，探索在 JavaScript 中顯示物件的奇妙世界。作為你們親切友善的鄰居電腦老師，我將指導你們一步步完成這次冒險。所以，拿起你們的虛擬魔杖（鍵盤），讓我們來施展一點 JavaScript 的魔法吧！

在 JavaScript 中顯示物件

首先，我們來了解一下 JavaScript 裡的物件到底是指什麼？想像你有一個神奇的盒子，它能夠存放關於某物的不同類型的資訊。這就是物件的本質！它是一個存放相關數據和功能的容器。

讓我們從一個簡單的例子開始：

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

在這裡，我們創建了一個名為 wizard 的物件，它有 name、age 和 house 這些屬性。但是，我們該如何顯示這個物件呢？如果我們試著直接打印它：

console.log(wizard);

我們可能會在控制台看到這樣的輸出：

{name: "Harry", age: 17, house: "Gryffindor"}

這並不是很有趣，對吧？讓我們來探索一些更神奇的顯示物件的方法！

訪問物件的屬性

顯示物件資訊最簡單的方法之一就是直接訪問它的屬性。這就像打開我們的神奇盒子，並個別查看每個項目。

console.log("Name: " + wizard.name);
console.log("Age: " + wizard.age);
console.log("House: " + wizard.house);

這會輸出：

Name: Harry
Age: 17
House: Gryffindor

現在好多了！我們現在可以清楚看到每個屬性。但如果我们想要一次顯示所有屬性，而不必一個個打出來呢？這就是我們下一個魔法來幫忙的地方！

使用 JSON.stringify() 方法

JSON.stringify() 就像是一個對物件施行的「顯形咒」。它將我們的物件轉換成格式化的字符串。

let wizardString = JSON.stringify(wizard);
console.log(wizardString);

這會輸出：

{"name":"Harry","age":17,"house":"Gryffindor"}

現在這看起來更有條理了！但是等等，還有更多！我們可以讓它看起來更漂亮：

let prettyWizard = JSON.stringify(wizard, null, 2);
console.log(prettyWizard);

然後，瞧瞧！

{
"name": "Harry",
"age": 17,
"house": "Gryffindor"
}

我們咒語中的 2 决定了縮進的空格數量。隨意調整到你喜歡的樣式！

使用 Object.entries() 方法

現在，讓我們學習一個更進階的咒語：Object.entries()。這個方法將我們的物件轉換成鍵值對的數組。

let wizardEntries = Object.entries(wizard);
console.log(wizardEntries);

這會輸出：

[
["name", "Harry"],
["age", 17],
["house", "Gryffindor"]
]

然後我們可以用它來創造一個像表格一樣的顯示：

wizardEntries.forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});

這會給我們：

name: Harry
age: 17
house: Gryffindor

使用 for...in 循環

最後但同樣重要的是，讓我們來探索 for...in 循環。這就像是一個讓我們能夠逐個走過物件屬性的咒語。

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

這會輸出與我們前一个例子相同的結果：

name: Harry
age: 17
house: Gryffindor

現在，讓我們將所有這些方法整理到一個方便參考的表格中：

方法	描述	示例
直接訪問	直接訪問屬性	console.log(wizard.name)
JSON.stringify()	將物件轉換為 JSON 字符串	console.log(JSON.stringify(wizard))
Object.entries()	將物件轉換為鍵值對數組	console.log(Object.entries(wizard))
for...in 循環	遍歷物件屬性	for (let prop in wizard) { console.log(prop) }

記住，年輕的巫師們，熟練才能達到完美！嘗試在不同的物件上使用這些方法，看看它們的行為。在你還未意識到的時候，你將會像真正的 JavaScript 巫師一樣顯示物件！

在我們結束這堂課之前，我想起了一個課堂上的有趣事件。有一次，一個學生不小心把 console.log(lizard) 打成了 console.log(wizard)，然後我們花了10分鐘來除錯，想知道為什麼我們的代碼裡突然出現了一隻爬行動物！記住，在編程時要仔細檢查你的拼寫——這可以讓你免於遇到一些真正的神奇錯誤！

這就是今天有關在 JavaScript 中顯示物件的所有內容。持續練習，保持好奇心，最重要的是，享受你的編程冒險。直到下一次見面，願你的代碼沒有錯誤，你的物件總是能夠美麗地顯示！

Credits: Image by storyset