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

列印頁面