奇怪的JavaScript陣列同步技巧？

Question

我發現了一個奇怪的JS行爲：

var myArray = [ [1] , [2] , [3] ]; 

var myArrayCopy = []; 

myArrayCopy.push(myArray[1]); 

alert(myArrayCopy); // 2, as expected. 

myArrayCopy[0][0] = 'foo'; 

alert(myArrayCopy); // 'foo', as expected. 

alert(myArray); // 1, foo, 3 = WTF ? :) 

見Demo。

請注意，如果我們直接使用值而不是數組，則這不起作用。

對我來說，它看起來像將數組推到數組中，翻譯成某種方式，就好像我們只推送那些數組的引用，而不是副本，（這不是人們所期待的行爲，如果我錯了，請更正） 。

有人可以解釋爲什麼嗎？

Answer 1

別名。

您在myArrayCopy中引用了一個對myArray中包含的存在對象（數組）的引用。因此，當您修改該數組時，您正在修改從上述數組中引用的實際對象。

請注意，當您在JavaScript中傳遞對象時，它們不會被複制，而是傳遞給實例的引用並在接收器的範圍內修改它將導致修改後的對象位於來電者也是如此。 這條規則有一些明顯的例外（作爲原始類型的示例，它們不是對象，或者是在寫入時實際複製的字符串等等），但讓我們專注於您的問題。

考慮到一個數組是一個對象，它發生在下面的例子一樣，但它是從我的觀點更加清晰：

var o = { "foo": " bar" }; 
myArray[0] = o; 
myArrayCopy[0] = myArray[0]; 
o.foo = "nolongerbar"; 

是什麼返回myArrayCopy[0].foo？什麼myArray[0].foo？

在大多數OO語言中稱爲別名，無論如何，這是處理對象引用時的常見錯誤。

編輯

哦，這不是在任何情況下同步的把戲，它通常是惱人的bug背後的原因。 :-)

Answer 2

myArray[1]的值是一個數組（[2]）。當您將其推入myArrayCopy.push(myArray[1]);中的myArrayCopy時，您將按數組，而不是它的內容（[2]而不是2）。

當你稍後改變這個數組（myArrayCopy[0][0] = 'foo';）時，它在使用這個數組的任何地方顯然都有效果。

Answer 3

是的，這是有道理的行動，因爲myArray 1和myArrayCopy [0]具有相同的內存地址。您可以檢查以下調試捕捉

通過線9號之後，那些已經在同一時間myArray的改變，myArraycopy的價值，是「富」

Answer 4

這是完全正確的。

由於數組作爲對象，它存儲內存地址 而不是存儲值本身。

var myArray = [ [1] , [2] , [3] ]; 

myArray將存儲創建的數組的地址（比如addr-1）。

由於陣列中的元素本身是一個陣列，它現在將具有對應於陣列[1]，[2]三個地址，分別[3]說addr-2，addr-3，addr-4。

所以最後我們：

addr-1 = [addr-2,addr-3,addr-4] 

---

var myArrayCopy = []; 

這將存儲一個新的地址，說addr-5 = []：

myArrayCopy.push(myArray[1]); 

，因爲你推的myArray的第一個元素myArrayCopy。它將存儲地址addr-3。這樣addr-5 = [addr-3]：

`alert(myArrayCopy); // 2, as expected 

所以當然這工作正常爲addr-3 = [2]：

myArrayCopy[0][0] = 'foo'; 

這裏要修改的myArrayCopy零個元素的零個元素的值，即你在addr-3改變的第一要素到foo

alert(myArrayCopy); // 'foo', as expected 

所以它的工作原理，以及：

alert(myArray); // 1, foo, 3 

myArray現在有addr-1 = [addr-2, addr-3, addr-4]，其中addr-2 = [1] ，addr-3 = ["foo"]和addr-4 = [3]。