為什么這兩個 javascript 二維數組的行為不同？

Question

在我的函數中，我定義了兩個數組，第一個 ( array1 ) 具有預先初始化的長度。 我添加了第二個數組（ array2 ）只是為了測試，因為我認為第一個數組的行為很奇怪。

我的代碼：

 function test(n = 3) { array1 = new Array(n).fill(new Array(n)); array2 = [ [undefined, undefined, undefined], [undefined, undefined, undefined], [undefined, undefined, undefined] ]; document.getElementById("output").innerHTML = JSON.stringify(array1) + " (array 1) <br/>" + JSON.stringify(array2) + " (array 2)<br/><br/><hr/>"; for (i = 0; i < n; i++) { array1[i][0] = i; array2[i][0] = i; } document.getElementById("output").innerHTML += JSON.stringify(array1) + " (array 1) <br/>" + JSON.stringify(array2) + " (array 2)<br/><br/><hr/>"; }

 <button onclick="test();">Press to test</button> <br/><br/> <div id="output"></div>

在for循環中，我嘗試更改第二個維度的第一個值。 它應該輸出[[0, undefined, undefined], [1, undefined, undefined], [2, undefined, undefined]] ，就像第二個數組一樣。

我的問題是：為什么會發生這種情況？ 而且，如何制作一個在兩個維度上長度為n的預初始化數組，其行為類似於第二個數組？

Answer 1

這是因為在array1的情況下，它包含三個數組，但它們都指向同一個引用變量，在執行new Array(n)時對其進行評估：

var array1 = new Array(n).fill(new Array(n));

因此，當for循環在array1上運行時，它設置了相同數組引用的值，而在array2的情況下，這三個數組是不同的引用變量。

這是您的代碼段的略微修改版本。 當array1的元素的值被更改時，請注意控制台中的條目。 在array1的情況下，所有三個子數組都在變化，而在array2的情況下，在循環下使用索引i引用的數組是唯一變化的。

 function test(n = 3) { array1 = new Array(n).fill(new Array(n)); array2 = [ [undefined, undefined, undefined], [undefined, undefined, undefined], [undefined, undefined, undefined] ]; document.getElementById("output").innerHTML = JSON.stringify(array1) + " (array 1) <br/>" + JSON.stringify(array2) + " (array 2)<br/><br/><i>The commas with nothing in between mean undefined.</i><hr/>"; for (i = 0; i < n; i++) { array1[i][0] = i; array2[i][0] = i; console.log("Array 1: " + JSON.stringify(array1)); console.log("Array 2: " + JSON.stringify(array2)); } document.getElementById("output").innerHTML += JSON.stringify(array1) + " (array 1) <br/>" + JSON.stringify(array2) + " (array 2)<br/><br/><i>The commas with nothing in between mean undefined.</i><hr/>"; }

 <button onclick="test();">Press to test</button> <br/><br/> <div id="output"></div>

Answer 2

因為Array.fill

fill()方法用靜態值填充數組中從開始索引到結束索引的所有元素。

接受一個靜態值並用它填充數組。 因此，您可以在array1的每個元素中獲得相同的填充數組。

 function test(n = 3) { var array1 = new Array(n).fill(new Array(n)), array2 = [[undefined, undefined, undefined], [undefined, undefined, undefined], [undefined, undefined, undefined]], i; for (i = 0; i < n; i++) { array1[i][0] = i; array2[i][0] = i; } document.getElementById("output").innerHTML = array1 + " (array 1) <br/>" + array2 + " (array 2)<br/><br/><i>The commas with nothing in between mean undefined.</i>"; console.log(array1); console.log(array2); }

 <button onclick="test();">Press to test</button><br/><br/> <div id="output"></div>

要獲得一個獨立的填充數組，您可以使用Array.from並使用映射值映射一個新數組。

 var array = Array.from({ length: 3 }, _ => Array.from({ length: 3 }, _ => 4)); array[0][0] = 0; console.log(array);

 .as-console-wrapper { max-height: 100% !important; top: 0; }