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中显示对象的课程就到这里。继续练习，保持好奇心，最重要的是，享受你的编码冒险。下次见，愿你的代码无bug，你的对象总是显示得美美哒！

Credits: Image by storyset