Artículos
Javascript

Aplanar arrays en Javascript

12/Feb/2021

Cuando estamos manejando arrays que sean matrices o que tengan múltiples dimensiones nos puede ser muy útil el saber cómo aplanar array en Javascript. Es decir, conseguir mover todos los elementos a una única dimensión. Esto nos simplifica cosas como recorrer los elementos o poder volcarlos en algún sistema.

Hasta la versión ES10 (o ES2019) era un procedimiento que teníamos que hacer a mano, pero desde esta versión del estándar Javascript ya disponemos de un método del objeto Array que es .flat() y que nos ayuda a aplanar arrays en Javascript.

Lo primero será crear nuestro array multi-dimensional, que podría ser algo así:

const a=[[1,2],[3,[4,5],6],[7],[8,9,10]];

Como vemos tenemos varias profundidades de arrays anidados. En el caso de tenerlo que aplanarlo a mano deberemos de tener muy en cuenta esa profundidad.

Lo siguiente será llamar al método .flat():

const a_flat = a.flat();

Hay que tener en cuenta que si no pasamos ninguna información al método .flat() este solo aplanará el primer nivel. Es por ello que si recorremos el array con Javascript:

for (x=0;x<a_flat.length;x++)
  console.log(a_flat[x]);

La salida por consola será la siguiente:

1
2
3
[4,5]
6
7
8
9
10

Donde podemos ver que no ha aplanado el cuarto elemento que vuelve a ser un array.

Es por ello que al método .flat() deberemos de pasarle por parámetro el nivel de profundidad sobre el que queremos aplanar. En este caso le vamos a pasar un nivel 2:

const a_flat = a.flat(2);

En este caso la salida por consola ya sería:

1
2
3
4
5
6
7
8
9
10

Aunque el método .flat() ya está implementado en la mayoría de los navegadores principales puede ser un problema si tienes que mantener alguna compatibilidad de navegadores.

En este caso es importante que le eches un ojo a la compatibilidad del método .flat() en Can I Use.

Data on support for the array-flat feature across the major browsers from caniuse.com

Y si no, siempre te quedará implementar un pollyfill como el siguiente:

function flattenDeep(a) {
   return a.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(a);

Espero que os sea útil el uso del método .flat() para aplanar arrays en Javascript. ¿En qué casos creéis que os sería útil?

Código Fuente

Descárgate el código fuente de Aplanar arrays en Javascript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios