Colecciones de datos

Arrays

En JavaScript, los arrays son un tipo de objetos y por tanto, son instancias de la clase Array. Estos arrays son dinámicos, por lo que no tienen un tamaño fijo, es decir, podemos crearlo con un tamaño inicial y luego añadirle más elementos.

El constructor puede recibir 0 parámetros (array vacío), 1 número (el tamaño del array), o en cualquier otro caso, se crearía un array con los elementos recibidos. Debemos tener en cuenta que en JavaScript un array puede contener al mismo tiempo diferentes tipos de datos: number, string, boolean, object, etc.

Fíjate que cuando accedes a una posición del array que no ha sido definida, devuelve undefined. La longitud de un array depende de la última posición que ha sido asignada. Vamos a ver un ejemplo de lo que ocurre cuando asignas una posición mayor que la longitud y que no es consecutiva al último valor asignado.

Podemos reducir la longitud del array modificando directamente la propiedad de la longitud del array (length). Si reducimos la longitud de un array, las posiciones mayores a la nueva longitud serán consideradas como undefined (borradas).

Puedes crear un array usando directamente la notación de corchetes en lugar de usar new Array(). Los valores que pongamos dentro (opcional), separados por coma, serán los elementos iniciales.

Recorriendo arrays

Podemos recorrer un array con los clásicos bucles while y for, creando un contador para el índice que iremos incrementando en cada iteración. Otra versión del for, es el bucle for..in. Con este bucle podemos iterar los índices de un array sin necesidad de crear una variable contador.

Además de los bucles anteriores que recorren los índices del array, hay otro tipo de bucle (for..of) que permite recorrer directamente los valores del array sin necesidad del índice. Esto sería equivalente al bucle foreach de otros lenguajes de programación.

También puede usarse este tipo de bucle para recorrer los caracteres de una cadena de texto (string).

Métodos de arrays

Al ser objetos de la clase Array, los arrays tienen una serie de métodos que podemos utlizar para realizar operaciones básicas con los mismos. Es importante diferenciar los métodos que modifican el array original de los que generan un nuevo array sin modificar el original.

Insertar y borrar al principio y al final

Para insertar y eliminar valores al principio y final del array tenemos los siguientes métodos:
- unshift: Añade uno o más valores al principio del array
- push: Añade uno o más valores al final del array
- shift: Elimina y devuelve el primer valor del array
- pop: Elimina y devuelve el último valor del array
Todos estos métodos modifican el array original.

Convertir un array a cadena

Podemos convertir un array a string usando join() además de toString(). Por defecto, devuelve un string con todos los elementos separados por coma. Sin embargo, podemos especificar el separador a imprimir pasándoselo por parámetro.

Concatenar arrays

Para concatenar el contenido de 2 o más arrays tenemos el método concat(). Se le pueden pasar 1 o más arrays por parámetro y su contenido se concatenará al del array principal. Es importante señalar que el array original no se modifica, sino que se genera un nuevo array que se devuelve con todos los elementos concatenados.

Obtener subarrays

El método slice te devuelve un subarray. Normalmente le pasaremos 2 parámetros: la posición inicial (incluida), y la posición final (excluida). Estas posiciones pueden ser negativas (cuenta desde el final). También se puede omitir la posición final si queremos obtener hasta el final del array. Cabe destacar que este método no modifica el array original.

Insertar y borrar en posiciones intermedias

Para añadir y eliminar elementos en posiciones intermedias del array, tenemos el método splice. A este método le pasamos por parámetro la posición en la que queremos trabajar, el número de elementos a borrar a partir de ahí (pueden ser 0), y los elementos que insertaremos en su lugar (opcional). Es importante saber que este método modifica el array original. Si queremos que nos devuelva el resultado como un nuevo array sin modificar el original, podemos usar el método equivalente toSpliced (estándar a partir de la versión ES2023).

Invertir las posiciones del array

Podemos invertir el orden del array usando el método reverse. Esto modifica el array original. Si por el contrario, queremos devolver una versión invertida del array sin modificar el original, tenemos el nuevo método (ES2023) toReversed.

Ordenar un array

También, podemos ordenar los elementos de un array usando el método sort. Al igual que ocurría con reverse, este método modifica el array original. En la versión ES2023 se ha introducido el método toSorted, que devuelve un nuevo array ordenado sin modificar el original.

Importante: Por defecto todos los valores de un array se ordenan alfabéticamente. Es decir, si un valor no es de tipo string, se convierte a dicho tipo internamente de cara a saber qué posición ocupará.

Si queremos ordenar otro tipo de datos, o de una manera diferente al orden alfabético de la 'a' a la 'z', debemos pasarle al método sort (o sorted) una función de ordenación. Esta función comparará 2 valores del array y devolverá un valor numérico indicando cual es menor (negativo si el primero es menor, 0 si son iguales y positivo si el primero es mayor).

Cambiar el valor de una posición generando un nuevo array

Otro método nuevo de la versión ES2023 es with. Este nos devuelve un nuevo array con un valor cualquiera modificado. Al contrario que asignar un nuevo valor a una posición del array usando la notación de corchetes, este método preserva el array original intacto.

Recorrer array de manera funcional

Podemos iterar por los elementos de un array usando el método forEach. De forma opcional, podemos llevar un seguimiento del índice al que está accediendo en cada momento, e incluso recibir el array como tercer parámetro.

Comprobar una condición con todos los elementos

El método every devolverá un boolean indicando si todos los elementos del array cumplen cierta condición. Esta función recibirá un elemento, lo testeará, y devolverá cierto o falso dependiendo de si cumple la condición o no. A este tipo de funciones se les llama predicados.

Por otro lado, el método some es similar, pero devuelve true en cuanto uno de los elementos del array cumpla la condición.

Modificar todos los elementos del array

Para modificar todos los elementos de un array, el método map recibe una función que devuelve un nuevo valor a partir de un elemento del array. El método map devolverá al final un nuevo array del mismo tamaño conteniendo todos los valores generados.

Filtrar los elementos del array

Para filtrar los elementos de un array, y obtener como resultado un array que contenga sólo los elementos que cumplan cierta condición, usamos el método filter. Este método recibe una función (predicado), que devuelve un valor boolean, indicando los elementos que se incluirán en el nuevo array generado.

Convertir array a valor simple

El método reduce usa una función que acumula un valor, procesando cada elemento (segundo parámetro) con el valor acumulado (primer parámetro). Como segundo parámetro de reduce, deberías pasar un valor inicial. Si no pasas un valor inicial, el primer elemento de un array será usado como tal (si el array está vacío devolvería undefined).

Para hacer lo mismo que reduce pero al revés (empezando por el final del array), usaremos reduceRight.

Buscar elementos en un array

Usando indexOf, podemos conocer si el valor que le pasamos se encuentra en el array o no. Si lo encuentra nos devuelve la primera posición donde está, y si no, nos devuelve -1. Si usamos el método lastIndexOf nos devuelve la primera ocurrencia encontrada empezando desde el final.

De forma opcional, podemos pasarle como segundo parámetro la posición del array a partir de la cual buscará.

También podemos usar el método includes, que simplemente devuelve un booleano indicando si el valor está presente en el array o no.

Buscar elementos con métodos funcionales

find Encuentra y devuelve el primer valor que encuentre que cumple la condición que se establece. Con findIndex, devolvemos la posición que ocupa ese valor en el array.

Recientemente se han estándarizado métodos equivalentes que empiezan a buscar desde la última posición del array. Estos métodos son findLast y findLastIndex.

Extraer arrays internos

A partir de un array que contiene otros arrays. El método flat extrae los elementos de los arrays internos y los concatena en el array resultante. Se le puede pasar por parámetro hasta que nivel de arrays internos debe extraer (por defecto es 1).

El método flatmap es una combinación de map y flat. Si la función devuelve un array, los valores se extraen y se incluyen como parte del array final resultante.

Rest

Rest es la acción de agrupar una serie de valores que se le pasan a una función/método bajo un único parámetro (de tipo array).

Para usar rest en los parámetros de una función, se declara siempre como último parámetro (no puede haber más de uno) y se le ponen tres puntos '...' delante del mismo. Este parámetro se transformará automáticamente en un array conteniendo todos los valores restantes que se le pasan a la función. Si por ejemplo, el parámetro rest está en la tercera posición, contendrá todos los parámetros que se le pasen a excepción del primero y del segundo (a partir del tercero).

Spread

Spread es lo “opuesto” de rest. Si tenemos una variable que contiene un array, y ponemos los tres puntos '...' delante de esta, extraerá todos sus valores. Podríamos usar la propiedad, por ejemplo, para calcular el máximo valor numérico de un array utilizando el método Math.max, el cual recibe un número indeterminado de parámetros y devuelve el mayor de todos.

Otra posibilidad del operador spread es la de clonar un array fácilmente.

También nos permite crear un array con el contenido de otros arrays, es decir, concatenarlos. Se pueden intercalar valores sueltos en cualquier posición.

Desestructuración de arrays

Desestructurar un array es la acción de extraer elementos individuales de un array directamente en variables individuales. Podemos también desestructurar un string en caracteres.

Vamos a ver un ejemplo donde asignamos los tres primeros elementos de un array, a tres variables diferentes, usando una única asignación.

¿Qué pasa si queremos saltarnos algún valor? Se deja el hueco vacío (sin variable) dentro de los corchetes y no será asignado.

Podemos asignar el resto del array a la última variable que pongamos entre corchetes usando el operador rest.

Si queremos asignar más valores de los que puede contener el array y no queremos asignar undefined en el caso de que dicha posición no tenga valor, podemos asignar valores por defecto en ese caso.

También podemos desestructurar arrays anidados. Solo hay que imitar en la estructura de la izquierda (variables), la estructura anidada del array.

También se puede desestructurar un array enviado como parámetro a una función. Esto mejora la legibilidad del código dentro de dicha función, ya que accedemos a una variable con nombre y no una posición de un array.

Colección Map

Un Map es una colección que guarda parejas de [clave,valor], los valores son accedidos usando la correspondiente clave. En JavaScript, un objeto podría ser considerado como un tipo de Mapa pero con algunas limitaciones (Sólo con strings y enteros como claves).

La colección Map permite usar cualquier objeto como clave. Creamos la colección usando el constructor new Map(), y podemos usar los métodos set, get y delete para almacenar, obtener o eliminar un valor a partir de su clave.

Al igual que ocurre al asignar un objeto a una variable, array, parámetro de función, etc., cuando usamos un objeto como clave, debemos saber que almacenamos una referencia a ese objeto. Por tanto, se debe usar la misma referencia para acceder a su valor, modificarlo, o para eliminarlo.

La propiedad size devuelve la longitud del mapa y podemos iterar a través por él usando el bucle for..of o el método forEach. En el primer caso, para cada iteración, se devuelve un array con dos posiciones: 0 → key, y 1 → value.

Colección Set

Set es como Map, pero no almacena los valores (sólo la clave). Puede ser visto como una colección que no permite valores duplicados (en un array puede haber valores duplicados). Se usa, add, delete y has → son métodos que devuelven un booleano y sirven para almacenar, borrar y comprobar si existe un valor.

Podemos crear un Set desde un array (lo cual elimina los valores duplicados).