8 nouvelles fonctionnalités du langage JavaScript dans ES12

La spécification du langage JavaScript, également appelée ECMAScript ou ES, est un document vivant, modifié chaque année en réponse à l’évolution des besoins. Alors que JavaScript a commencé comme un langage de script, l’aperçu de la spécification ECMAScript note que le langage “est maintenant utilisé pour l’éventail complet des tâches de programmation dans de nombreux environnements et échelles différents”. langage de programmation.

Avec la prochaine version d’ECMAScript 2022 qui approche à grands pas, jetons un coup d’œil aux nouvelles fonctionnalités du langage JavaScript introduites dans ECMAScript 2021.

String.prototype.replaceAll

La replaceAll() prend une chaîne ou une expression régulière, appelée motif, comme premier argument. Le deuxième argument est celui du modèle remplacement. Étant donné le premier et le deuxième argument, replaceAll() renvoie une nouvelle chaîne qui sera la chaîne source avec toutes les instances du modèle échangées pour le remplacement. La chaîne source n’est pas affectée.

Dans ECMAScript 2021, replaceAll() rejoint ECMAScript 2020 matchAll() dans l’amélioration des capacités inhérentes de JavaScript intégré String objet.

La replaceAll() la méthode fonctionne exactement comme replace(), mais s’applique à toutes les occurrences de la chaîne, au lieu de la première uniquement. C’est un ajout bienvenu après des années d’utilisation d’une bibliothèque ou d’une solution codée à la main.

Le Listing 1 montre un exemple simple, dans lequel nous mutilons du Shakespeare.

Listing 1. replaceAll()


let quote = "all the world's a stage, and all the men and women merely players";
let newQuote = quote.replaceAll("all", "most of");
console.log(newQuote);

promesse.tout()

La promise.any() La méthode prend une collection de promesses et vous permet de répondre à la première qui se termine avec succès en renvoyant une nouvelle promesse.

Si des promesses sont rejetées, elles sont ignorées. (Notez le contraste de cette méthode avec promise.all(), qui s’arrête à toute erreur ou rejet ; et avec promise.allSettled()qui vous permet d’observer toutes les promesses résolues dans une collection, même s’il y a eu des erreurs intermédiaires.)

Si l’une des promesses est erronée, promise.any() agira toujours sur la première promesse résolue de la collection.

La promise.any() La méthode renvoie une promesse rejetée si aucune des promesses transmises n’est résolue. L’erreur qu’il renvoie est AggregateErrorqui est un nouveau type d’erreur également introduit par ECMAScript 2021. AggregateError représente le résumé de toutes les erreurs rencontrées.

Vous pouvez utiliser promise.any() pour enrouler plusieurs promesses en une seule. Cette promesse se résoudra à celui de la collection qui se résoudra en premier, en ignorant les erreurs et les rejets. Le Listing 2 contient un exemple simple.

Listing 2. promise.any()—tous résolus


const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "1 second");
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, "2 second");
});

let promises = [promise1, promise2];

Promise.any(promises).then((firstResolved) => {
  console.log(firstResolved); // outputs “1 second”
})

Considérons maintenant la liste 3, dans laquelle toutes les promesses finissent par échouer car elles sont rejetées.

Listing 3. promise.any()—tous rejetés


const promise1 = new Promise((resolve, reject) => {
  setTimeout(reject, 1000, "1 second");
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 2000, "2 second");
});

let promises = [promise1, promise2];

Promise.any(promises).then((firstResolved) => {
  console.log(firstResolved);
}).catch((err) => { console.log("error: " + err) }) // outputs error: AggregateError: All promises were rejected

Dans le Listing 3, nous ajoutons un gestionnaire de capture, qui se déclenche après le rejet des deux promesses. Remarquerez que AggregateError est un objet contenant des informations sur les promesses non tenues.

Regardons de plus près AggregateErrorqui est une autre nouvelle fonctionnalité d’ECMAScript 2021.

Erreur globale

AggregateError est un type spécial de sous-classe d’erreur qui combine de nombreuses erreurs dans un objet récapitulatif. Comme vous l’avez vu, le promise.any() méthode dans la liste 3 a créé un AggregateError.

Dans cet exemple, toutes les promesses sont passées à promise.any() a échoué, donc la méthode a renvoyé un AggregateError. L’erreur contenait un message décrivant l’erreur et un tableau avec des détails sur chaque erreur. Le Listing 4 montre le contenu de l’erreur renvoyée.

Listing 4. AggregateError


AggregateError: All promises were rejected
  errors: Array(2)
    0: "1 second"
    1: "2 second"
      length: 2
  message: "All promises were rejected"
  stack: "AggregateError: All promises were rejected"

Comme montré, AggregateError vous donne accès aux messages de promesse qui ont contribué à l’erreur, via AggregateError.errors.

Nouveaux opérateurs d’affectation logique

JavaScript a des opérateurs d’affectation mathématiques familiers tels que +=, qui effectuent l’opération et l’affectation en une seule fois, comme une sorte de commodité. ECMAScript 2021 ajoute un support similaire aux opérateurs logiques ||, ??et &&.

Jetons un coup d’œil à chacun d’entre eux.

Affectation nulle (??=)

Vous pouvez utiliser l’opérateur d’affectation nul pour tester qu’une variable est nulle ou indéfinie. Si la variable est nulle ou indéfinie, vous pouvez affecter le côté droit de l’expression à la variable. Le Listing 5 en est un exemple.

Listing 5. L’affectation ??= en action


let quote = "When goodness is lost there is morality.";
let existingQuote = "A leader is best when people barely know he exists";
let nonExistingQuote = null;
existingQuote ??= quote;
nonExistingQuote ??= quote;
console.log(existingQuote); // A leader is best when people barely know he exists
console.log(nonExistingQuote); // When goodness is lost there is morality.

Notez que lorsqu’il est utilisé sur une variable qui existe, comme existingQuote, l’opérateur d’affectation nul ne fait rien. Lorsqu’il est utilisé sur nonExistingQuotecependant, il affecte une nouvelle valeur au devis.

Même si la chaîne était vide pour existingQuote (qui est une valeur fausse en JavaScript), l’affectation nulle ne la remplacera pas ; il restera une chaîne vide. C’est l’essence de l’opérateur : il ne teste que null ou undefined.

Et affectation (&&=)

La et opérateur d’assignation (&&=) teste le côté gauche d’une expression. Si le côté gauche est véridique, il affecte le côté droit de l’expression. S’il est faux, l’opérateur ne fait rien. Le Listing 6 montre un exemple simple.

Listing 6. L’affectation &&= en action


let emptyString = "";
emptyString &&= "bar";
console.log (emptyString); // “”

let nonEmptyString = "foo";
nonEmptyString &&= "bar";
console.log(nonEmptyString); // “bar”

Dans le Listing 6, le premier journal de la console génère une chaîne vide. C’est parce que la chaîne vide est fausse, donc le &&= l’opérateur ne lui attribue pas de nouvelle valeur. La seconde console affiche “barCeci est dû au fait nonEmptyString est “foo», qui est une valeur de vérité.

&&= est une sorte d’opérateur de cas limite, mais utile lorsque vous en avez besoin.

Ou affectation (||=)

La ou l’opérateur d’affectation est l’opposé de et opérateur d’affectation que vous venez de voir. Nous pouvons utiliser le même exemple du Listing 6, en remplaçant cette fois &&= avec ||=.

Listing 7. L’affectation ||= en action


let emptyString = "";
emptyString ||= "bar";
console.log (emptyString); // “bar”

let nonEmptyString = "foo";
nonEmptyString ||= "bar";
console.log(nonEmptyString); // “foo”

Si le côté gauche de l’expression est faux, le ||= l’opérateur d’affectation se résout sur le côté droit. Par conséquent, dans ce cas, le emptyString devient”bar“. La nonEmptyString la variable reste avec sa valeur de vérité de “foo“.

RéfSemaine

WeakRef est utilisé pour faire référence à un objet cible sans le préserver du ramasse-miettes. C’est une fonctionnalité de langage plutôt ésotérique, peu utilisée par le codeur de travail. Le seul cas d’utilisation courant pour WeakRef consiste à implémenter des caches ou des mappages pour les objets volumineux, “où l’on souhaite qu’un objet volumineux ne soit pas maintenu en vie car il apparaît dans un cache ou un mappage”.

Donc, si vous vous retrouvez à créer une solution de mise en cache pour de grandes entités, n’oubliez pas que WeakRef existe. Sinon, si vous n’êtes pas sûr d’avoir besoin d’un WeakRef référence variable, vous devriez probablement éviter de l’utiliser. (La spécification elle-même recommande d’éviter.)

FinalisationRegistre

C’est un peu l’ironie de la programmation que JavaScript a introduit FinalizationRegistry presque simultanément avec la dépréciation de Java de Object.finalize(). Les caractéristiques sont pratiquement analogues. Comme WeakRefles développeurs de spécifications mettent en garde contre les finaliseurs définis par l’utilisateur.

Pour certains cas d’utilisation, cependant, le nouveau FinalizationRegistry pourrait être exactement ce dont vous avez besoin. La spécification offre l’exemple de processus de longue durée consommant de nombreux descripteurs de fichiers. Dans un tel cas, en utilisant FinalizationRegistry pourrait s’assurer qu’aucune poignée ne fuit.

De même que WeakRef, FinalizationRegistry s’intègre mieux dans la boîte à outils des développeurs de plateformes et de frameworks que dans celle des développeurs d’applications.

Séparateurs littéraux numériques

Les séparateurs numériques sont une subtilité qui permet de regarder un grand nombre plus facilement pour les yeux. JavaScript ne peut pas utiliser de virgules comme les langages naturels, car ce symbole est déjà pris. Ainsi, ECMAScript 2021 a introduit le souligner.

Au lieu de taper


let distanceToSun = 91772000000;

vous pouvez taper


let distanceToSun = 91_772_000_000;

Le nouveau formulaire est un peu plus facile à lire.

Améliorations de Array.prototype.sort

Il s’agit plus d’une remarque que d’une fonctionnalité. Fondamentalement, la spécification ECMAScript 2021 est plus précise dans sa description de la façon dont Array.prototype.sort œuvres. Le changement devrait réduire les variations de mise en œuvre entre les moteurs.

Copyright © 2022 IDG Communications, Inc.

Leave a Comment