Firefox console.table 显示错误数据

Question

让我们试试下面的 javascript 代码：

 var Matrix = [
  [1,2,3],
  [4,5,6]
 ];

  console.table(Matrix);   // print initial data
  Matrix[1][1] = 9;        // change one value
  console.table(Matrix);   // print updated data

这是结果：

我已经用 Firefox 64.0 测试过了。为什么两个 console.table 调用结果相同？

Answer 1

console.log 未标准化，因此行为未定义，

控制台需要将记录的值存储在某处，并将它们显示在屏幕上。渲染肯定会异步发生（被限制为速率限制更新），未来与控制台中记录的对象的交互（如扩展对象属性）也是如此。

因此控制台可能会克隆（序列化）您记录的可变对象，或者存储对它们的引用。第一个不适用于深层物体。此外，至少控制台中的初始呈现可能会显示对象的 "current" 状态，即它被记录时的状态 - 在您的示例中，您会看到对象 {}。 提醒多维数组也是对象

但是，当您展开对象以进一步检查其属性时，控制台很可能只存储了对您的对象及其属性的引用，现在显示它们将显示它们的当前（已经变异）状态。

此答案受到 Bergis answer on this 问题的影响。

Answer 2

console.table不是同步的，所以在 Matrix 的初始内容显示之前，更新已经完成。只需像这样添加延迟，您就会看到正确显示的两个值：

var Matrix = [
  [1, 2, 3],
  [4, 5, 6]
];

console.table(Matrix);   // print initial data
setTimeout(() => {
  Matrix[1][1] = 9;        // change one value
  console.table(Matrix);   // print updated data
}, 2000);

这当然不实用，但在 mozilla 网站上看它说注意：此功能在 Web Workers 中可用。但法语翻译说该功能可通过网络工作者获得，这将解释您所看到的行为。

解决方法是在 Matrix 的深层副本上调用 console.table，这样您就可以继续修改它，而对最终代码的影响最小。

Firefox console.table 显示错误数据

Firefox console.table showing wrong data

javascript

firefox

multidimensional-array

console.log