console.table是浏览器开发者工具中用于以交互表格形式输出数组或对象的命令,支持指定字段、排序及悬停查看,但不支持嵌套对象和node.js环境。

console.table 是浏览器开发者工具中一个非常实用的命令,能将数组或对象以清晰、可交互的表格形式输出到控制台,特别适合查看结构化的 JSON 数据(比如 API 返回的用户列表、商品信息等)。
基础用法:直接打印数组或对象
只要传入一个数组(元素为对象)或一个键值对明确的对象,console.table 就会自动提取属性名作为列头,每项数据作为一行:
使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- ✅ 支持数组:每个元素必须是对象(如
[{name: "张三", age: 25}, {name: "李四", age: 30}]) - ✅ 支持普通对象:会把对象的 key 当作列,value 当作行(仅单层,适合扁平结构)
- ❌ 不支持嵌套过深的对象(如
{user: {profile: {name: "Alice"}}}),默认只显示第一层属性
精准控制列:传入第二个参数指定要显示的字段
当 JSON 数据字段很多,但只想聚焦几个关键字段时,可以传入一个字符串数组作为第二个参数:
-
console.table(data, ["id", "title", "status"])—— 表格只显示这三列 - 字段名必须和对象中的 key 完全一致(区分大小写)
- 如果某个对象缺少该字段,对应单元格显示
undefined
处理嵌套数据:先扁平化再打印
遇到 {user: {name: "Tom", email: "t@ex.com"}, order: {id: 1001}} 这类嵌套结构,console.table 默认不展开。解决办法是预先映射成扁平对象:
console.table(data.map(item => ({...item.user, ...item.order})))- 也可用解构 + 重命名:
{user: {name, email}, order: {id: orderId}}构造新对象 - 注意避免字段名冲突(如 user.id 和 order.id),建议显式重命名
小技巧与注意事项
- 点击表头可按该列排序(升/降序切换)
- 鼠标悬停在单元格上会显示完整值(对长字符串或深层对象很友好)
- 在 Chrome / Edge / Firefox 中原生支持;Safari 支持较晚(需 macOS Monterey / iOS 15+)
- 不适用于 Node.js 环境(Node 原生不支持 console.table,可用第三方库如
console-table-printer替代)










