Console.table你可能不知道的Chrome JavaScript调试控制台的属性

Console.table在控制台中显示一个包含对象或数组信息的表。表中的第一列将被标记为(索引)。如果数据是数组, 则其值将是数组索引。如果数据是对象, 则其值将是属性名称, 然后将分别呈现所有属性。

对于表格数据, Console.table的工作效果最佳(不必说)。如果所有对象和数组都具有不规则结构, 则最终将导致大多数单元格包含空值, 并且仅列出几个属性。在大多数情况下, 此功能可以使你更好地了解数据。

数组

var films = [
  {name:"Batman vs Superman", value:"20$"},   {name:"Ted 2", value:"15$"}, {name:"500 Days of summer", value:"5$"},   {name:"Batman : The Dark Knight", value:"20$"}
];

console.table(films);

你的控制台应输出：

不错不是吗？

对象

var mostViewedFilmsInWorldWideCinemas = {
  china: {name:"Batman vs Superman", revenues:"225M$"}, usa: {name:"Batman vs Superman", revenues:"220M$"},   brazil:{name:"Batman vs Superman", revenues:80000000},   colombia:{name:"Batman vs Superman", revenues:"92M$"},   spain:{name:"Batman vs Superman", revenues: undefined},   disneyLand:{name:"Bambi"}, };

console.table(mostViewedFilmsInWorldWideCinemas);

你的控制台输出应如下所示：

从显示中排除数据

要从对象中排除特定字段, console.table方法需要一个数组作为第二个参数, 并带有应显示的属性名称：

var mostViewedFilmsInWorldWideCinemas = {
  china: {name:"Batman vs Superman", revenues:"225M$"}, usa: {name:"Batman vs Superman", revenues:"220M$"},   brazil:{name:"Batman vs Superman", revenues:80000000},   colombia:{name:"Batman vs Superman", revenues:"92M$"},   spain:{name:"Batman vs Superman", revenues: undefined},   disneyLand:{name:"Bambi"}, };

// Show me only the names
console.table(mostViewedFilmsInWorldWideCinemas, ["name"]);

输出应如下所示：

你可以通过单击特定列的标签对表进行排序。你不会突然使用console.table来记录所需的所有数据, 数据必须非常明确并完成一个有组织的结构, 但是不要担心在控制台中弄乱此功能, 继续进行测试！