为什么 console.table() 不适用于所有对象/数组？答案

【问题标题】：Why doesn't console.table() work for all objects/arrays?为什么 console.table() 不适用于所有对象/数组？
【发布时间】：2023-04-11 04:57:02
【问题描述】：

为什么console.table() 不适用于所有对象/数组？

有了一些数据，我在开发者控制台中得到了一个格式很好的表格。对于其他数据，我什么也得不到……甚至没有错误消息。

我刚刚在经历#Javascript30 的挑战时了解了console.table()。演示者在部分输出中使用了console.table()，但不是全部，他没有解释原因。我尝试将它用于所有（数组或对象）输出并看到为什么......它不起作用。

这是一个不起作用的例子。

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];

const transportation = data.reduce((counters, item) => {
  if (!counters[item]) counters[item] = 0;
  counters[item]++;
  return counters;
}, {});
console.log('transportation table');
console.table(transportation);

console.log('transportation log');
console.log(transportation);

&lt;h1&gt;Look at the console!&lt;/h1&gt;

我预计 console.table() 会返回如下内容：

...除了 (index) 列将包含汽车、卡车、自行车等，而 Values 列将包含计数。

更新

显然console.table() 不适用于 SO 的代码 sn-ps... 在这种情况下，这意味着它与在浏览器上的工作方式完全相同：P 所以，我在 CodePen 发布了一个问题示例： http://codepen.io/VAggrippino/pen/qRraEP

这是第 4 个挑战，Array Cardio 1 给你们这些追随者。

我意识到这并不是严格意义上的编程/JavaScript 问题，因为控制台是浏览器的功能，而不是语言或 DOM。我相信它是相关的，因为浏览器是所有 Web 开发人员都使用的基本工具，并且每个主流浏览器都支持它。

【问题讨论】：

顺便说一下，console.table 在 sn-ps 中不起作用。见meta.stackoverflow.com/questions/340915/…。
@torazaburo 在这种情况下，对于我的具体示例，它的工作方式与 Chrome 中的工作方式完全相同：D

标签： javascript browser

【解决方案1】：

我目前正在为 JS30 做同样的练习，遇到了和你一样的问题，这导致我来到这里。

我咨询了console.table() page on MDN，在做了一些测试后，这似乎是 Chrome 的问题。

从我有限的测试来看，Chrome 似乎不输出原始类型集合（字符串数组、单个对象）的表，只输出复合类型集合（数组/对象数组、属性为对象的对象） .

这不起作用：

console.table(['1','2','3']);

但这确实：

console.table([['1','2','3']]);

我也在 Canary 上进行了测试，但结果相同。

但是在 Firefox 上，console.table() 似乎可以正常工作。原始类型集合的 MDN 示例适用于 Firefox，但不适用于 Chrome。

要在 Chrome 上为您的示例提供输出，您可以将 transport 变量放入其自己的数组中，以便 Chrome 打印表格。

console.table([transportation]);

【讨论】：

我尝试将其实现为； console.table(arr_cars, ['0', '1', '2', '3', '4', '5', '6', '7']);但似乎浏览器只显示前 0-5 列，甚至其余列也足够小（窄）也可以显示（Firefox）。我放弃了。
我最终得到了console.table({...fifteen})（而不是console.table(fifteen)）
我认为它也适用于原始数据类型，您在“这不起作用”下提供的示例似乎有效，它在表格中输出。有趣的是，您给出的复合示例在表格格式中不起作用。

【解决方案2】：

理论上，console.table() 打印表格（2 维）而不是数组（1 维），因此外部数组是行列表（如 <tr>s），每个内部数组包含该列的每一列的值行（如<td>s）。

【讨论】：

【解决方案3】：

只需打开新标签并打开控制台并输入 console.table([['1','2','3']]);并运行它，然后尝试运行你的文件，看看它是否有效。但对我来说它有效！

【讨论】：