如何利用 console.table 在控制台以表格形式直观展示复杂的 JSON 数组数据

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

console.table 是浏览器开发者工具中一个非常实用的命令，能将数组或对象以清晰、可交互的表格形式输出到控制台，特别适合查看结构化的 JSON 数据（比如 API 返回的用户列表、商品信息等）。

基础用法：直接打印数组或对象

只要传入一个数组（元素为对象）或一个键值对明确的对象，console.table 就会自动提取属性名作为列头，每项数据作为一行：

• ✅ 支持数组：每个元素必须是对象（如 [{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: "[email protected]"}, 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 替代）