Comment aplatir un tableau en JavaScript

Un guide pratique pour aplatir les tableaux JavaScript

ES2019a introduit deux nouvelles méthodes pour le prototype Array:flatetflatMap. Ils sont tous deux très utiles pour ce que nous voulons faire:aplatir un tableau.

Voyons comment ils fonctionnent.

Mais d'abord, un mot d'avertissement: seuls Firefox 62+, Chrome 69+, Edge 76+ et Safari 12+ prennent déjà en charge ces 2 méthodes, car elles sont assez récentes. Vérifier laprise en charge actuelle du navigateur, et rappelez-vous que vous pouvez utiliserBabelpour rétroporter votre code vers une version ES précédente, si vous devez prendre en charge des navigateurs plus anciens.

Si vous ne voulez pas vous occuper de Babel et que vous n'avez pas encore d'étape de construction, il peut être plus judicieux d'utiliser leflatten(),flattenDeep()etflattenDepth()fonctions fournies par Lodash.

Ce qui est cool avec Lodash, c'est que vous n'avez pas besoin d'importer toute la bibliothèque. Vous pouvez utiliser ces fonctions individuellement en utilisant ces packages:

Voici comment aplatir un tableau en utilisantlodash.flatten:

const flatten = require('lodash.flatten')

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

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

Parlons maintenant du natifflat()etflatMap()Méthodes JavaScript maintenant.

flat()est une nouvelle méthode d'instance de tableau qui peut créer un tableau unidimensionnel à partir d'un tableau multidimensionnel.

Exemple:

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

Par défaut, il ne «flatte» que jusqu'à un niveau.

Vous pouvez ajouter un paramètre àflat()pour définir le nombre de niveaux sur lesquels vous souhaitez aplanir le tableau.

Réglez-le surInfinitypour avoir des niveaux illimités:

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

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

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

Si vous connaissez le JavaScriptmap()méthode d'un tableau, vous savez qu'en l'utilisant, vous pouvez exécuter une fonction sur chaque élément d'un tableau.

Sinon, vérifiez monTutoriel JavaScript map ().

flatMap()est une nouvelle méthode de prototype Array qui combineflat()avecmap(). C'est utile lors de l'appel d'une fonction qui renvoie un tableau dans lemap()callback, mais vous voulez que votre tableau résultant soit plat:

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

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

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: