如何在 JavaScript 中打印对象数组?

javascriptweb developmentfront end technology

在本教程中，我们将学习如何在 JavaScript 中打印对象数组。

什么是对象数组或对象数组?对象数组用于存储相同元素的固定大小顺序集合，并在一个变量中存储多个值。

接下来，我们将看到在 JavaScript 中打印对象数组的选项。

使用 JSON 对象的 stringify() 方法

在这里，我们将学习如何对对象数组进行字符串化。为了正确显示对象数组，我们需要将数组格式化为 JSON 字符串。JSON.stringify() 格式化数组并给出正确的打印。我们可以使用 <pre>标签来显示输出。

用户可以按照以下语法来使用它。

语法

JSON.stringify(v,r,s)

在上面的语法中，最后两个参数是可选的。

参数

v − 这是对象数组。
r − 这是替换器。它可以通过改变或消除值来更改输出。如果 r 值为空或未指定，该方法将打印所有值。可以使用函数或数组作为替换器。
s − 这是输出显示的间距值。它是为了便于阅读。此参数的可能值包括 Nothing、null、string 或 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>