嵌套的对象数组在控制台日志输出 JS 中显示为对象

当我们在 JavaScript 中使用对象数组时，经常会遇到嵌套的对象数组。嵌套的对象数组是一组包含另一个对象数组的对象数组。在控制台中输出这种对象数组可以成为一个挑战，因为嵌套的数据结构可能会变得非常复杂。本文将介绍如何在控制台中输出嵌套的对象数组，并以代码片段的形式提供一些示例。

输出嵌套的对象数组

当我们尝试将一个对象数组输出到控制台时，控制台会将其作为一个普通的数组展示。如果数组元素是一个对象，控制台将打印出该对象的 toString() 方法的返回值。但是，嵌套的对象数组可能会包含更复杂的数据结构，并且我们需要将它们在控制台中呈现为一个可点击的对象。为了实现这一点，我们可以使用 console.table() 方法。

const nestedArr = [{ name: "Alice", scores: [80, 85, 90] }, { name: "Bob", scores: [90, 95, 100] }];
console.table(nestedArr);

上面的代码将打印出类似于下面的表格：

| (index) | name | scores | | ------- | ----- | ---------------- | | 0 | Alice | [80, 85, 90] | | 1 | Bob | [90, 95, 100] |

在上面的示例中，我们在控制台中输出了一个嵌套的对象数组，并使用 console.table() 方法将其转换为可点击的表格。这个方法不仅可以使输出变得更具可读性，而且可以让我们更轻松地浏览和理解复杂的数据结构。

示例

以下是一个更加复杂的对象数组示例，其中包含多级嵌套。

const data = [
  {
    name: "Alice",
    age: 25,
    scores: [
      { subject: "Maths", marks: [80, 85, 90] },
      { subject: "English", marks: [75, 80, 85] },
      { subject: "Science", marks: [85, 90, 95] },
    ],
  },
  {
    name: "Bob",
    age: 30,
    scores: [
      { subject: "Maths", marks: [90, 95, 100] },
      { subject: "English", marks: [80, 85, 90] },
      { subject: "Science", marks: [75, 80, 85] },
    ],
  },
];
console.table(data);

这将在控制台中打印出如下表格：

| (index) | name | age | scores | | ------- | ------ | ---- | ------------------------------------------------------------- | | 0 | Alice | 25 | [{…}, {…}, {…}] | | 1 | Bob | 30 | [{…}, {…}, {…}] | | | | | | | [(index)] | subject | marks | | 0 | Maths | [80, 85, 90] | | 1 | English | [75, 80, 85] | | 2 | Science | [85, 90, 95] | | 3 | Maths | [90, 95, 100] | | 4 | English | [80, 85, 90] | | 5 | Science | [75, 80, 85] |

可以看出，控制台将表格中的每个元素作为一个对象进行处理，以实现更加清晰的显示效果。

结论

从上面的例子中，我们可以看到使用console.table()方法能够很好地打印出嵌套的对象数组，并且打印结果是可点击的表格形式，便于更好阅读和理解。