Cómo aplanar una matriz en JavaScript

Una guía práctica para acoplar matrices de JavaScript

ES2019introdujo dos nuevos métodos para el prototipo Array:flatyflatMap. Ambos son muy útiles para lo que queremos hacer:aplanar una matriz.

Veamos como funcionan.

Pero primero, una advertencia: solo Firefox 62+, Chrome 69+, Edge 76+ y Safari 12+ ya admiten esos 2 métodos, ya que son bastante recientes. Comprobar lasoporte de navegador actualy recuerda que puedes usarBabelpara respaldar su código a una versión ES anterior, si necesita admitir navegadores más antiguos.

Si no quiere tratar con Babel y aún no tiene un paso de compilación, podría tener más sentido usar elflatten(),flattenDeep()yflattenDepth()funciones proporcionadas por Lodash.

Lo bueno de Lodash es que no es necesario importar toda la biblioteca. Puede usar esas funciones individualmente usando esos paquetes:

Aquí se explica cómo aplanar una matriz usandolodash.flatten:

const flatten = require('lodash.flatten')

const animals = [‘Dog’, [‘Sheep’, ‘Wolf’]]

flatten(animals) //[‘Dog’, ‘Sheep’, ‘Wolf’]

Hablemos ahora del nativoflat()yflatMap()Métodos JavaScript ahora.

flat()es un nuevo método de instancia de matriz que puede crear una matriz unidimensional a partir de una matriz multidimensional.

Ejemplo:

['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]

De forma predeterminada, solo "planos" hasta un nivel.

Puede agregar un parámetro aflat()para establecer el número de niveles a los que desea aplanar la matriz.

Ponlo enInfinitytener niveles ilimitados:

['Dog', ['Sheep', ['Wolf']]].flat()
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]

['Dog', ['Sheep', ['Wolf']]].flat(2)
//[ 'Dog', 'Sheep', 'Wolf' ]

['Dog', ['Sheep', ['Wolf']]].flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]

Si está familiarizado con JavaScriptmap()método de una matriz, usted sabe que al usarlo puede ejecutar una función en cada elemento de una matriz.

Si no, revisa miTutorial de JavaScript map ().

flatMap()es un nuevo método prototipo Array que combinaflat()conmap(). Es útil cuando se llama a una función que devuelve una matriz en elmap()devolución de llamada, pero desea que su matriz resultante sea plana:

['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]

['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]

Más tutoriales de js: