Ändern von Werten in verschachtelten JS-Arrays

Question

Der folgende Code sollte ein leeres Array erstellen, das 7 leere Arrays enthält, effektiv ein 7x7-Raster.

Der Zugriff auf Elemente in verschachtelten Arrays funktioniert gut, aber der Versuch, ihre Werte zu ändern, ändert den Wert aller Elemente in derselben Spalte (also ändert [1] [1] auch [0] [1], [2] [ 1] usw.). Ich kann nicht verstehen warum.

var usage = new Array(7).fill(new Array(7).fill(0)); 

usage[1][1] += 1; 

https://jsfiddle.net/v3o4rwsz/

Answer 1

Dies ist eine einfache Falle, in fallen. Ihr Code entspricht:

var innerArray = [0,0,0,0,0,0,0]; // .fill(0) 
var usage = [innerArray, innerArray, innerArray, innerArray, 
      innerArray, innerArray, innerArray]; // .fill(innerArray) 

console.log(usage[0]==innerArray); // true 
console.log(usage[1]==innerArray); // true 

Um das gewünschte Ergebnis, müssen Sie ein neues Array für jedes Element in der Nutzung erstellen, zB:

var usage = []; 
for (var i=0; i<7; i++) { 
    usage.push(new Array(7).fill(0)); 
} 

Answer 2

Der Inhalt der ersten fill ist nur einmal auswerten - das zweite Array erstellen und dann dieses Array sieben Mal duplizieren, sodass alle verbunden sind.

Es ist das Äquivalent zu:

var t1 = new Array(7).fill(0); 

var t2 = t1; 
var t3 = t1; 
var t4 = t1; 
var t5 = t1; 
var t6 = t1; 
var t7 = t1; 

t2[3] = "duplicate" 

console.log(t1); 
console.log(t2); 
console.log(t3); 

die den gleichen Wert in t1 zu t7 zeigen.

Answer 3

Ich glaube, dieses Verhalten wird durch Ihre Verwendung von .fill() verursacht. Wenn Sie bei der Definition dieser function here schauen sehen Sie ihm ein Array mit einem statischen Wert auffüllt

Das bedeutet, dass, wenn Sie usage[1][1] verweisen Sie auf die gleiche Array verweisen, die auf in usage[0][1], usage[2][1] und so existiert.

Sie können das Array wie unten mit einer for-Schleife füllen.

var usage2 = new Array(); 

for(var i=0;i<7;i++) { 
    usage2.push(new Array(7).fill(0)); 
} 

Nun, wenn Sie Ihre Werte überprüfen werden Sie das erwartete Ergebnis sehen, wo nur ein Array geändert wird, wie in dem Screenshot unten von meiner Chrome-Konsole.