HTML | DOM console.table() 方法(1)

📌 相关文章

📜 HTML | DOM console.table() 方法(1)

📅 最后修改于: 2023-12-03 15:15:34.961000 🧑 作者: Mango

HTML | DOM console.table() 方法

简介

console.table() 方法是浏览器开发工具内置的一个调试工具，它可以将一个类数组对象或数组对象以表格的形式输出到控制台。这在开发过程中可以方便地查看对象的属性和值，帮助程序员快速定位问题所在。

语法

console.table(object);

参数

object：必需，要显示的对象

返回值

该方法没有返回值。

示例

以下示例将一个数组对象输出到控制台：

const cars = [
  { make: "Honda", model: "Accord", year: 2020 },
  { make: "Toyota", model: "Camry", year: 2018 },
  { make: "Ford", model: "F-150", year: 2021 }
];

console.table(cars);

输出结果如下：

| (index) | make | model | year | | ------- | ------ | ------ | ---- | | 0 | Honda | Accord | 2020 | | 1 | Toyota | Camry | 2018 | | 2 | Ford | F-150 | 2021 |

使用console.table()方法输出DOM元素

该方法还可以输出DOM元素的属性和值。例如，以下示例将输出<body>元素的所有属性和值：

console.table(document.body);

输出结果如下：

| 属性 | 值 | | ------------------------------ | ------------------------- | | accessKey | | | align | | | background | | | ... | clientLeft | 0 | | clientTop | 0 | | ... | offsetWidth | 1280 | | offsetHeight | 1790 |

注意，该方法只能输出DOM元素的属性和值，但不能输出DOM元素的子元素。

总结

console.table() 方法可以方便地输出对象和数组对象的属性和值，并将它们以表格的形式排序。它是一种非常有用的调试工具，在开发过程中可以帮助程序员快速定位问题。