JavaScript - display（显示）对象

JavaScript display（显示）对象

在 JavaScript 中有多种 display 对象的方法。使用 console.log（） 方法，我们可以在 Web 控制台中 display 对象。有时，开发人员需要在 HTML 中显示对象属性及其值，或者用于调试代码。

为了 display 对象，我们可以访问不同的属性并显示它们。我们还可以将对象转换为 JSON 字符串并将其显示为字符串。

当您像输出中的其他变量一样打印对象时，它会打印 '[object Object]'，如以下示例所示。

在下面的示例中，我们创建了一个 fruit 对象并将其打印在输出中。你可以观察到它打印 [object Object].


<html>
<body>
	 <p id = "output">The object is: </p>
	 <script>
	 	 const fruit = {
	 	 	 name: "Banana",
	 	 	 price: 100,
	 	 }
	 	 document.getElementById("output").innerHTML += fruit;
	 </script>
</body>
</html>

输出

The object is: [object Object]

要克服上述问题，您需要使用特定的方法来 display 对象。

JavaScript display 对象的一些方法如下 -

访问对象属性
使用 JSON.stringify（）方法
使用 Object.entries（）方法
使用 for...in 循环

访问对象属性

在对象属性一章中，您学习了访问对象属性值的不同方法。您可以使用点表示法或方括号表示法来显示属性值。

这样，您可以获取所有属性值并将其显示在输出中。

语法

用户可以按照以下语法通过访问属性来 display 对象。


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 =	
	 	 "The price of the " + fruitName + " is: " + fruitPrice;
	 </script>
</body>
</html>

输出

The price of the Banana is: 100

使用 JSON.stringify（）方法

当 object 包含动态属性或您不知道 object 属性时，不能使用第一种方法打印属性和值。因此，您需要使用 JSON.stringify（） 方法。它将对象转换为字符串。

语法

按照下面的语法使用 JSON.stringify（）方法 display 对象。


 JSON.stringify(obj);

您需要将对象作为 JSON.stringify（）方法的参数传递。

例

在下面的示例中，我们已将 fruit 字符串转换为 JSON 字符串并显示在输出中。


<html>
<body>
	 <p id = "output">The fruit object is </p>
	 <script>
	 	 const fruit = {
	 	 	 name: "Banana",
	 	 	 price: 100,
	 	 }
	 	 document.getElementById("output").innerHTML += JSON.stringify(fruit);
	 </script>
</body>
</html>

输出

The fruit object is {"name":"Banana","price":100}

使用 Object.enteries（）方法

Object.entries（）是 Object 类的 Static（静态）方法，允许您提取 2D 数组中的属性和值。之后，您可以使用循环遍历数组并单独显示每个属性和值对。

语法

按照下面的语法使用 Object.entries（）方法。


 Object.entries(obj);

Object.entries（）方法将对象作为参数并返回 2D 数组，其中每个 1D 数组都包含键值对。

例

在下面的示例中，numbers 对象包含 4 个属性。我们使用 Object.entries（） 方法来获取对象的所有条目。

之后，我们使用 for 循环遍历对象条目并显示它们。


<html>
<body>
	 <p> Displaying the object entries</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>

输出

Displaying the object entries

num1: 10
num2: 20
num3: 30
num4: 40

使用 for...in 循环

for...in 循环用于遍历可迭代对象，对象就是其中之一。

语法

用户可以按照以下语法使用 for...in 循环遍历对象并将其显示在输出中。


for (key in obj) {
	// Use the key to access the value
}

在上面的语法中，obj 是一个要显示的对象。在循环体中，您可以访问与键相关的值并打印键值对。

例

在下面的示例中，我们使用了 for...in 循环遍历对象的每个键，并在输出中打印它们。


<html>
<body>
	 <p> Displaying Object Entries using for...in loop:</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>

输出

Displaying Object Entries using for...in loop:

language1: JavaScript
language2: Python
language3: Java
language4: HTML

display 对象的最佳方式是使用 JSON.stringify（） 方法。它将对象转换为平面字符串。其他方法不能用于显示嵌套对象，但可以使用 JSON.stringify（）方法。

本页

JavaScript - display（显示）对象