Nouveauté Javascript ES2019

Javascript est maintenant un language en perpétuelle évolution. Connaissez-vous les dernières nouveautés Javascript ES2019? De nouveaux opérateurs sont maintenant disponibles, donc si vous n’avez jamais utilisé flat(), flatMap() ou fromEntries() cet article vous permettra d’apprendre les nouvelles fonctionnalités ES9.

Aller on rentre direct dans le vif du sujet avec les méthodes de traitement de structures de données et voyons comment les nouvelles fonctionnalités ES9 peuvent nous aider!

La méthode flat() pour les Arrays

On commence avec le traitement des tableaux.

Les méthodes flat() et flatMap() vous permettent de concaténer des tableaux multidimensionnels dans un seul tableau. Il s’agit de la définition « d’aplatir ». Cela rendra notre structure de données plus facile à utiliser.

Jetez un coup d’œil au premier exemple pour comprendre le fonctionnement de la méthode flat() :

[[1,], [2, 3], [4, 5]].flat();
// output: [1, 2, 3, 4, 5]

Vous avez compris ce qui se passe avec la méthode .flat()? Au début, nous avions 3 tableaux dans notre tableau principal et chaque tableau contenait des chaînes de type String. Le premier sous tableau comprenait également un élément vide afin que nous puissions voir les effets flat() avec les elements non définis . Résultat: nous avons créé un tableau unique contenant 5 éléments. En d’autres termes, nous avons réduit une dimension du tableau et supprimé les emplacements vides.

Maintentant nous allons continuer à tester cette méthode en changant légèrement les tableaux de données:

[[1,], [[2, 3]], [4, 5]].flat();
// output: [1, Array(2), 4, 5]

Comme vous pouvez le voir ci-dessus, nous n’avons pas obtenu de tableau à une dimension comme dans l’exemple précédent.. pourquoi? Permettez-moi de vous présenter un paramètre facultatif pour la méthode flat() , « depth », indiquant la profondeur à laquelle un tableau imbriqué sera aplati. Par défaut, l’utilisation de flat() réduira une seule dimension (paramètre de profondeur défini sur 1).

Donc si nous utilisons se paramètre nous pouvons alors aplatir complètement notre tableau multidimensionnel.

[[1,], [[2, 3]], [4, 5]].flat(2);
// output: [1, 2, 3, 4, 5]

Avec l’argument optionnel défini à 2, nous avons atteint notre objectif. Nous avons créé un nouveau tableau unique qui contient les 5 maintenant bien à plat.

La méthode flatMap()

Après l’introduction à la méthode .flat(), nous allons regarder de plus près la méthode flatMap() . Pour être bref, cette fonction fonctionne comme une combinaison des méthodes .flat() et .map() combinée. Cela nous permet de transformer des données dans un tableau et de concaténer des tableaux multidimensionnels en un tableau unidimensionnel en une seule opération.

Les utilisateurs de RxJs verront là un petit clin d’oeil à l’opérateur .flatMap() qui existe aussi dans cette librairie.

Reprenons donc nos petits exemples pour comprendre le comportement de .flatMap() et décortiquons le comportement de cet méthode:

const data = [[1,], [2, 3], [4, 5]];

array.flatMap((element, index) => index + ': ' + element);
// output:  ["0: 1", "1: 2,3", "2: 4,5"]

array.map((element, index) => index + ': ' + element);
// output:  ["0: 1", "1: 2,3", "2: 4,5"]

On constate bien que les comportements de .flatMap() et .map() sont identiques, mais analysons le deuxième cas pour comprendre la différence entre flatMap() et map().

Dans l’exemple actuel, nous voulons mélanger un index avec des éléments de tableau. Par conséquent, nous allons mapper chacun des éléments vers un nouveau tableau qui stocke les index et les données d’élément. Comparons le résultat de flatMap() et map() :

const data = [[1,], [2, 3], [4, 5]];

data.flatMap((element, index) => [index, element]);
// output: [0, Array(1), 1, Array(2), 2, Array(2)]

data.map(el => ['check: ' + el]);
// output: [Array(2), Array(2), Array(2)]

Maintenant vous pouvez voir la différence! La méthode .flatMap() vous permet de diminuer un niveau de profondeur pour l’objet de résultat.

Cependant, il n’est pas possible d’utiliser un paramètre optionnel comme avec .flat() pour spécifier la profondeur à laquelle un tableau imbriqué sera aplati. Alors, comment pouvons-nous manipuler ce niveau manuellement? Appliquez simplement la méthode .flat() sur la sortie:

const data = [[1,], [2, 3], [4, 5]];

data.flatMap((element, index) => [index, element]).flat();
// output: [0, 1, 1, 2, 3, 2, 4, 5]

Voilà pour les méthodes .flat() et .flatMap(). Passons maintentant à la suite!

Les opérateurs .trim()

Dans le jeu des nouvelles fonctionnalités ES2019, nous pouvons trouver une méthode pour travailler avec les espaces. La précédente fonction normalisée permettait de supprimer les espaces de la chaîne était publiée dans ES5. La méthode .trim() supprime les espaces des deux côtés d’une variable de chaîne, alors que nous pouvons maintenant couper d’un côté spécifique (début à la fin de la chaîne), ce qui nous conduit à trimStart() et trimEnd().

('   Hello  Javascript! ').trimStart();
// output: "Hello  Javascript! "

('   Hello  Javascript! ').trimEnd();
// output: "   Hello  Javascript!"

Vous pouvez aussi utiliser .trimLeft() et .trimRight() qui ont le même effet.

Créer des objets à partir d’entrées

Ensuite vous avez la méthode fromEntries() qui transforme une liste de paires clé-valeur en un nouvel objet dont les propriétés proviennent de ces entrées. Cette méthode prend un paramètre appelé iterable. C’est un objet implémentant le protocole itérable que nous verrons dans un prochain article dédié aux objets Iterables.

Donc créons un objet à partir d’un tableau multidimensionnel:

const array = [[1, 2],[3, 4]];

Object.fromEntries(array);
// output: {1: 2, 3: 4}

On constate que nous avons créer un object avec deux clé: « 1 et 3 ». Chaque clé a un ensemble de valeurs provenant d’un tableau initial avec des paires clé-valeur.

Très pratique non?!

Conclusion

En résumé, dans cet article, je vous ai montré les principales nouveautés publiées dans la version finale de ECMAScript2019. J’ai analysé des tableaux aplatissants (méthodes flat() , flatMap() ), des moyens de réduire les espaces des variables String et un processus de création d’objets à partir d’entrées.

J’espère que cela vous sera utile. Commencez à utiliser ces méthodes dans votre code, mais n’oubliez pas de vérifier la compatibilité du navigateur pour les fonctionnalités que vous souhaitez appliquer.

Vous retrouverez également tous les autres articles traitant du même sujet dans la section Programmation.

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.