Comment réduire la profondeur d’un tableau avec Array.flat

Pour une raison inconnue, vous avez un tableau rempli de sous-tableaux et ça ne vous arrange pas du tout.
Vous voudriez transformer ce tableau pour réduire sa profondeur ?
Alors cet article est fait pour vous !

Méthode n°1: Array.flat

Tout d’abord regardons ce que nous dit la documentation:

La méthode flat() permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.

La documentation

Ça veut dire que cette méthode renvoi un tableau « aplani » à partir d’un tableau source et d’une profondeur donnée (facultative, par défaut 1).

Prenons un exemple, voici un tableau avec une profondeur de 2:

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

Appliquons la méthode Array.flat dessus avec et sans paramètre:

const table_with_one_depth = table.flat();

console.log(table_with_one_depth); // [1, 2, 3, 4, 5, [6, 7], 8, 9]

const table_with_no_depth = table.flat(2);

console.log(table_with_no_depth); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

On voit bien que sans paramètre, la méthode réduit la profondeur de 1, si on lui passe un paramètre numérique, la profondeur sera réduite du montant passé en paramètre.


Note importante: Array.flat supprimera également les « trous » dans vos tableaux.
Ainsi [1, 2, , 3, 4] deviendra [1, 2, 3, 4].

Méthode n°2: Array.flatMap

Réduire la profondeur de votre tableau ne suffit pas ?
Vous souhaitez également appliquer une transformation sur chaque élément parcouru ?
Alors Array.flatMap est fait pour vous !

Cette méthode est tout simplement la combinaison entre Array.map et Array.flat avec de meilleurs performances.

/ ! \ Cependant ici la profondeur à réduire ne peux pas être choisi, elle est de 1 / ! \

Voici un exemple pour mieux comprendre:

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

const new_table = table.flatMap( e => e * 2);

console.log(new_table);  [2, 4, 6, NaN, 18]

Pourquoi obtient-on un Nan ?

Array.flatMap parcours chaque élément et applique une transformation, ainsi, arrivé à sa 4ème occurrence, e vaut [4, 5, [6, 7], 8] et si on le multiplie par 2 on obtiens Nan.

Array.flatMap est pratique pour les tableaux sans profondeur, mais on peut l’utiliser de manière récursive pour traiter un tableau à profondeur:

const recursiveFlatMap = (a) => {
    return a.flatMap( elem => typeof elem === "object" ? recursiveFlatMap(elem) : elem * 2);
}

const table = recursiveFlatMap( [4, 5, [6, 7], 8]);

console.log(table); [8, 10, 12, 14, 16]

Voilà, on a bien aplani notre tableau et appliqué notre modification sur chaque élément !


Sources


Articles récents

Comment réduire la profondeur d’un tableau avec Array.flat

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour en haut