Innovations JavaScript ES2020 avec des exemples simples

Nous vous présentons la traduction de l' article du blog de Carlos Caballero sur Medium.com. Plus tôt, nous avons publié des documents de cet auteur sur les fonctions d'ES10 , qui sont apparus en 2019.


Photo AbsolutVision avec Unsplash

Présentation

ES2020 est une version d'ECMAScript, pertinente pour 2020. Il n'y a pas beaucoup d'innovations par rapport à ES6, sorti en 2015, mais il reste encore quelques fonctionnalités utiles.

Dans cet article, les nouvelles fonctionnalités ES2020 sont décrites à l'aide d'exemples de code simples. Vous pouvez les comprendre rapidement sans explications compliquées.

Bien sûr, pour bien comprendre les exemples présentés, vous devez avoir une connaissance de base de JavaScript.

Innovations JavaScript dans ES2020:

• Méthode String.prototype.matchAll;
• importation dynamique ();
• type BigInt;
• method Promise.allSettled;
• globalThis object
• mécanisme pour exécuter une boucle for-in;
• Déclaration de chaînage facultative
• Opérateur coalescent nul.

String.protype.matchAll, méthode

Lors de la mise en correspondance d'une chaîne avec une expression régulière, la méthode matchAll() renvoie un itérateur sur tous les résultats, y compris les groupes de capture.

Importation dynamique ()

L' import() dynamique import() renvoie une promesse pour l'objet d'espace de noms du module demandé. Par conséquent, les importations peuvent désormais être affectées à une variable à l'aide de la syntaxe async/await .

BigInt - entiers de longueur arbitraire

BigInt est le septième type primitif, un entier de longueur arbitraire. Les variables de ce type peuvent désormais comprendre 253 caractères numériques; elles ne sont pas limitées à la valeur numérique 9007199254740992 .

Promise.allSettled, méthode

La méthode Promise.allSettled renvoie une promesse avec un tableau d'états de promesse, mais uniquement une fois toutes les promesses d'origine terminées. Nous disons qu'une promesse est remplie si elle n'est pas en attente, c'est-à-dire qu'elle est soit terminée, soit rejetée.

Global standardisé Cet objet

Cet objet global n'a pas été standardisé avant l'avènement de l'ES10. Dans le code fini, il devait être amené à la norme pour diverses plates-formes à lui seul, prescrivant quelque chose de lourd, comme dans l'exemple ci-dessous.

Mécanisme de boucle For-in

La norme ECMA-262 laisse l'ordre de traitement de la construction for (a in b) presque complètement vague, mais les moteurs réels essaient toujours d'être cohérents dans certains cas.

Les tentatives répétées pour parvenir à un accord sur la détermination de l'ordre exact du cycle de for-in ont échoué. Cela est dû en partie au fait que tous les moteurs ont leur propre application spécifique, ce qui est le résultat de beaucoup de travail que je ne voulais absolument pas réviser.

En conséquence, les développeurs de divers moteurs se sont mis d'accord sur la façon dont l'itération des propriétés devrait se produire dans la construction for (a in b) afin que son comportement puisse être normalisé.

Opérateur coalescent nul

Habituellement, lors de l'accès à une propriété, il est conseillé de fournir une valeur par défaut si le résultat de cet appel est nul ou non défini. Maintenant, une façon typique d'exprimer cette intention en JavaScript est d'utiliser le || .



Cette méthode fonctionne bien pour les valeurs régulières nulles ou non définies, mais il existe un certain nombre de fausses valeurs qui peuvent donner des résultats inattendus.

L'opérateur Nullish Coalescing (l'opérateur de jointure avec une valeur indéfinie) est conçu pour gérer ces cas avec plus de succès et est utilisé pour vérifier l'égalité avec les valeurs nulles (nulles ou non définies). Si l'expression sur le côté gauche de l'opérateur ?? évalué comme non défini ou nul, son côté droit est retourné en conséquence.

Opérateur de chaînage en option

Lorsqu'il s'agit d'une propriété située profondément dans la structure arborescente, il est souvent nécessaire d'ajouter des vérifications de l'existence de nœuds intermédiaires.

L'opérateur de chaînage facultatif permet aux développeurs de gérer de nombreux cas similaires sans répéter et / ou affecter des résultats intermédiaires à des variables temporaires.



Il convient également de noter que de nombreuses API renvoient un object ou null/undefined , et vous devrez peut-être extraire une propriété du résultat uniquement lorsqu'elle n'est pas nulle.



L'opérateur de jointure avec une valeur non définie est souvent applicable dans les cas où l'absence de résultat ne doit pas être exprimée comme non définie .

Conclusion

JavaScript est un langage vivant, ce qui a un effet très bénéfique sur le développement Web. Nous assistons à son développement dynamique depuis l'avènement d'ES6 en 2015, et dans cet article, nous mettons en évidence les capacités de la version ES2020.

Toutes ces innovations ne seront probablement pas nécessaires pour créer votre application Web. Mais tous vous permettent de vous passer de trucs ingénieux ou d'écrire beaucoup de code là où c'était nécessaire auparavant.