Firefox console.table显示错误数据

Question

Let's try the following javascript code:

 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

And this is the result:

I have tested this with Firefox 64.0 . Why do both console.table -calls result to the same output?

Answer 1

console.log is not standardized, so the behavior is rather undefined,

The console will need to store the logged values somewhere, and it will display them on the screen. The rendering will happen asynchronously for sure (being throttled to rate-limit updates), as will future interactions with the logged objects in the console (like expanding object properties).

So the console might either clone (serialize) the mutable objects that you did log, or it will store references to them. The first one doesn't work well with deep objects. Also, at least the initial rendering in the console will probably show the "current" state of the object, ie the one when it got logged - in your example you see Object {}. reminding that multi dimensional array is also an object

However, when you expand the object to inspect its properties further, it is likely that the console will have only stored a reference to your object and its properties, and displaying them now will then show their current (already mutated) state.

this answer is influenced by Bergis answer on this question.

Answer 2

The console.table is not synchronous so before the initial content of Matrix is displayed, the update is done. Just adding a delay like this and you'll see two values displayed correctly:

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);

This is not practical of course, but looking on the mozilla website it says Note: This feature is available in Web Workers. But the french translation says the feature is available via web workers which would explain the behavior you're seeing.

A workaround would be to call console.table on a deep copy of Matrix so you can carry on modifying it with minimum impact on you final code.