為什麼「console.log()」在應用更改之前顯示更改的數組值？

Console.log() 過早顯示更改的數組值

在編程中，我們經常操作變量並將其值記錄到控制台以追蹤變化。然而，在數組的情況下，我們會遇到意外的行為，console.log() 在進行更改之前就輸出數組的修改值。

可以在以下程式碼片段中觀察到這種現象：

var A = [2, 1];
var C = A;
console.log(C); // [1, 2]
A.sort();
console.log(C); // [1, 2]

在此範例中，我們有一個陣列 A，其中兩個元素被分配給另一個變數 C。當我們記錄 C 時，它最初顯示原始值 [1, 2]。然而，當我們在 A 上呼叫 sort() 方法時，我們看到 C 也顯示了排序後的值 [1, 2]，即使變更已套用至 A。

理解行為

出現此行為是因為 console.log() 傳遞的是對該物件的引用而不是其值的副本。當您記錄數組時，控制台會顯示對記憶體中數組的引用，該引用會隨著數組變更而更新。

為了說明這一點，請考慮以下修改後的程式碼：

var A = [2, 1];
var C = JSON.parse(JSON.stringify(A));
console.log(C); // [1, 2]
A.sort();
console.log(C); // [2, 1]

透過將數組A 轉換為JSON 字串，然後再轉換回數組，我們在記憶體中創建了一個新物件。這意味著 C 現在擁有 A 原始值的副本。當我們對 A 進行排序時，C 保持不變，因為它是一個單獨的物件。

MDN 的警告

這種行為在Chrome 和Firefox 等現代版本的瀏覽器中尤其重要：

MDN warns: ... at the moment you open the console.

這意味著控制台中顯示的記錄值可能不代表記錄時物件的實際值。相反，它可能會顯示控制台首次開啟時的值，這可能會導致混亂。

結論

使用陣列時，重要的是了解 console.log() 的引用傳遞行為。如果您想要記錄數組的實際值而不存在過早更改的風險，請考慮使用 JSON.parse() 和 JSON.stringify() 方法首先建立數組的深層副本。

以上是為什麼「console.log()」在應用更改之前顯示更改的數組值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！