Crear matrices en JavaScript es una tarea fundamental, sin embargo, hay varios matices y trampas que incluso los desarrolladores experimentados podrían pasar por alto. Profundicemos en los conceptos básicos y exploremos algunos aspectos interesantes de la creación y manipulación de matrices que pueden resultarle esclarecedores.

Creación de matriz básica

La forma más sencilla de crear una matriz es utilizando literales de matriz:

let arr = [];

Luego puedes completar esta matriz usando un bucle:

for (let i = 0; i 



Esto crea una matriz con elementos [0, 1, 2, 3, 4]. Sin embargo, si crea una matriz vacía sin completarla, obtendrá una matriz sin elementos ni espacios vacíos.


  
  
  Usando el constructor de matrices


Otra forma de crear matrices es utilizando el constructor Array:


let arr = Array(5);




Cuando se pasa un único argumento numérico, se crea una matriz dispersa con la longitud especificada pero sin elementos reales:


console.log(arr.length); // 5
console.log(arr); // [empty × 5]





  
  
  Matrices dispersas


Los arreglos dispersos tienen "espacios vacíos", lo que puede provocar un comportamiento inesperado al utilizar métodos como map, filter o forEach. Estos métodos omiten espacios vacíos:


let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]




Para completar dicha matriz, debe establecer valores manualmente:


arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]





  
  
  Manejo de matrices dispersas


Para manejar matrices dispersas de manera efectiva, puedes usar métodos como fill para inicializar valores:


let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]




Pero tenga cuidado al llenar con objetos o matrices:


let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]




Cada elemento hace referencia al mismo objeto. Para evitar esto, utilice el mapa:


let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]





  
  
  Método Array.from


Array.from proporciona una forma versátil de crear matrices a partir de objetos iterables o similares a matrices:


let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]




Este método también puede ayudar al crear matrices bidimensionales:


let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]





  
  
  Iterando sobre matrices


JavaScript proporciona varias formas de iterar sobre matrices, cada una de las cuales trata las matrices dispersas de manera diferente:

• bucle for: procesa cada índice y trata los espacios vacíos como indefinidos.
• for...in: Itera sobre los índices de la matriz, omitiendo espacios vacíos.
• for...of: Itera sobre valores, tratando los espacios vacíos como indefinidos.

Conclusión

Comprender las complejidades de la creación y manipulación de matrices en JavaScript puede ayudarle a evitar errores comunes y escribir código más eficiente. Ya sea que esté usando literales de matriz, el constructor Array o métodos como Array.from y fill, saber cómo funcionan estas herramientas le permitirá manejar matrices de manera efectiva en sus proyectos.

Si esta guía te resultó útil, házmelo saber. Siempre estoy ansioso por crear más contenido que profundice en los aspectos prácticos de JavaScript. ¡Gracias por leer y feliz codificación!