English version: https://medium.com/@ger86/es2019-flatten-arrays-in-javascript-with-array-flat-aaf28eea5c43

Hoy os traigo un artículo — receta sobre Javascript que de paso me servirá para comenzar a hablar de las novedades que traerá consigo ES2019 y en el que me centraré en la forma en que podemos “aplanar” arrays mediante Javascript (operación también conocida como “flatten array”).

Así que sin entretenernos mucho más, ¡vamos a verlo!

¿Pero qué es eso de aplanar?

Aplanar arrays es una operación bastante útil que realiza lo siguiente:

Es decir, al pasarle un array de arrays lo que hace es transformarlo en un array de una única dimensión.

Esta operación sin embargo no está implementada de forma nativa en Javascript por lo que hasta la fecha ha sido necesario recurrir a un poco de imaginación (o a Stackoverflow 😋) para obtener alguna posible implementación.

Posibles implementaciones de flatArray()

Con una simple búsqueda en Google encontraréis bastantes implementaciones de flatArray . Por ejemplo tenemos la siguiente

const merged = [].concat.apply([], arrays);

que sin embargo no funciona para arrays de varios niveles como:

const myArray = [['📦', '📦'], ['📦', ['📦', ['📦']]]];

O una algo más compleja extraída de Stackoverflow como la siguiente:

Aplanar arrays en ES2019

Con la llegada de ES2019 “aplanar” un array ha pasado a ser una tarea tan trivial como:

Gracias a Array.prototype.flat() podremos aplanar de forma nativa arrays de la profundidad que sea sin necesidad de ningunos de los “helpers” citados en el apartado anterior.

Además, su compatibilidad con los navegadores empieza a ser bastante amplia como podéis ver desde la web caniuse.com por lo que bastará con añadir el “polyfill” correspondiente para emplear esta función en nuestras aplicaciones.

¿Cómo funciona?

Tal y como podéis ver en su definición, Array.prototype.flat() puede recibir un argumento opcional llamado depth que especifica cuantos niveles debe de aplanarse el array:

Por defecto, el valor es este argumento es 1 y algo muy interesante es que si no conocemos el nivel de profundidad del array podremos pasarle Infinity de cara a asegurar que lo que obtendremos como resultado será un array de una dimensión:

Por otra parte, array.flat() también se encarga de eliminar por el camino los arrays vacíos que se encuentra a medida que realiza la operación:

Por lo que con esta implementación los desarrolladores de la propuesta han cubierto todos los casos. Un aplauso por ellos:

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇