Crear y rellenar un array grande en JavaScript

por

Cómo crear y rellenar un Array grande en JavaScript, con una longitud predeterminada y rellenado con valores fijos o aleatorios ?

Hay tres formas de crear Arrays en JavaScript

Es muy fácil crear un Array genérico en JavaScript y disponemos de tres formas para hacerlo:

  <script>
    let a1 = Array(); // Crea un Objeto Array
    let a2 = new Array(); // Crea un Objeto Array
    let a3 = []; // Crea un Objeto Array
    console.log(a1, a2, a3);
  </script>

Como podemos apreciar en console.log(a1, a2, a3) las variables a1, a2, a3 son Objetos Array idénticos. Así que no entraré en debate sobre qué forma es mejor para crear un Array.

Lo que sí haré es dar mi opinión personal: let a3 = [] sería la forma genérica de crear un Array y las otras dos las utilizaremos para establecer un tamaño al crear el Array. De este modo si declaramos los mismos Array asignando un valor a los paréntesis y corchetes tenemos:

   <script>
    let a1 = Array(10); // Crea un Objeto Array de 10 elementos
    let a2 = new Array(15); // Crea un Objeto Array de 15 elementos
    let a3 = [20]; // Crea un Objeto Array con un elemento numérico de valor 20
    console.log(a1, a2, a3);
  </script>

Ahora podemos ver cláramente las diferencias entre los paréntesis () y los corchetes []. En los paréntesis se establece el números de elementos que tendrá el Array, mientras que en los cochetes se establecen los valores que contendrá el Array. Pero si queremos rellenar un Array con números del 1 al 5 también podemos hacerlo así:

  <script>
    let a1 = Array(1, 2, 3); // Crea un Objeto Array de 3 números del 1 al 3
    let a2 = new Array(4, 5); // Crea un Objeto Array de 2 números del 4 al 5
    let a3 = [1, 2, 3, 4, 5]; // Crea un Objeto Array de 5 números del 1 al 5
    console.log(a1, a2, a3);
  </script>

Se puede apreciar con cierta perplejidad que el comportamiento de los paréntesis () es diferente y ahora se interpretan como los cochetes []. Es una de las muchas características de JavaScript, su flexibilidad y a veces «confusión». Por eso antes di mi opinión personal y utilizo las siguientes reglas «en mi cabeza»:

  • [] Para crear Arrays genéricos
  • Array(5) Para crear Arrays de una longitud determinada
  • [0, 1, 2, 3, 4, 5] Para crear Arrays con valores determinados

Entonces, cómo crear y rellenar un Array grande en JavaScript, hay algún método mejor que otro a la hora de definir un Array ? La respuesta es no. Cualquier método nos sirve y vamos a verlo implementado en cada uno de ellos.

El método fill() para crear y rellenar un Array

Cuando queremos crear y rellenar un Array muy grande, de por ejemplo 1000 elementos, nos encontramos con el problema que es muy costoso escribir los 1000 elementos. Por suerte disponemos del método fill().

La función fill(valor, inicio, final) nos permite rellenar un Array con un valor determinado, desde la posición inicio (por defecto 0), hasta la posición final (por defecto array.length). Aunque la posición final no está incluida en el relleno. De este modo si aplicamos fil() a nuestros Arrays obtenemos:

  <script>
    let a1 = Array(10); // Crea un Objeto Array de 10 elementos
    let a2 = new Array(15); // Crea un Objeto Array de 15 elementos
    let a3 = [1, 2, 3, 4, 5]; // Crea un Objeto Array de 5 números del 1 al 5
    a1.fill('a', 2, 4); // Rellena con 'a' las posiciones 2 a 3
    a1.fill('b', 6, 7); // Rellena con 'b' la posición 6
    a2.fill('c', 5); // Rellena con 'c' las posiciones 5 hasta el final
    a3.fill('d'); // Rellena con 'd' todo el Array
    console.log(a1, a2, a3);
  </script>

Ahora podemos rellenar nuestros Arrays de forma controlada, aplicando el método fill(), incluso diversas veces si fuera necesarios. Pero también podemos utilizar la función fill() en el momento de crear el Array para añadirle los valores iniciales.

  <script>
    // Array de 10 elementos, rellena con 'a' las posiciones 2 a 3
    let a1 = Array(10).fill('a', 2, 4); 
    // Array de 15 elementos, rellena con 'c' las posiciones 5 hasta el final
    let a2 = new Array(15).fill('b', 5); 
    // Array vacío y fill() no tiene efecto
    let a3 = [].fill('c'); 
    console.log(a1, a2, a3);
  </script>

El método map() para crear y rellenar un Array con valores aleatorios

Aunque la función fill() nos ayuda a rellenar un Array en el momento de crearlo, sigue sin ser suficiente. Si queremos crear un Array de 1000 números aleatorios del 0 al 99 nos falta algo más. El método map().

La función map() acepta una función de callback como parámetro que se aplica a todos los elementos del Array. De esta forma, si queremos crear y rellenar un Array grande con 1000 elementos, de números aleatorios del 00 al 99, podemos hacerlo con la siguiente instrucción combinada:

  <script>
    // Array de 1000 elementos de números aleatorios de 00 a 99
    let a4 = Array(1000).fill().map(function() { return Math.floor(Math.random() * 100) });
    console.log(a4);
  </script>

Combinando todos los métodos creamos un Array grande de 1000 elementos, lo rellenamos con el método fill() que se complementa con el método map(). Cuya función devuelve un número aleatorio, para cada elemento del Array.

El método fill() lo podemos utilizar para fijar el rango a rellenar. Indistintamente del valor de relleno que especifiquemos, será sustituido por la función map(), en el rango establecido en fill(). De esta forma podemos utilizar fill() para rellenar sólo una parte del Array con la función map().

  <script>
    // Array de 10 elementos, rellena con map() las posiciones 2 a 3
    let a4 = Array(10).fill('a', 2, 4).map(function() { return Math.floor(Math.random() * 100) });
    console.log(a4);
  </script>

Ahora ya tenemos una serie de herramientas potentes para generar nuestros Arrays con contenido predeterminado y en las posiciones que queremos, por muy grandes que sean nuestros Arrays.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario