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 -calls結果都輸出到相同的輸出？

Answer 1

console.log不是標准化的，因此行為相當不確定，

控制台將需要將記錄的值存儲在某個位置，並將其顯示在屏幕上。 渲染肯定會異步發生（被限制為限速更新），將來與控制台中已記錄對象的交互（例如擴展對象屬性）也將異步發生。

因此，控制台可以克隆（序列化）您記錄的可變對象，也可以存儲對它們的引用。 第一個不適用於深層物體。 另外，至少控制台中的初始渲染可能會顯示對象的“當前”狀態，即記錄對象時的狀態-在您的示例中，您將看到Object {}。 提醒多維數組也是一個對象

但是，當您擴展對象以進一步檢查其屬性時，控制台可能只存儲了對您的對象及其屬性的引用，現在顯示它們將顯示其當前（已變異）狀態。

此答案受此問題的伯吉斯答案的影響。

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，以便您可以對其進行修改，而對最終代碼的影響最小。