Javascript 简明教程

JavaScript - Display Objects

Displaying Objects in 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 对象的一些方法如下：

  1. Accessing the object properties

  2. Using the JSON.stringify() method

  3. Using the Object.entries() method

  4. Using the for…​in loop

Accessing the Object Properties

在对象属性章节中，您学习了访问对象属性值的不同方法。您可以使用 dot notation 或 square bracket 表示法来显示属性值。

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

Syntax

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

obj.property;
OR
obj["property"];

在上述语法中，我们使用 obj 对象的点和方括号表示法访问属性。

Example

在下面的示例中，我们使用点表示法访问对象的 '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

Using the JSON.stringify() Method

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

Syntax

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

JSON.stringify(obj);

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

Example

在下面的示例中，我们将水果字符串转换为 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}

Using the Object.enteries() Method

Object.entries()是Object类的一个静态方法，它允许您从二维数组中提取属性和值。之后，您可以使用循环来遍历该数组并单独显示每个属性和值对。

Syntax

按照下面的语法使用Object.entries()方法。

Object.entries(obj);

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

Example

在下面的示例中，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

Using the for…​in Loop

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

Syntax

用户可以按照下面的语法使用for…​in循环来遍历对象并在输出中显示它。

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

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

Example

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