JavaScript - 显示对象

在 JavaScript 中显示对象

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

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

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

在下面的示例中，我们创建了一个水果对象并将其打印在输出中。您可以观察到它打印的是 [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]

为了解决上述问题，您需要使用特定的方法来显示对象。

显示 JavaScript 对象的一些方法如下 -

• 访问对象属性

• 使用 JSON.stringify() 方法

• 使用 Object.entries() 方法

• 使用 for...in 循环

访问对象属性

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

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

语法

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

obj.property;
或
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() 方法

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

语法

请按照以下语法使用 JSON.stringify() 方法显示对象。

JSON.stringify(obj);

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

示例

在下面的示例中，我们将水果字符串转换为 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.entries() 方法

Object.entries() 是 Object 类的一个静态方法，用于提取二维数组中的属性和值。提取完成后，您可以使用循环遍历数组并分别显示每个属性和值对。

语法

请按照以下语法使用 Object.entries() 方法。

Object.entries(obj);

Object.entries() 方法以对象为参数，返回二维数组，其中每个一维数组包含键值对。

示例

在下面的示例中，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) {
    // 使用键访问值
}

在上述语法中，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

显示对象的最佳方式是使用 JSON.stringify() 方法。该方法会将对象转换为扁平字符串。其他方法无法显示嵌套对象，但可以使用 JSON.stringify() 方法。