当前位置：首页 > 文章列表 > 文章 > 前端 > 如何用控制台的 console.table 直观展示复杂的对象数组

如何用控制台的 console.table 直观展示复杂的对象数组

2026-05-05 15:36:43 0浏览收藏

一分耕耘，一分收获！既然都打开这篇《如何用控制台的 console.table 直观展示复杂的对象数组》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

console.table是开发者工具的快捷预览功能，仅显示前100行、不支持深层嵌套；需用map扁平化嵌套字段，传入数组指定列名可过滤/排序属性，但无法处理循环引用或大数据量。

console.table 能直接打印对象数组，但默认只显示前 100 行且不支持深层嵌套

它不是万能表格渲染器，本质是开发者工具的快捷预览功能。对 console.table(data)，Chrome/Firefox 会尝试提取每个对象的自有属性名作为列头，按顺序展示值；但如果某个对象里有 undefined、null 或函数，对应单元格会显示为空白或 ƒ，容易误判数据缺失。

只遍历对象自身属性，Object.prototype 上的属性不会出现
遇到嵌套对象（如 {user: {name: 'a', id: 1}}），默认只显示 [object Object]，不展开
数组长度超过 100 项时，后续行被截断，控制台右上角会提示“… and N more rows”
如果所有对象属性名不一致（比如有的有 id，有的只有 uid），列会变稀疏，空列多

用数组指定 columns 参数，强制对齐关键字段并过滤无关属性

第二个参数传入字符串数组，就能限定只显示哪些键，还能调整顺序。这对 API 返回结构松散、字段带前缀或含调试字段（如 _meta、__v）的场景特别有用。

const users = [
  { id: 1, name: 'Alice', email: 'a@x.com', _createdAt: '2024-01-01' },
  { id: 2, name: 'Bob', email: 'b@y.com', __v: 0 }
];
console.table(users, ['id', 'name', 'email']); // 只显示这三列，忽略 _createdAt 和 __v

列名必须完全匹配属性名，大小写敏感；写成 ['ID'] 不会匹配 id
如果某对象没有该属性，对应单元格显示 undefined（比留空更明确）
支持 Symbol 属性，但需显式传入 Symbol 实例，不能用字符串名

嵌套字段要扁平化，否则 console.table 看不到细节

console.table 不解析点号路径（如 'user.name'），所以不能直接展示嵌套值。得先用 map 做一次投影，生成新数组。

const logs = [
  { id: 1, meta: { ip: '192.168.1.1', ua: 'Chrome' } },
  { id: 2, meta: { ip: '10.0.0.5', ua: 'Safari' } }
];
// 错误：console.table(logs, ['id', 'meta.ip']) → 第二列全空
// 正确：
const flatLogs = logs.map(({ id, meta }) => ({ id, ip: meta.ip, ua: meta.ua }));
console.table(flatLogs);

别试图用 JSON.stringify 包裹嵌套对象来“骗过”显示——结果是整段字符串，失去可读性
如果嵌套层级深（如 data.items[0].details.tags[0].name），手动 map 易错，建议封装一个 flattenByPath(obj, path) 工具函数
注意引用关系：原对象和扁平后数组共享引用，修改后者可能意外影响前者