如何在 JavaScript 中列印物件陣列？

在本教程中，我們將學習如何在 JavaScript 中列印物件陣列。

什麼是物件陣列或物件陣列？物件陣列用於儲存固定大小的相同元素的順序集合，並在一個變數中儲存多個值。

接下來，我們將瞭解在 JavaScript 中列印物件陣列的選項。

使用 JSON 物件的 stringify() 方法

在這裡，我們將學習如何將物件陣列轉換為字串。為了正確顯示物件陣列，我們需要將其格式化為 JSON 字串。JSON.stringify() 格式化陣列並給出正確的列印結果。我們可以使用 

 標籤來顯示輸出。


使用者可以按照以下語法使用它。


語法


JSON.stringify(v,r,s)



在上面的語法中，最後兩個引數是可選的。


引數


    

  • v - 這是物件陣列。
    • 

  • r - 這是替換器。它可以透過更改或消除值來更改輸出。如果 r 值為 null 或未指定，則該方法將列印所有值。替換器用作函式或陣列。
    • 

  • s - 這是輸出顯示的空格值。它用於可讀性。無、null、字串或 1-10 是此引數的可能值。如果值小於 1，則 JSON 列印將沒有空格。如果值大於 10，則僅取 10 進行縮排。如果值為字串，則考慮字串或字串的前十個字元進行空格。
    • 



示例


在此程式碼中，我們正在獲取一個物件陣列。JSON.stringify() 直接使用此值呼叫。這裡，縮排為 1。給出了一個條件，用於僅從 JSON 物件中顯示 name 鍵。這是第二個引數。


<html>
<body>
   <pre id = "idPrint"> </pre>
   <script>
      let arr = [{name: "Orange", value: 1}, {name: "Grapes", value: 2},
      {name: "Apple", value: 3}];
      document.getElementById("idPrint").innerHTML = JSON.stringify(arr,
      null, 4);
   </script>
</body>
</html>



使用 console.table() 方法


在這裡，我們將學習 console.table() 方法是如何工作的。此方法嚴格需要一個輸入。輸入是陣列或物件。該方法還處理陣列和物件的巢狀情況。第二個引數是列，它是可選的。


可列舉屬性或輸入中的每個元素都顯示為表的行。表的首列是陣列索引。在 Firefox 中，1000 行是完整顯示。該方法允許使用者透過單擊標籤對每個表格列進行排序。


所有使用標準控制檯的瀏覽器都支援此方法，而 Internet Explorer 不支援。


使用者可以按照以下語法使用它。


語法


console.table(d, c)



在上面的語法中，我們需要將物件陣列作為第一個輸入。


引數


    

  • d - 物件陣列。
    • 

  • c - 在這裡，我們需要指定物件的鍵名。僅指定鍵的鍵值對將顯示在輸出中。
    • 



示例


在這個示例程式中，我們使用新方法建立了一個物件陣列。此資料作為第一個引數傳遞給 console.table() 方法。


這裡，輸入中有三個物件。但我們限制了僅以表格格式顯示兩個物件。所需物件的鍵名作為第二個引數給出。console.log() 方法以程式標題作為第一個引數，CSS 值作為後續引數，在以下輸出中顯示樣式化的標題。


使用者需要開啟控制檯才能檢視以下示例的輸出。


<html>
<body>
   <p> Please open Console and rerun the program to check the output</p>
   <pre id="idCons"> </pre>
   <script>
      // An array of objects
      function infoDisp(id, name, job) {
         this.Id = id;
         this.Name = name;
         this.Work = job;
      }
      const a = new infoDisp(1, "John", "Doctor");
      const b = new infoDisp(2, "Grace", "Homemaker");
      const c = new infoDisp(3, "Eagan", "Not working");
      //print
      console.log('%cThe JavaScript program prints an array of objects
      using %cconsole.table() method', 'font-weight: bold; font-size:
      16px;color: #000000;', 'font-weight: bold; font-style: italic; font-size:
      16px;color: #000000;');
      console.table([a, b, c], ["Name", "Work"]);
   </script>
</body>
</html>



當您開啟控制檯並重新執行上述程式時，您將看到如下截圖所示的輸出。




本教程幫助我們瞭解了列印物件陣列的兩種方法。我們通常使用 console.dir() 來驗證物件陣列。要將物件陣列顯示在頁面上，請使用 JSON.stringify()。


如果我們需要物件陣列的表格格式，可以使用控制檯。table() 方法。唯一的缺點是某些控制檯不支援此方法。某些控制檯按升序顯示列名。也就是說，實際的物件鍵順序丟失了。


簡而言之，這兩種方法都很簡單。使用者可以選擇根據其列印需求選擇任何方法。





	
	

        

         
更新於：2022-09-15

         

            

             
            

            

               
 20K+ 瀏覽量

            

         

      





	





   
開啟您的 職業生涯

   
透過完成課程獲得認證

   開始學習
   

   





   
   

        







   

      

         
廣告