Werte in geschachtelten JS-Arrays ändern - Javascript, Arrays, mehrdimensionales Array

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

Der Zugriff auf Elemente in verschachtelten Arrays funktioniert einwandfrei.Wenn Sie jedoch versuchen, ihre Werte zu ändern, wird der Wert aller Elemente in derselben Spalte geändert. Wenn Sie also [1] [1] ändern, werden auch [0] [1], [2] [1] usw. geändert. Ich kann nicht verstehen warum.

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

usage[1][1] += 1;

https://jsfiddle.net/v3o4rwsz/

Antworten:

0 für die Antwort № 1

Dies ist eine einfache Falle, in die man hineinfallen kann. 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 zu erhalten, müssen Sie für jedes verwendete Element ein neues Array erstellen, z.

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

---

0 für die Antwort № 2

Der Inhalt des ersten fill wird nur einmal ausgewertet - erstellt das zweite Array und dupliziert dieses Array dann siebenmal, sodass alle miteinander 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);

Welches zeigt den gleichen Wert in t1 zu t7.

---

0 für die Antwort № 3

Ich glaube, dieses Verhalten wird durch Ihre Verwendung von verursacht .fill(). Wenn Sie sich die Definition davon ansehen Funktion hier Sie werden sehen, dass ein Array mit einem gefüllt wird statischer Wert

Dies bedeutet, dass wenn Sie verweisen usage[1][1] Sie verweisen auf dasselbe Array, das in vorhanden ist usage[0][1], usage[2][1] und so weiter.

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

var usage2 = new Array();

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

Wenn Sie nun Ihre Werte überprüfen, sehen Sie das erwartete Ergebnis, bei dem nur ein Array geändert wird, wie im folgenden Screenshot von meiner Chrome-Konsole.

---