Javascript: inserimento di un array 3d vuoto

Question

Creo un array 3D 3x3x1 vuoto

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

Ora, l'elemento in posizione arr[1][1]è [], quindi, se eseguo arr[1][1].push(1)dovrebbe inserire 1in posizionearr[1][1]

Esistono 2 metodi per creare un array 3x3x1 vuoto in JS, ecco il codice,

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)

cioè. Tramite scorciatoia e un'altra manualmente, entrambi arr1e arr2dovrebbero essere identici, quindi dovrebbe essere l'output, ma l'output è il seguente,

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

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

Perché il primo array fornisce tale output? Non sono entrambi identici?

Voglio che l'output sia della seconda forma, se questo è un modo sbagliato per creare un array 3x3x1 vuoto, suggerisci un metodo tale che dia l'output previsto.

Answer 1

Usa un'altra mappa nidificata. Penso che la fillchiamata riempirà la prima mapcon lo stesso array in ciascuna della seconda dimensione invece di uno unico, il che significa che la seconda dimensione fa riferimento allo stesso array.

I documenti di Even fillnotano che valuesarà esattamente lo stesso:

Valore con cui riempire la matrice. (Nota che tutti gli elementi nell'array avranno questo valore esatto.)

Inoltre (l'array è un oggetto):

Se il primo parametro è un oggetto, ogni slot nell'array farà riferimento a quell'oggetto.

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],[]],[[],[],[]]]

In altre parole:

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

Il motivo per cui ciò accade è perché il metodo di riempimento riempie il "valore esatto" in tutti e tre.

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill Vedere la nota nella descrizione del valore del parametro.

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)