console.table仅支持数组（含对象）和纯对象，不支持set、map、函数等；可指定列名过滤显示，chrome支持排序和hover查看，firefox会截断超100行数据。
console.table 能输出什么数据结构
console.table 主要支持两类输入：数组（含数组嵌套对象）和纯对象（即键值对集合）。它不是万能打印函数，对 Set、Map、函数、undefined、Symbol 等会显示为空或不渲染行内容；对深层嵌套对象只展开一层，第二层开始统一显示为 [object Object]。
常见误用是传入一个普通字符串或数字——这时控制台会静默忽略，不报错也不输出表格，容易让人误以为功能失效。
- ✅ 推荐输入：
console.table([{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}])或console.table({a: 1, b: 2, c: 3}) - ❌ 避免输入：
console.table('hello')、console.table(null)、console.table(new Map())
如何控制 console.table 的列显示
默认情况下，console.table 自动提取所有对象的共有属性作为列头。但当数组中对象字段不一致（比如有的有 email，有的没有），空值列会显示为 undefined，影响可读性。
你可以用第二个参数显式指定列顺序和范围：console.table(data, ['id', 'name', 'status'])。这个数组只起“白名单”作用——不在其中的字段不会出现在表格里，哪怕原始数据有。
- 列名必须完全匹配对象属性名（区分大小写）
- 如果某对象缺少指定字段，对应单元格显示为
undefined（不是空字符串） - 对纯对象输入，该参数也生效，但只过滤 key，例如
console.table({x: 1, y: 2, z: 3}, ['x', 'z'])只显示两列
在 Chrome 和 Firefox 中的行为差异
console.table 在主流浏览器基本可用，但细节表现不同：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Chrome 支持点击列头排序，支持 hover 查看完整值（尤其对长字符串或嵌套对象）
- Firefox 不支持排序，且对超过 100 行的数据会截断并提示“仅显示前 100 行”，而 Chrome 默认不限制
- 两者都支持导出为 CSV（右键表格 → “Save as CSV”），但 Firefox 导出时会把
undefined写成空字符串，Chrome 则保留文字undefined
如果你依赖排序调试，别在 Firefox 里做关键判断；如果处理大数据量，先用 .slice(0, 50) 限制输出再调用 console.table，避免卡顿或截断。
替代方案：当 console.table 不够用时
遇到以下情况，console.table 就力不从心了：
- 需要查看深层嵌套字段（如
user.profile.address.city） - 想高亮特定值（比如所有 status === 'error' 的行）
- 要和已有日志流合并（比如每条记录前加时间戳）
这时候更可靠的做法是手动构造数组：console.table(data.map(item => ({...item, city: item.profile?.address?.city})))，或者改用 console.log + JSON.stringify 格式化输出。别硬塞复杂逻辑进 console.table 参数里——它本就不设计用于数据转换。
真正容易被忽略的是：表格只是快照，不能交互式修改数据；你看到的永远是执行那一刻的副本，对异步更新后的状态无感知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
