Javascript: Ein leeres 3D-Array einschieben

Question

Ich erstelle ein leeres 3x3x1 3D-Array

[
  [[],[],[]],
  [[],[],[]],
  [[],[],[]]
]

Nun, an Position Das Element arr[1][1]ist [], also, wenn ich ausführen arr[1][1].push(1)es einfügen sollte 1auf Positionarr[1][1]

Es gibt zwei Methoden zum Erstellen eines leeren 3x3x1-Arrays in JS. Hier ist der Code:

var arr1 = [...new Array(3)].map(e => [...new Array(3)].fill([]));
var arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
arr1[1][1].push(1);
arr2[1][1].push(1);
console.log(arr1)
console.log(arr2)

dh. Durch Verknüpfung und eine andere manuell sollten beide arr1und arr2identisch sein, so sollte die Ausgabe sein, aber die Ausgabe ist wie folgt:

[[[], [], []], [[1], [1], [1]], [[], [], []]]

[[[], [], []], [[], [1], []], [[], [], []]]

Warum gibt das erste Array eine solche Ausgabe? Sind nicht beide identisch?

Ich möchte, dass die Ausgabe die 2. Form hat. Wenn dies ein falscher Weg ist, um ein leeres 3x3x1-Array zu erstellen, schlagen Sie bitte eine Methode vor, die die erwartete Ausgabe liefert.

Answer 1

Verwenden Sie eine weitere verschachtelte Karte. Ich denke, dieser fillAufruf füllt das erste mapmit demselben Array in jeder der 2. Dimensionen anstelle eines eindeutigen, was bedeutet, dass die 2. Dimension alle auf dasselbe Array verweisen.

Die Dokumente von fillsogar bemerken, dass das valuegenau das gleiche sein wird:

Wert, mit dem das Array gefüllt werden soll. (Beachten Sie, dass alle Elemente im Array genau diesen Wert haben.)

Auch (Array ist ein Objekt):

Wenn der erste Parameter ein Objekt ist, verweist jeder Slot im Array auf dieses Objekt.

const arr1 = [...new Array(3)].map(e => [...new Array(3)].fill([]));
const arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
const arr3 = [...new Array(3)].map(() => [...new Array(3)].map(() => []));

arr1[1][1].push(1);
arr2[1][1].push(1);
arr3[1][1].push(1);

console.log(JSON.stringify(arr1)); // [[[],[],[]],[[1],[1],[1]],[[],[],[]]]
console.log(JSON.stringify(arr2)); // [[[],[],[]],[[],[1],[]],[[],[],[]]]
console.log(JSON.stringify(arr3)); // [[[],[],[]],[[],[1],[]],[[],[],[]]]

Mit anderen Worten:

const expandedArr1 = [...new Array(3)].map(() => {
  /*
   * From MDN fill documentation:
   * Value to fill the array with. (Note all elements in the array will be this exact value.)
   */
  return [...new Array(3)].fill([]); // Every element will get this exact value (reference)
});

// They are the same reference:
console.log(expandedArr1[1][1] === expandedArr1[1][2]);

Answer 2

Der Grund dafür ist, dass die Füllmethode den "exakten Wert" in allen drei füllt.

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill Siehe den Hinweis in der Beschreibung des Parameterwerts.

var arr1 = [...new Array(3)].map(e => [...new Array(3)].map(e=>[])); // Note that i have used a map with a function returning an array([]) instead of your fill method
var arr2 = [[[],[],[]],[[],[],[]],[[],[],[]]];
arr1[1][1].push(1);
arr2[1][1].push(1);
console.log(arr1)
console.log(arr2)