console.table比console.log更适合查看数组对象，因其自动提取公共key为列头、对齐成可排序表格，便于横向比对字段差异；而console.log以折叠结构显示，展开繁琐且易串行。
console.table 为什么比 console.log 更适合看数组对象
因为 console.table 会自动提取每个对象的公共 key 作为列头，把值对齐成表格，一眼就能横向比对字段差异；而 console.log 打印数组对象时是折叠结构，展开后还得手动点开每个项，尤其字段多、数据量稍大（比如 10+ 条）就容易看串行。
它原生支持浏览器控制台（Chrome、Edge、Firefox 均可），无需引入任何库，但注意 Safari 目前只支持基础表格显示（不支持嵌套对象展开、自定义列等高级特性）。
怎么让 console.table 只显示关心的字段
传入第二个参数——一个字符串数组，指定要展示的 key 列。这个参数不是过滤数据，只是控制列显隐：
const users = [
{ id: 1, name: 'Alice', email: 'a@b.com', role: 'admin' },
{ id: 2, name: 'Bob', email: 'b@c.com', role: 'user' }
];
console.table(users, ['name', 'role']); // 只显示 name 和 role 两列
常见误用：console.table(users, ['name']) 写成 console.table(users.name) —— 后者会报 undefined，因为 users.name 是 undefined，不是数组。
- 字段名必须完全匹配对象属性名（区分大小写）
- 如果某个对象没有该字段，对应单元格显示
undefined - 不支持点号路径（如
['profile.age']不生效，嵌套字段需先扁平化）
遇到嵌套对象或数组时 console.table 显示不全怎么办
console.table 对第一层属性友好，但遇到 { user: { name: 'Alice' } } 这类结构，默认只显示 [object Object]，无法展开查看内容。
解决办法是预先映射成扁平结构：
const nestedData = [
{ id: 1, profile: { name: 'Alice', city: 'Beijing' } },
{ id: 2, profile: { name: 'Bob', city: 'Shanghai' } }
];
const flattened = nestedData.map(item => ({
id: item.id,
name: item.profile.name,
city: item.profile.city
}));
console.table(flattened);
注意：不要试图用 JSON.stringify 后再打印——那只会变成一整列字符串，失去表格意义。
- 嵌套过深（三层以上）建议改用
console.log+ 断点调试 - 若需临时查看某条数据的完整结构，可单独
console.log(nestedData[0]) - Vue/React 开发中，直接打印响应式代理对象可能显示
Proxy，应先用toRaw()或unref()解包
console.table 在大量数据下卡顿或截断怎么办
Chrome 控制台默认对 console.table 的行数做限制（通常 100 行左右），超出部分不渲染，也不报错，容易误以为数据只有那么几条。
验证是否被截断：右键表格 → “Save as…” 导出 CSV，看实际行数；或改用 console.log(JSON.stringify(data, null, 2)) 粗略确认总量。
- 超过 500 条建议分页打印：
console.table(data.slice(0, 100)) - 避免在循环里反复调用
console.table（性能差且干扰判断） - 生产环境务必删掉所有
console.table，它不会被 UglifyJS/Terser 自动移除
真正容易被忽略的是：表格列宽由最长字段内容决定，超长字符串（比如 base64、URL）会让整列撑开、横向滚动困难——打印前最好用 .slice(0, 50) 截断文本字段。
