Voici des exemples de tout ce qui est nouveau dans ECMAScript 2016, 2017 et 2018

par rajaraodv

Il est difficile de suivre les nouveautés en JavaScript (ECMAScript). Et il est encore plus difficile de trouver des exemples de code utiles.

Donc, dans cet article, je vais couvrir les 18 fonctionnalités répertoriées dans les propositions finies du TC39 qui ont été ajoutées dans ES2016, ES2017 et ES2018 (projet final) et les montrer avec des exemples utiles.

Ceci est un article assez long mais devrait être facile à lire. Considérez cela comme « une lecture frénétique de Netflix. »À la fin de cela, je vous promets que vous aurez une tonne de connaissances sur toutes ces fonctionnalités.

OK, passons en revue un par un.

Tableau.prototype.includes

includes est une méthode d’instance simple sur le tableau et permet de trouver facilement si un élément se trouve dans le tableau (y compris NaN contrairement à indexOf).

ECMAScript 2016 ou ES7—Array.prototype.comprend()

Anecdote: les gens de la spécification JavaScript voulaient le nommer contains, mais cela était apparemment déjà utilisé par Mootools, ils ont donc utilisé includes.

Exponentiation infix operator

Les opérations mathématiques telles que l’addition et la soustraction ont des opérateurs infixés tels que + et -, respectivement. Semblable à eux, l’opérateur infixe ** est couramment utilisé pour le fonctionnement de l’exposant. Dans ECMAScript 2016, le ** a été introduit au lieu de Math.pow.

ECMAScript 2016 ou ES7 — ** Opérateur infixe exposant

Objet.valeurs()

Object.values() est une nouvelle fonction similaire à Object.keys() mais renvoie toutes les valeurs des propres propriétés de l’objet à l’exclusion de toute valeur de la chaîne prototypique.

ECMAScript 2017 (ES8) — Objet.valeurs()

Objet.entrées()

Object.entries() est lié à Object.keys, mais au lieu de renvoyer uniquement des clés, il renvoie à la fois des clés et des valeurs à la manière d’un tableau. Cela rend très simple de faire des choses comme l’utilisation d’objets dans des boucles ou la conversion d’objets en cartes.

Exemple 1:

ECMAScript 2017 (ES8) – Utilisation d’un objet.entrées() dans les boucles

Exemple 2:

ECMAScript 2017 (ES8) – Utilisation d’un objet.entries() pour convertir l’objet en Mappage

Remplissage de chaîne

Deux méthodes d’instance ont été ajoutées à String — String.prototype.padStart et String.prototype.padEnd – qui permettent d’ajouter / ajouter une chaîne vide ou une autre chaîne au début ou à la fin de la chaîne d’origine.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

Cela est utile lorsque nous voulons aligner les choses dans des scénarios tels que le joli écran d’impression ou l’impression de terminal.

3.1 Exemple de padStart:

Dans l’exemple ci-dessous, nous avons une liste de nombres de longueurs variables. Nous voulons ajouter « 0 » au début pour que tous les éléments aient la même longueur de 10 chiffres à des fins d’affichage. Nous pouvons utiliser padStart(10, '0') pour y parvenir facilement.

ECMAScript 2017 – Exemple de démarrage PAD

3.2 Exemple de padEnd:

padEnd c’est vraiment pratique lorsque nous imprimons plusieurs articles de longueurs variables et que nous voulons les aligner correctement.

L’exemple ci-dessous est un bon exemple réaliste de la façon dont padEnd, padStart et Object.entries se réunissent tous pour produire une belle sortie.

ECMAScript 2017 – padEnd, padStart et Objet.Exemple d’entrées

3.3 ⚠️ padStart et padEnd sur les emojis et autres caractères à double octet

Les emojis et autres caractères à double octet sont représentés en utilisant plusieurs octets d’unicode. padStart et padEnd pourraient donc ne pas fonctionner comme prévu!️️

Par exemple: Disons que nous essayons de tamponner la chaîne heart pour atteindre 10 caractères avec l’emoji ❤️. Le résultat ressemblera à ci-dessous:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

En effet, ❤️ fait 2 points de code ('\u2764\uFE0F')! Le mot heart lui-même est de 5 caractères, il ne nous reste donc qu’un total de 5 caractères à remplir. Donc, ce qui se passe, c’est que JS tamponne deux cœurs en utilisant '\u2764\uFE0F' et cela produit ❤️❤️. Pour le dernier, il utilise simplement le premier octet du cœur \u2764 qui produit ❤

Donc on se retrouve avec: ❤️❤️❤heart

PS: Vous pouvez utiliser ce lien pour consulter les conversions de caractères unicode.

Objet.getOwnPropertyDescriptors

Cette méthode renvoie tous les détails (y compris les méthodes getter get et setter set) pour toutes les propriétés d’un objet donné. La principale motivation pour ajouter ceci est de permettre la copie / clonage superficiel d’un objet dans un autre objet qui copie également les fonctions getter et setter par opposition à Object.assign.

Objet.attribuez des copies superficielles de tous les détails à l’exception des fonctions getter et setter de l’objet source d’origine.

L’exemple ci-dessous montre la différence entre Object.assign et Object.getOwnPropertyDescriptors avec Object.defineProperties pour copier un objet d’origine Car dans un nouvel objet ElectricCar. Vous verrez qu’en utilisant Object.getOwnPropertyDescriptors, les fonctions getter et setter discount sont également copiées dans l’objet cible.

AVANT…

Avant D’utiliser l’objet.attribuer

APRÈS…

ECMAScript 2017 (ES8) — Objet.getOwnPropertyDescriptors

Ajouter des virgules de fin dans les paramètres de fonction

Il s’agit d’une mise à jour mineure qui nous permet d’avoir des virgules de fin après le dernier paramètre de fonction. Pourquoi? Pour aider avec des outils comme git blame pour s’assurer que seuls les nouveaux développeurs sont blâmés.

L’exemple ci-dessous montre le problème et la solution.

ECMAScript 2017 (ES 8) – Virgule de fin dans le paramètre de fonction

Remarque: Vous pouvez également appeler des fonctions avec des virgules de fin!

Async/Await

C’est de loin la fonctionnalité la plus importante et la plus utile si vous me le demandez. Les fonctions asynchrones nous permettent de ne pas gérer l’enfer du rappel et de rendre le code entier simple.

Le mot clé async indique au compilateur JavaScript de traiter la fonction différemment. Le compilateur s’arrête chaque fois qu’il atteint le mot clé await dans cette fonction. Il suppose que l’expression après await renvoie une promesse et attend que la promesse soit résolue ou rejetée avant de continuer.

Dans l’exemple ci-dessous, la fonction getAmount appelle deux fonctions asynchrones getUser et getBankBalance. Nous pouvons le faire avec promesse, mais l’utilisation de async await est plus élégante et simple.

ECMAScript 2017 (ES 8) – L’asynchronisation attend l’exemple de base

6.1 Les fonctions asynchrones elles-mêmes renvoient une promesse.

Si vous attendez le résultat d’une fonction asynchrone, vous devez utiliser la syntaxe then de Promise pour capturer son résultat.

Dans l’exemple suivant, nous voulons enregistrer le résultat en utilisant console.log mais pas dans le doubleAndAdd. Nous voulons donc attendre et utiliser la syntaxe then pour passer le résultat à console.log.

ECMAScript 2017 (ES 8) – L’asynchronisation s’attend à une promesse de retour

6.2 Appeler async / await en parallèle

Dans l’exemple précédent, nous appelons await deux fois, mais à chaque fois nous attendons une seconde (total de 2 secondes). Au lieu de cela, nous pouvons le paralléliser puisque a et b ne dépendent pas l’un de l’autre en utilisant Promise.all.

ECMAScript 2017 (ES 8) – Utilisation de la promesse.tout pour paralléliser asynchrone / attendre

6.3 Gestion des erreurs fonctions asynchrones /d’attente

Il existe différentes façons de gérer les erreurs lors de l’utilisation de l’attente asynchrone.

Option 1 – Utilisez try catch dans la fonction

ECMAScript 2017 – Utilisez try catch dans la fonction asynchrone / attente

Option 2 – Attrapez chaque expression d’attente

Puisque chaque expression await renvoie une promesse, vous pouvez attraper des erreurs sur chaque ligne comme indiqué ci-dessous.

ECMAScript 2017 — Utilisez try catch every await expression

Option 3 – Catch the entire async-await function

ECMAScript 2017 – Catch the entire async/await function à la fin

ECMAScript est actuellement en version finale et sortira en juin ou juillet 2018. Toutes les fonctionnalités couvertes ci-dessous sont au stade 4 et feront partie d’ECMAScript 2018.

1. Mémoire partagée et atomiques

C’est une fonctionnalité énorme et assez avancée et constitue une amélioration essentielle des moteurs JS.

L’idée principale est d’apporter une sorte de fonctionnalité multi-threading à JavaScript afin que les développeurs JS puissent écrire des programmes simultanés hautes performances à l’avenir en permettant de gérer eux-mêmes la mémoire au lieu de laisser le moteur JS gérer la mémoire.

Ceci est fait par un nouveau type d’objet global appelé SharedArrayBuffer qui stocke essentiellement des données dans un espace mémoire partagé. Ces données peuvent donc être partagées entre le thread JS principal et les threads de travail Web.

Jusqu’à présent, si nous voulions partager des données entre le thread JS principal et les web-workers, nous devions copier les données et les envoyer à l’autre thread en utilisant postMessage. Plus maintenant !

Vous utilisez simplement SharedArrayBuffer et les données sont instantanément accessibles à la fois par le thread principal et par plusieurs threads de travail Web.

Mais le partage de mémoire entre les threads peut provoquer des conditions de concurrence. Pour éviter les conditions de concurrence, l’objet global « Atomics » est introduit. Atomics fournit différentes méthodes pour verrouiller la mémoire partagée lorsqu’un thread utilise ses données. Il fournit également des méthodes pour mettre à jour ces données dans cette mémoire partagée en toute sécurité.

La recommandation est d’utiliser cette fonctionnalité via une bibliothèque, mais pour le moment, il n’y a pas de bibliothèques construites au-dessus de cette fonctionnalité.

Si vous êtes intéressé, je vous recommande de lire:

  1. Des Travailleurs à la Mémoire partagée – lucasfcosta
  2. Une intro de dessin animé pour SharedArrayBuffers – Lin Clark
  3. Mémoire partagée et atomiques – Dr. Axel Rauschmayer

2. Restriction littérale de modèle étiqueté supprimée

Tout d’abord, nous devons clarifier ce qu’est un « littéral de modèle étiqueté » afin de mieux comprendre cette fonctionnalité.

Dans ES2015+, il existe une fonctionnalité appelée littéral de modèle balisé qui permet aux développeurs de personnaliser la façon dont les chaînes sont interpolées. Par exemple, de la manière standard, les chaînes sont interpolées comme ci-dessous…

Dans le littéral balisé, vous pouvez écrire une fonction pour recevoir les parties codées en dur du littéral de chaîne, par exemple , et les variables de remplacement, par exemple , en tant que paramètres dans une fonction personnalisée (par exemple greet), et renvoyer ce que vous voulez de cette fonction personnalisée.

L’exemple ci-dessous montre que notre fonction « Tag » personnalisée greet ajoute l’heure de la journée comme « Bonjour! » »Bonjour », et ainsi de suite en fonction de l’heure de la journée au littéral de la chaîne et renvoie une chaîne personnalisée.

Exemple de fonction de balise qui montre une interpolation de chaîne personnalisée

Maintenant que nous avons discuté de ce que sont les fonctions « étiquetées », beaucoup de gens veulent utiliser cette fonctionnalité dans différents domaines, comme dans Terminal pour les commandes et les requêtes HTTP pour composer des URI, etc.

️️Le problème avec le littéral de chaîne étiqueté

Donc, si vous avez une fonction étiquetée qui utilise en interne les règles d’un autre domaine (comme les règles du terminal), qui peut avoir besoin d’utiliser \ubla123abla qui ne ressemble pas à \u0049 ou \u {@F804}, alors vous obtiendrez une erreur de syntaxe.

Dans ES2018, les règles sont assouplies pour autoriser de tels caractères d’échappement apparemment invalides tant que la fonction Taguée renvoie les valeurs d’un objet avec une propriété « cuite » (où les caractères invalides sont « non définis »), puis une propriété « brute » (avec ce que vous voulez).

Drapeau « dotall » pour l’expression régulière

Actuellement en expression régulière, bien que le point(« . ») est censé correspondre à un seul caractère, il ne correspond pas aux nouveaux caractères de ligne comme \n \r \f etc.

Par exemple:

//Before/first.second/.test('first\nsecond'); //false

Cette amélioration permet à l’opérateur de point de faire correspondre n’importe quel caractère. Afin de s’assurer que cela ne casse rien, nous devons utiliser l’indicateur \s lorsque nous créons l’expression régulière pour que cela fonctionne.

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

Voici l’API globale du document de proposition:

ECMAScript 2018 – La fonctionnalité Regex dotAll permet de faire correspondre even\n via « . »via /s flag

Capture de groupe nommé RegExp ?

Cette amélioration apporte une fonctionnalité d’expression rationnelle utile d’autres langages comme Python, Java et ainsi de suite appelés « Groupes nommés. » Cette fonctionnalité permet aux développeurs qui écrivent une expression rationnelle de fournir des noms (identifiants) au format (?<name>...) pour différentes parties du groupe dans l’expression rationnelle. Ils peuvent ensuite utiliser ce nom pour saisir facilement le groupe dont ils ont besoin.

4.1 Exemple de groupe nommé de base

ECMAScript 2018 — Exemple de groupes nommés Regex

4.2 En utilisant des groupes nommés à l’intérieur de l’expression rationnelle elle-même

, nous pouvons utiliser le format \k<group name> pour référencer le groupe dans l’expression rationnelle elle-même. L’exemple suivant montre comment cela fonctionne.

ECMAScript 2018 — Les groupes nommés par Regex renvoient au nom du groupe via \k <>

4.3 Utilisation de groupes nommés dans une chaîne.prototype.replace

La fonctionnalité de groupe nommé est maintenant intégrée à la méthode d’instance replace de String. Nous pouvons donc facilement échanger des mots dans la chaîne.

Par exemple, remplacez « Prénom, nom » par « Nom, prénom ».

ECMAScript 2018 – L’utilisation de la fonction groupes nommés de RegEx dans la fonction de remplacement

Propriétés Rest pour les objets

Opérateur Rest ... (trois points) nous permet d’extraire des propriétés d’objet qui ne sont pas déjà extraites.

5.1 Vous pouvez utiliser rest pour aider à extraire uniquement les propriétés souhaitées

ECMAScript 2018 – Destructuration d’objets via rest

5.2 Mieux encore, vous pouvez supprimer les éléments indésirables! ??

ECMAScript 2018 – Destructuration d’objets via rest

Propriétés de propagation pour les objets

Les propriétés de propagation ressemblent également aux propriétés rest avec trois points ... mais la différence est que vous utilisez spread pour créer (restructurer) de nouveaux objets.

Astuce: l’opérateur spread est utilisé dans le côté droit du signe égal. Les autres sont utilisés dans le côté gauche du signe égal.

ECMAScript 2018 – Restructuration d’objet via spread

Assertions de Lookbehind d’expression régulière

Il s’agit d’une amélioration de l’expression régulière qui nous permet de nous assurer qu’une chaîne existe immédiatement * avant * une autre chaîne.

Vous pouvez maintenant utiliser un groupe (?<=…) (point d’interrogation, inférieur à, égal à) pour rechercher une assertion positive.

Assertion positive: Disons que nous voulons nous assurer que le signe # existe avant le mot winning (c’est-à-dire: #winning) et que l’expression régulière ne renvoie que la chaîne « gagnante ». Voici comment vous l’écririez.

ECMAScript 2018 — (?<=…) for positive assertion

Assertion négative: Disons que nous voulons extraire des nombres de lignes qui ont des signes € et non des signes $ avant ces nombres.

ECMAScript 2018 —(?<!Escapes) pour les assertions négatives

Échappements de propriété Unicode RegExp

Il n’était pas facile d’écrire des expressions régulières pour faire correspondre divers caractères unicode. Des choses comme \w , \W , \d etc ne correspondent qu’aux caractères et aux chiffres anglais. Mais qu’en est-il des chiffres dans d’autres langues comme l’Hindi, le grec, etc.?

C’est là que les échappements de propriété Unicode entrent en jeu. Il s’avère qu’Unicode ajoute des propriétés de métadonnées pour chaque symbole (caractère) et l’utilise pour regrouper ou caractériser divers symboles.

Par exemple, la base de données Unicode regroupe tous les caractères hindi (ििन्ीी) sous une propriété appelée Script avec une valeur Devanagari et une autre propriété appelée Script_Extensions avec la même valeur Devanagari. Nous pouvons donc rechercher Script=Devanagari et obtenir tous les caractères hindi.

Devanagari peut être utilisé pour diverses langues indiennes comme le Marathi, l’Hindi, le sanskrit, etc.

À partir d’ECMAScript 2018, nous pouvons utiliser \p pour échapper les caractères avec {Script=Devanagari} pour faire correspondre tous ces caractères indiens. Autrement dit, nous pouvons utiliser: \p{Script=Devanagari} dans l’expression régulière pour faire correspondre tous les caractères Devanagari.

ECMAScript 2018 – affichage \p
//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

De même, la base de données Unicode regroupe tous les caractères grecs sous la propriété Script_Extensions (et Script) avec la valeur Greek. Nous pouvons donc rechercher tous les caractères grecs en utilisant Script_Extensions=Greek ou Script=Greek.

C’est-à-dire que nous pouvons utiliser: \p{Script=Greek} dans l’expression régulière pour faire correspondre tous les caractères grecs.

ECMAScript 2018 – affichage \p
//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

De plus, la base de données Unicode stocke différents types d’Emojis sous les propriétés booléennes Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, et Emoji_Modifier_Base avec les valeurs de propriété comme `true’. Nous pouvons donc rechercher tous les Emojis en sélectionnant simplement Emoji pour être vrai.

C’est-à-dire que nous pouvons utiliser: \p{Emoji}, \Emoji_Modifier et ainsi de suite pour faire correspondre différents types d’Emojis.

L’exemple suivant rendra tout cela clair.

ECMAScript 2018 – montrant comment \p peut être utilisé pour divers emojis

Enfin, nous pouvons utiliser le caractère d’échappement « P » (\P) au lieu du petit p (\p), pour annuler les correspondances.

  1. Proposition ECMAScript 2018

Promesse.prototype.enfin()

finally() est une nouvelle méthode d’instance qui a été ajoutée à Promise. L’idée principale est de permettre d’exécuter un rappel après resolve ou reject pour aider à nettoyer les choses. Le rappel finally est appelé sans aucune valeur et est toujours exécuté quoi qu’il arrive.

Examinons divers cas.

ECMAScript 2018 – finally() dans le cas de résolution
ECMAScript 2018 – finally() en cas de rejet
ECMAScript 2018 – finally() par erreur lancée à partir du cas de promesse
ECMAScript 2018 – Erreur levée de l’intérieur du cas ** catch**

Itération asynchrone

C’est une fonctionnalité *extrêmement* utile. Fondamentalement, cela nous permet de créer facilement des boucles de code asynchrone!

Cette fonctionnalité ajoute une nouvelle boucle « for-await-of » qui nous permet d’appeler des fonctions asynchrones qui renvoient des promesses (ou des tableaux avec un tas de promesses) dans une boucle. Ce qui est cool, c’est que la boucle attend que chaque promesse soit résolue avant de passer à la boucle suivante.

ECMAScript 2018 – Itérateur asynchrone via for-await-of

C’est à peu près tout!

Si cela était utile, veuillez cliquer sur le clap? bouton ci-dessous quelques fois pour montrer votre soutien! ⬇⬇⬇ ??

Mes Autres Articles

  1. Découvrez ces trucs et astuces utiles d’ECMAScript 2015 (ES6)
  2. 5 Les « Mauvaises » Parties JavaScript Qui Sont Corrigées Dans ES6
  3. La « Classe » Dans ES6 Est-Elle La Nouvelle « Mauvaise » Partie?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.