Javascript 简明教程

JavaScript - Display Objects

Displaying Objects in JavaScript

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

There are different ways to display objects in JavaScript. Using the console.log() method, we can display the object in the web console. Sometimes developers require to display the object properties and their value in the HTML or for debugging the code.

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

For displaying an object, we can access the different properties and display them. We can also convert the object to a JSON string and display it as a string.

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

When you print the object like other variables in the output, it prints the '[object Object]' as shown in the example below.

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

In the example below, we have created a fruit object and printed it in the output. You can observe that it prints the [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]

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

To overcome the above problem, you need to use specific approaches to display the object.

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

Some approaches to display the JavaScript objects are as follows −

  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 表示法来显示属性值。

In the object properties chapter, you learned different ways to access the values of the object properties. You can use the dot notation or square bracket notation to display the property values.

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

This way, you may get all property values and display them in the output.

Syntax

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

Users can follow the syntax below to display the object by accessing properties.

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

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

In the above syntax, we access the property using the obj object’s dot and square bracket notation.

Example

在下面的示例中，我们使用点表示法访问对象的 'name' 属性，并使用方括号表示法访问 'price' 属性。

In the example below, we have accessed the 'name' property of the object using the dot notation and the 'price' property using the square bracket notation.

<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() 方法。它将对象转换为字符串。

When object contains the dynamic properties or you don’t know object properties, you can’t print properties and values using the first approach. So, you need to use the JSON.stringify() method. It converts the object into a string.

Syntax

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

Follow the syntax below to use the JSON.stringify() method to display the object.

JSON.stringify(obj);

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

You need to pass the object as a parameter of the JSON.stringify() method.

Example

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

In the example below, we have converted the fruit string into the JSON string and displayed in the output.

<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类的一个静态方法，它允许您从二维数组中提取属性和值。之后，您可以使用循环来遍历该数组并单独显示每个属性和值对。

The Object.entries() is a static method of the Object class, allowing you to extract the properties and values in the 2D array. After that, you can use the loop to traverse the array and display each property and value pair individually.

Syntax

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

Follow the syntax below to use the Object.entries() method.

Object.entries(obj);

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

The Object.entries() method takes the object as a parameter and returns the 2D array, where each 1D array contains the key-value pair.

Example

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

In the example below, the numbers object contains the 4 properties. We used the Object.entries() method to get all entries of the object.

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

After that, we used the for loop to traverse the object entries and display them.

<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循环用于遍历可迭代对象，而对象就是其中之一。

The for…​in loop is used to traverse the iterable, and the object is one of them.

Syntax

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

Users can follow the syntax below to use the for…​in loop to traverse the object and display it in the output.

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

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

In the above syntax, obj is an object to display. In the loop body, you can access the value related to the key and print the key-value pair.

Example

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

In the example below, we used the for…​in loop to traverse each key of the object and print them in the output.

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

The best way to display the object is using the JSON.stringify() method. It converts the object into a flat string. Other approaches can’t be used to display the nested objects, but JSON.stringify() method can be used.