Console.table()

将数据以表格的形式显示

这个方法接收一个强制的参数,它必须是一个数组或者是一个对象,还可以接受一个额外的参数描述表格的列数。

它把数据以table的形式打印出来, 在数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在table中。

table的第一列是index。如果数据是一个数组,那么值就是索引。 如果数据是一个对象,那么它的值就是属性名称。 注意(在FireFox中)console.table 被限制了不能显示超过1000行(第一行用来标记索引)。

Note: 此特性在 Web Worker 中可用。

打印单一参数类型

数据的参数类型可以是数组或是对象.

// 打印一个由字符串组成的数组
console.table(["apples", "oranges", "bananas"]);

// 打印一个属性值是字符串的对象
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
var me = new Person("John", "Smith");
console.table(me);

打印复合的参数类型

如果需要打印的元素在一个数组中,或者需要打印的属性在一个对象, 并且他们本身就是一个数组或者对象,则将会把这个元素显示在同一行, 每个元素占一列:

// 二元数组的打印
var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);

Table displaying array of arrays

// 打印一个包含对象的数组
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
console.table([john, jane, emily]);

Note that if the array contains objects, then the columns are labeled with the property name.

结果显示,如果数组中包含该对象,打印出来的列标签将是该对象的属性名

Table displaying array of objects

// 打印属性名是对象的对象
var family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);

Table displaying object of objects

控制每列元素是否显示

console.table()会把所有元素罗列在每一列,你可以使用每一列的元素名作为第二个参数去选择你所需要的列的内容去显示

// an array of objects, logging only firstName
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
console.table([john, jane, emily], ["firstName"]);

Table displaying array of objects with filtered output

列的重新排序

你可以通过点击每列的顶部标签来得到每一个列里面的重排元素

语法

console.table(data [, columns]);

参数

数据
要显示的数据必须是数组或者是对象.
列元素
一个数组需要包含列的名称进行输出否则显示为索引.

格式

Specification Status Comment
Console API
console.table()
Living Standard Initial definition

浏览器兼容

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 34.0 (34.0) 未实现 (Yes) (Yes)
Available in workers (Yes) (Yes) 38.0 (38.0) ? (Yes) ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) 34.0 (34.0) ? ? ?
Available in workers ? (Yes) 38.0 (38.0) ? ? ?

文档标签和贡献者