有多种方法可以在 JavaScript 中显示对象。使用 console.log() 方法，我们可以在 Web 控制台中显示对象。有时开发者需要在 HTML 中显示对象属性及其值，或者调试代码。
为了显示一个对象，我们可以访问不同的属性并将它们显示出来。我们也可以将对象转换为 JSON 字符串，并将其作为一个字符串显示。
当你像其他变量一样打印对象时，默认情况下会打印 [object Object]，如下面的例子所示。
在下面的例子中，我们创建了一个 fruit 对象并在输出中打印了它。可以看到它打印出了 [object Object]。
<html>
<body>
<p id="output">对象是: </p>
<script>
const fruit = {
name: "Banana",
price: 100,
}
document.getElementById("output").innerHTML += fruit;
</script>
</body>
</html>
输出：
对象是: [object Object]
为了克服上述问题，你需要使用特定的方法来显示对象。
以下是一些显示 JavaScript 对象的方法：
访问对象属性
在对象属性章节中，你学到了访问对象属性值的不同方法。你可以使用点符号或方括号符号来显示属性值。
通过这种方式，你可以获取所有属性值并在输出中显示它们。
语法
用户可以遵循以下语法通过访问属性来显示对象：
obj.property;
OR
obj["property"];
在上述语法中，我们使用 obj 对象的点符号和方括号符号来访问属性。
示例
在下面的例子中，我们使用点符号访问了对象的 name 属性，并使用方括号符号访问了 price 属性。
<html>
<body>
<p id="output"> </p>
<script>
const fruit = {
name: "Banana",
price: 100,
}
const fruitName = fruit.name;
const fruitPrice = fruit["price"];
document.getElementById("output").innerHTML =
"香蕉的价格是: " + fruitPrice;
</script>
</body>
</html>
输出：
香蕉的价格是: 100
使用 JSON.stringify() 方法
当对象包含动态属性或你不知道对象属性时，无法使用第一种方法打印属性和值。因此，你需要使用 JSON.stringify() 方法。它将对象转换为字符串。
语法
遵循以下语法使用 JSON.stringify() 方法来显示对象：
JSON.stringify(obj);
你需要将对象作为 JSON.stringify() 方法的参数。
示例
在下面的例子中，我们将 fruit 对象转换为 JSON 字符串并在输出中显示。
<html>
<body>
<p id="output">水果对象是 </p>
<script>
const fruit = {
name: "Banana",
price: 100,
}
document.getElementById("output").innerHTML += JSON.stringify(fruit);
</script>
</body>
</html>
输出：
水果对象是 {"name":"Banana","price":100}
使用 Object.entries() 方法
Object.entries() 是 Object 类的一个静态方法，允许你提取属性和值到二维数组中。之后，你可以使用循环遍历数组并单独显示每个属性和值对。
语法
遵循以下语法使用 Object.entries() 方法：
Object.entries(obj);
Object.entries() 方法接受一个对象作为参数，并返回一个二维数组，其中每个一维数组包含一个键值对。
示例
在下面的例子中，numbers 对象包含四个属性。我们使用 Object.entries() 方法获取对象的所有条目。
之后，我们使用 for 循环遍历对象条目并显示它们。
<html>
<body>
<p> 显示对象条目 </p>
<p id="output"> </p>
<script>
const numbers = {
num1: 10,
num2: 20,
num3: 30,
num4: 40,
}
for (const [key, value] of Object.entries(numbers)) {
document.getElementById("output").innerHTML += key + ": " + value + " <br>";
}
</script>
</body>
</html>
输出：
显示对象条目
num1: 10
num2: 20
num3: 30
num4: 40
使用 for...in 循环
for...in 循环用于遍历可迭代对象，对象就是其中之一。
语法
用户可以遵循以下语法使用 for...in 循环遍历对象并在输出中显示它：
for (key in obj) {
}
在上述语法中，obj 是要显示的对象。在循环体中，你可以访问与 key 相关的值并打印键值对。
示例
在下面的例子中，我们使用 for...in 循环遍历对象的每个键并在输出中打印它们。
<html>
<body>
<p> 使用 for...in 循环显示对象条目: </p>
<p id="output"> </p>
<script>
const languages = {
language1: "JavaScript",
language2: "Python",
language3: "Java",
language4: "HTML",
}
for (const key in languages) {
document.getElementById("output").innerHTML +=
key + ": " + languages[key] + " <br>";
}
</script>
</body>
</html>
输出：
使用 for...in 循环显示对象条目:
language1: JavaScript
language2: Python
language3: Java
language4: HTML
显示对象的最佳方法是使用 JSON.stringify() 方法。它将对象转换为扁平字符串。其他方法无法用于显示嵌套对象，但 JSON.stringify() 方法可以。