Original article: How to Use the flat() and flatMap() Methods to Flatten Arrays in JavaScript
En este artículo voy a explicar cómo usar los nuevos métodos de arreglos introducidos en ES2019 (ECMAScript 2019) – flat() y flatMap(). Se usan estos métodos para aplanar arreglos.
Estos métodos son muy útiles y fáciles de usar. Será realmente genial que uses estos métodos en tu próximo proyecto. Toma un café y profundicemos en ello.
Prerrequisitos
Deberías estar familiarizado con el concepto de arreglos de JavaScript para seguir este tutorial.
¿Qué es un Arreglo?
El objeto del arreglo es una estructura de datos usados en diferentes lenguajes de programación para almacenar diferente colecciones de datos.
Ejemplo de un arreglo en JavaScript
const array = [1, 2, 3, true, null, undefined];
console.log(array);
// salida esperada
1, 2, 3, true, null, undefined
En el código de arriba, asignamos una variable llamada arr y le almacenamos diferentes elementos/datos de diferentes tipos de datos.
El primer elemento, el cual es 1 está en el índice 0. El último elemento, undefined, está en el índice 5.
No te olvides que los objetos de arreglo son de índice cero, lo que significa que el primer elemento comienza en el índice cero.
Características de arreglos de JavaScript
- Los arreglos son de índice cero: Esto simplemente significa que el primer elemento en un arreglo está en el índice 0. El índice aquí significa la posición. En JavaScript y al igual que en otros lenguajes de programación, la palabra correcta a usar es índice y no posición.
- Los arreglos de JavaScript pueden contener diferente tipos de datos: Esto significa que los arreglos de JavaSript pueden contener una mezcla de números, cadenas, booleanos, valores null, y así sucesivamente.
- JavaScript crea copias superficiales: Esto significa que tanto como el arreglo original y la copia apuntan a la misma referencia – modificar la copia puede alterar el arreglo original.
Nuevos métodos de arreglo de JavaScript
Los arreglos son una de las estructuras de datos más populares en JavaScript usados para almacenar datos.
Hay diferentes métodos de arreglo que puedes usar para simplificar operaciones y hacer tu vida más fácil. Unos pocos de esos métodos incluyen reduce(), filter(), map(), flat(), flatMap(), y muchos más.
Pero en este artículo no discutiremos todos los métodos de arreglo usados en JavaScript. Más bien aquí, discutiremos los nuevos métodos flat() y flatMap() que puedes usar para convertir un arreglo original en un nuevo arreglo.
Cómo usar el método de arreglo flat en JavaScript
Se usa el método flat para convertir un arreglo original en un nuevo arreglo. Lo hace colectando y concatenando los sub arreglos de un arreglo en un sólo arreglo.
Una nota importa sobre este método de arreglo es que puedes computar el original en otro arreglo según la profundidad del arreglo. Este método es sumamente útil porque hace los cálculos de operaciones de un arreglo mucho más sencillos.
Ejemplos del método de arreglo flat()
Cómo poner el parámetro de profundidad
array.flat(profundidad);
El valor de profundidad es 1 por defecto y puedes dejarlo vacío. El valor de profundidad toma un número como su tipo de dato.
flat() método de arreglo ejemplo 1
array.flat(1) es igual a array.flat().
array.flat(2);
La profundidad de arriba es 2.
const arr = ["mon", "tues", ["wed", "thurs", ["fri", "sat"]], "sun"] ;
console.log(arr.flat());
// salida esperada
["mon", "tues", "wed", "thurs", Array ["fri", "sat"], "sun"];
Así que, ¿qué está sucediendo en este código?
Primero, el arreglo contiene dos sub arreglos, los cuales son ["wed", "thurs", ["fri", "sat"]].
Usamos el método flat() llamado arr para concatenar el primer sub arreglo porque no especificamos ningún valor de profundidad dentro del método flat(). Recuerda que la profundidad por defecto es 1.
Así que puedes adivinar cómo sería el objeto de arreglo si el valor de profundidad fuera 2, ¿no cierto?
flat() método de arreglo ejemplo 2
const arr = [1, 2, [3, 4, 5], 6, 7];
console.log(arr.flat());
// salida esperada
[1, 2, 3, 4, 5, 6, 7]
En el código de arriba, el arreglo contiene un sub arreglo, el cual es [3, 4, 5].
Usamos el método flat() en el arreglo llamado arr para concatenar los dos arreglos juntos en un sólo arreglo.
flat() método de arreglo ejemplo 3
// ejemplo de profundidad de 2
const arr2 = [[[1, 2], 3, 4, 5]] ;
console.log(arr2.flat(2));
// salida esperada
[1, 2, 3, 4, 5]
En el código de arriba, el arreglo llamado arr2 contiene dos sub arreglos.
Usamos el método flat() en arr2 para concatenar dos arreglos en un sólo arreglo porque el valor de profundidad 2 es usado dentro del método flat(2). Mira rápidamente arriba para ver lo que hace el valor de profundidad.
El método de arreglo es una linda forma de concatenar elementos en un arreglo recursivamente.
Cómo usar el método de arreglo flatMap en JavaScript
El método flatMap() usa una combinación de los métodos map() y flat() para ejecutar operaciones.
La función flatMap() recorre los elementos de un arreglo y concatena los elementos en un nivel. flatMap() toma una función callback el cual a su vez toma el elemento actual del arreglo original como parámetro.
flatMap() método de arreglo ejemplo
const arr3 = [1, 2, [4, 5], 6, 7, [8]] ;
console.log(arr3.flatMap((element) => element));
// salida esperada
[1, 2, 4, 5, 6, 7, 8]
En el código de arriba, el arreglo llamado arr3 contiene dos sub arreglos distintos.
Usamos el método flatMap() en el arreglo pasándole una función callback, (elemento) => elemento, el cual recorre el arreglo y luego concatena los arreglos en un sólo arreglo.
A veces tendrás una situación en donde tengas más de una profundidad de un arreglo y decides cambiar el nuevo arreglo en uno de un sólo nivel. Entonces tendrás que usar el método flat() inmediatamente después del método flatMap().
Aquí hay un ejemplo:
const arr4 = [1, 2, [3, [4, 5, [6, 7]]]] ;
console.log(arr4.flatMap((element) => element).flat(2)) ;
// salida esperada
[1, 2, 3, 4, 5, 6, 7]
En el código de arriba, el arreglo llamado arr4 contiene tres sub arreglos.
Usamos el método flatMap() en el arreglo pasándole una función callback, (elemento) => elemento el cual recorre el arreglo y luego concatena los arreglos.
Usamos el método flat(2) para concatenar más adelante el arreglo en un sólo arreglo pasando una profundidad de 2.
Asegúrate de práctica el ejemplo de arriba sin pasar el método flat(2) y ve la diferencia.
Esto es todo lo que necesitas para empezar con estos dos nuevos métodos de arreglo.
Resumen
En este artículo, hablé brevemente de qué son los arreglos y cuán útiles son en JavaScript. Luego aprendimos sobre los dos nuevos métodos importantes de arreglo, los cuales fueron introducidos en ECMAScript 2019 que te permite cambiar un arreglo original en un nuevo arreglo.
Estos nuevos métodos de arreglo son los métodos flat() y flatMap().
Usas el método flat() para concatenar sub arreglos recursivamente en un sólo arreglo. El método flat() toma un valor de profundidad como su parámetro, el cual es opcional dependiendo de la profundidad del arreglo el cual deseas aplanar (concatenar). El método flat() toma un 1 de profundidad por defecto.
En cambio, flatMap() básicamente funciona de la misma manera a diferencia de que es una combinación de los métodos map() y flat() juntos. flatMap() recorre los elementos del arreglo y concatena los elementos.
Ambos nuevos métodos son útiles cuando estás cambiando un arreglo original en un nuevo arreglo. Vale la pena probarlos en tu próximo proyecto grande o pequeño.