JavaScript 中 console.table() 的威力💪🏻😎

2025-06-07

JavaScript 中 console.table() 的威力💪🏻😎

**调试是所有开发人员工具箱中都应该具备的技能🧰**

毫无疑问，console.log()这是一种超级实用、快速且简单的调试方法。我们很多人可能都会使用 console.log() 来调试 JavaScript 代码，这本身并没有什么问题。许多开发人员也用它来调试代码。但今天，我要分享一个技巧，帮助你更高效地调试 JavaScript 代码。

***控制台.表格（）***

那么，console.table()🤯❓ 是什么？

console.table()允许您以表格形式将数组和对象打印到控制台。表格形式的数据表示非常有效，这意味着您可以更深入地了解数据，并更快地调试代码。您还可以快速对列进行排序。

语法🤓



console.table(data,columns); 
//or
console.table(data);
Enter fullscreen mode Exit fullscreen mode

• 数据：用于填充表格的数据。它必须是数组或对象。
• 列：包含要包含在表格中的列名称的数组。

如何实现 console.table()🤔❓

console.table可以通过以下方式实现：

a.) 数组

如果数据参数的值是一个数组，那么索引列将增加一，起始值为 0。




var fruits=["apple","mango","grapes"];

console.table(fruits);
Enter fullscreen mode Exit fullscreen mode




输出🤩:-

截图(402).png
如果要对列进行排序，请单击该列的标题。

b.) 数组的数组

当我们打印一个数组的数组时，列名将以与索引列值相同的方式递增。




var teams=[["John","Jari"],["Claus","Andrew"],["Marti","Martha"]];

console.table(teams);
Enter fullscreen mode Exit fullscreen mode




输出🤩:-

截图(403).png

c.) 对象

如果数据参数的值是一个对象，那么索引列代表键，值列代表与该特定键相对应的值。




var user={

     name:"neha",

     age:20,

     gender:"female",

}

console.table(user);
Enter fullscreen mode Exit fullscreen mode




输出🤩:-

屏幕截图(404).png

d.) 对象数组

如果数据参数的值是一个对象数组，那么它们的属性将在行中枚举，每列一个。




var users = [

    {

        name: "john",

        age: 40

    },

    {

        name: "amit",

        age: 35

    },

    {

        name: "neha",

        age: 20

    }

];

console.table(users);
Enter fullscreen mode Exit fullscreen mode




输出🤩:-

截图(412).png

嵌套对象

如果 data 参数的值是嵌套对象，即其属性本身也是对象的对象。在这种情况下，console.table() 方法会使用嵌套对象的属性来标记索引。




var employees = {

    leader: {

        firstname: "Andrew",

        lastname: "Story",

        email: "andrew@gmail.com"

    },

    manager: {

        firstname: "Amit",

        lastname: "Bhatt",

        email: "amit@gmail.com"

    },

    developer: {

        firstname: "Param",

        lastname: "Dutta",

        email: "param@gmail.com"

    }

}

console.table(employees);
Enter fullscreen mode Exit fullscreen mode




输出🤩:-

截图(406).png

如果你有一个具有 10 多个属性的对象怎么办？

显然，如果你有一个包含大量属性的大型对象，这个表可能会变得非常庞大，数据读取起来也会非常困难。
不过幸运的是，console.table我们可以传递一个可选的第二个参数，指定我们需要的列，并只打印这些列。

让我们看一个例子来了解具体含义：




var employees = {

    leader: {

        id:"10001",

        firstname: "Andrew",

        lastname: "Story",

        email: "andrew@gmail.com"

    },

    manager: {


        id:"10002",

        firstname: "Amit",

        lastname: "Bhatt",

        email: "amit@gmail.com"

    },

    developer: {

        id:"10003",

        firstname: "Param",

        lastname: "Dutta",

        email: "param@gmail.com"

    }

}

console.table(employees,["id","firstname"]);
Enter fullscreen mode Exit fullscreen mode




输出🤩

截图(407).png

如果只需要一列，可以这样做：




console.table(employees,"id");
Enter fullscreen mode Exit fullscreen mode




输出🤩

截图(408).png

这篇博文就到这里。如果你喜欢学习并且觉得它有用，请点赞分享，这样它也能被更多人看到🤝

感谢阅读😃

我愿意❤通过Twitter | LinkedIn | GitHub与您联系

您一定要看看我的其他博客：

下篇博客文章再见，保重！！

学习愉快😃😃
!important;width: 217px !important;" >

文章来源：https://dev.to/nehasoni__/power-of-console-table-in-javascript-18n0
Devto 翻译
PREV
如何将 React 或 Vue 与 Vite 和 Docker 结合使用
NEXT
理解 Javascript 数组系列 II - 创建数组的替代方法。