Aplanar arrays en Javascript

12/Feb/2021 JavaScript Deja un comentario
Artículos Programación en Javascript

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?

Vídeos sobre Javascript


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.