Javascript: insertar una matriz 3d vacía

Question

Creo una matriz 3D vacía de 3x3x1

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

Ahora, el elemento en la posición arr[1][1]es [], Entonces, si lo ejecuto arr[1][1].push(1), debería insertarlo 1en la posiciónarr[1][1]

Hay 2 métodos para crear una matriz vacía de 3x3x1 en JS, aquí está el código,

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)

es decir. A través de un atajo y otro de forma manual, ambos arr1y arr2deben ser idénticos, por lo que debe ser la salida, pero la salida es la siguiente,

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

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

¿Por qué la primera matriz da tal salida? ¿No son ambos idénticos?

Quiero que la salida sea de la segunda forma. Si esta es una forma incorrecta de crear una matriz vacía de 3x3x1, sugiera un método tal que dé la salida esperada.

Answer 1

Utilice un mapa anidado más. Creo que la fillllamada llenará la primera mapcon la misma matriz en cada una de la 2da dimensión en lugar de una única, lo que significa que la 2da dimensión hace referencia a la misma matriz.

Los documentos de fillincluso notan que valueserá exactamente el mismo:

Valor con el que llenar la matriz. (Tenga en cuenta que todos los elementos de la matriz tendrán este valor exacto).

Además (la matriz es un objeto):

Si el primer parámetro es un objeto, cada ranura de la matriz hará referencia a ese objeto.

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

En otras palabras:

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

La razón por la que esto sucede es porque el método de relleno completa el "valor exacto" en los tres.

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill Consulte la Nota en la descripción del valor del parámetro.

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)