Trois appels d'API qui rendent chacun une liste, un Array.map() qui produit un tableau par élément, un fichier découpé ligne par ligne puis mot par mot : le résultat est un tableau de tableaux, alors qu'une seule liste était attendue.
flat remonte ce contenu d'un niveau, sans boucle et sans accumulateur.
Définition
flat rend un nouveau tableau dans lequel les éléments qui sont eux-mêmes des tableaux ont été remplacés par leur contenu. Sans argument, un seul niveau est traité, et le tableau d'origine reste intact.
const parPage = [["a", "b"], ["c"], ["d", "e"]];
console.log(parPage.flat()); // [ 'a', 'b', 'c', 'd', 'e' ]
console.log(parPage.length); // 3, l'original n'a pas changé
const melange = ["seul", ["a", "b"]];
console.log(melange.flat()); // [ 'seul', 'a', 'b' ]Les éléments qui ne sont pas des tableaux traversent l'opération sans transformation, ce qui permet d'appeler flat sur une liste mixte sans précaution.
La profondeur
L'argument fixe le nombre de niveaux à remonter. Il vaut 1 par défaut, et Infinity aplatit tout, quelle que soit l'imbrication.
const profond = [1, [2, [3, [4]]]];
console.log(profond.flat()); // [ 1, 2, [ 3, [ 4 ] ] ]
console.log(profond.flat(2)); // [ 1, 2, 3, [ 4 ] ]
console.log(profond.flat(Infinity)); // [ 1, 2, 3, 4 ]Infinity est tentant, mais il efface une information : la structure. Sur des données dont vous ne maîtrisez pas la forme, aplatir tout transforme une hiérarchie en liste plate impossible à reconstituer. Précisez la profondeur que vous attendez vraiment.
flatMap, l'enchaînement le plus courant
Transformer puis aplatir d'un cran est si fréquent qu'une méthode combine les deux. flatMap équivaut à Array.map() suivi de flat(), en un seul parcours.
const lignes = ["fr en", "es de"];
console.log(lignes.map((l) => l.split(" "))); // [ [ 'fr', 'en' ], [ 'es', 'de' ] ]
console.log(lignes.flatMap((l) => l.split(" "))); // [ 'fr', 'en', 'es', 'de' ]La profondeur de flatMap est fixée à un niveau et ne se règle pas. Pour davantage, il faut revenir à map puis flat(n).
Questions fréquentes
flat modifie-t-il le tableau d'origine ?
Non, il en construit un nouveau. La copie reste toutefois de surface : les objets contenus sont les mêmes des deux côtés, et modifier une de leurs propriétés se voit dans les deux tableaux.
Que deviennent les trous dans un tableau ?
Ils disparaissent. Un tableau créé avec des virgules consécutives contient des cases jamais définies, et flat les supprime au passage : [1, , 3].flat() rend [1, 3]. C'est l'un des rares moyens propres de nettoyer ces trous, qui viennent presque toujours de new Array(n).
Comment fusionner plusieurs résultats d'API ?
En rassemblant les réponses dans un tableau, puis en appelant flat() une seule fois. Avec Promise et Promise.all, le résultat est justement un tableau de tableaux : const tout = (await Promise.all(appels)).flat(); donne la liste unique attendue.