ES2019. Aplanar arrays en Javascript con Array.flat()

“Flatten arrays” gracias a ES2019

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

Aplanar arrays en ES2019

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

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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: 👇👇👇

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store