JavaScript - 显示对象

在 JavaScript 中显示对象

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

为了显示对象，我们可以访问不同的属性并显示它们。我们还可以将对象转换为 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]

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

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

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

访问对象属性

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

通过这种方式，您可以获取所有属性值并在输出中显示它们。

语法

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

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() 方法

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

语法

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

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.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) {
 // Use the key to access the value
}

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

示例

在下面的示例中，我们使用 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() 方法可以。

打印页面