Quoi de neuf dans ES2018 –

Dans cet article, je vais aborder les nouvelles fonctionnalités de JavaScript introduites via ES2018 (ES9), avec des exemples de ce qu'elles sont et comment les utiliser.

JavaScript (ECMAScript) est une norme en constante évolution mis en œuvre par de nombreux fournisseurs sur plusieurs plates-formes. ES6 (ECMAScript 2015) était une grande version qui a pris six ans à finaliser. Un nouveau processus de publication annuel a été formulé pour rationaliser le processus et ajouter des fonctionnalités plus rapidement. ES9 (ES2018) est la dernière itération au moment de l'écriture.

Le comité technique 39 (TC39) est composé de parties comprenant des vendeurs de navigateurs qui se rencontrent pour pousser les propositions JavaScript suivant une progression stricte: [0190900] strawman –
Présentation initiale des idées

Étape 1: proposition –
Document de proposition formel prôné par au moins une fois un membre de TC39 qui inclut des exemples d'API.

Étape 2 : draft –
Une version initiale de la spécification d'entité avec deux implémentations expérimentales

Etape 3: candidate –
La spécification de la proposition est passée en revue et les commentaires sont collectés auprès des fournisseurs.

Étape 4: terminé –
La proposition est prête à être incluse dans ECMAScript mais peut prendre plus de temps à être expédiée dans les navigateurs et Node.js.

ES2016

ES2016 a prouvé le processus de normalisation en ajoutant juste deux petites caractéristiques: [19659016] Le tableau incl udes () méthode, qui renvoie true ou false lorsqu'une valeur est contenue dans un tableau, et

ES2017

ES2017 fourni une plus grande gamme de nouvelles fonctionnalités:

• Fonctions asynchrones pour une syntaxe Promise plus claire
• Object.values ​​() pour extraire un tableau de valeurs d'un objet contenant des paires nom-valeur
• Object.entries () qui retourne un tableau de sous-tableaux contenant les noms et les valeurs dans un objet
• Object.getOwnPropertyDescriptors () pour renvoyer un objet définissant des descripteurs de propriétés pour les propriétés propres d'un autre objet ( .value .writable .get .set .configurable .enumerable )
• padStart () et padEnd () les deux éléments de remplissage de chaîne
• virgules flottantes sur les définitions d'objet, les déclarations de tableau et les listes de paramètres de fonction

• SharedArrayBuffer et Atomics pour lire et écrire dans des emplacements de mémoire partagée (désactivé en réponse à la vulnérabilité Spectre )

Voir Quoi de neuf dans ES2017 pour plus d'informations.

ES2018

ECMAScript 2018 (ou ES9 si vous préférez l'ancienne notation) est maintenant disponible. Les fonctionnalités suivantes ont atteint l'étape 4, bien que les implémentations de travail soient inégales entre les navigateurs et les runtimes au moment de l'écriture.

Itération asynchrone

À un moment de votre voyage asynchrone / attente, vous tenterez d'appeler asynchrone fonction à l'intérieur une boucle synchrone. Par exemple:

 async function process (array) {
  pour (laissez-moi de tableau) {
    attendre quelque chose (i);
  }
}

Ça ne marchera pas. Cela non plus:

 async function process (array) {
  array.forEach (async i => {
    attendre quelque chose (i);
  });
}

Les boucles elles-mêmes restent synchrones et se termineront toujours avant leurs opérations asynchrones internes.

ES2018 introduit des itérateurs asynchrones, qui sont comme des itérateurs réguliers sauf que la méthode next () renvoie une promesse. Par conséquent, le mot-clé await peut être utilisé avec pour ... de boucles pour exécuter des opérations asynchrones en série. Par exemple:

 async function process (array) {
  pour attendre (let i of array) {
    faire quelque chose (i);
  }
}

Promise.finally ()

Une chaîne Promise peut réussir et atteindre la finale .then () ou échouer et déclencher un bloc .catch () . Dans certains cas, vous voulez exécuter le même code quel que soit le résultat – par exemple, nettoyer, supprimer une boîte de dialogue, fermer une connexion à une base de données, etc.

Le prototype .finally () vous permet pour spécifier la logique finale à un endroit plutôt que de la dupliquer dans le dernier .then () et .catch () :

 function doSomething () {
  faire quelque chose1 ()
  .then (doSomething2)
  .then (doSomething3)
  .catch (err => {
    console.log (err);
  })
  .finally (() => {
    // finis ici!
  });
}

Rest / Spread Properties

ES2015 introduit les paramètres de repos et les opérateurs de propagation. La notation à trois points ( ... ) s'applique uniquement aux opérations de tableau. Les paramètres de repos convertissent les derniers arguments transmis à une fonction en un tableau:

 restParam (1, 2, 3, 4, 5);

function restParam (p1, p2, ... p3) {
  // p1 = 1
  // p2 = 2
  // p3 = [3, 4, 5]
}

L'opérateur de propagation fonctionne dans le sens opposé et transforme un tableau en arguments séparés pouvant être transmis à une fonction. Par exemple, Math.max () renvoie la valeur la plus élevée, étant donné un nombre quelconque d'arguments:

 const values ​​= [99, 100, -1, 48, 16];
console.log (Math.max (valeurs ...)); // 100

ES2018 permet une fonctionnalité de repos / propagation similaire pour la déstructuration d'objets ainsi que des tableaux. Un exemple basique:

 const myObject = {
  a: 1,
  b: 2,
  c: 3
}

const {a, ... x} = monObjet;
// a = 1
// x = {b: 2, c: 3}

Ou vous pouvez l'utiliser pour transmettre des valeurs à une fonction:

 restParam ({
  a: 1,
  b: 2,
  c: 3
});

function restParam ({a, ... x}) {
  // a = 1
  // x = {b: 2, c: 3}
}

Comme les tableaux, vous ne pouvez utiliser qu'un seul paramètre de repos à la fin de la déclaration. De plus, cela ne fonctionne que sur le niveau supérieur de chaque objet et non sur des sous-objets.

L'opérateur de propagation peut être utilisé dans d'autres objets. Par exemple:

 const obj1 = {a: 1, b: 2, c: 3};
const obj2 = {... obj1, z: 26};
// obj2 est {a: 1, b: 2, c: 3, z: 26}

Vous pouvez utiliser l'opérateur spread pour cloner des objets ( obj2 = {... obj1}; ), mais sachez que vous n'avez que des copies superficielles. Si une propriété contient un autre objet, le clone se référera au même objet.

Groupes de capture nommés par expression rationnelle

Les expressions régulières de JavaScript peuvent renvoyer un objet de correspondance – une valeur de type tableau contenant des chaînes correspondantes. Par exemple, pour analyser une date au format AAAA-MM-JJ:

 const
  reDate = / ([0-9] {4}) - ([0-9] {2}) - ([0-9] {2}) /,
  match = reDate.exec ('2018-04-30'),
  année = match [1]// 2018
  mois = match [2]// 04
  jour = match [3]; // 30

Il est difficile à lire, et changer l'expression régulière est également susceptible de changer les index des objets de correspondance.

ES2018 permet aux groupes d'être nommés en utilisant la notation ? immédiatement après le crochet de capture d'ouverture ] (. Par exemple:

 const
  reDate = / (? [0-9] {4}) - (? [0-9] {2}) - (? [0-9] {2}) /,
  match = reDate.exec ('2018-04-30'),
  year = match.groups.year, // 2018
  month = match.groups.month, // 04
  jour = match.groups.day; // 30

Tout groupe nommé qui ne correspond pas a sa propriété définie sur undefined .

Les captures nommées peuvent également être utilisées dans les méthodes replace () . Par exemple, convertissez une date au format US MM-DD-YYYY:

 const
  reDate = / (? [0-9] {4}) - (? [0-9] {2}) - (? [0-9] {2}) /,
  d = '2018-04-30',
  usDate = d.replace (reDate, '$  - $  - $ ');

Assertion de lookbehind d'expressions régulières

JavaScript prend actuellement en charge les assertions lookahead dans une expression régulière. Cela signifie qu'une correspondance doit se produire mais que rien n'est capturé et que l'assertion n'est pas incluse dans la chaîne correspondante globale. Par exemple, pour capturer le symbole monétaire de n'importe quel prix:

 const
  reLookahead = /  D (? =  d +) /,
  match = reLookahead.exec ('$ 123.89');

console.log (match [0]); // $

ES2018 introduit des assertions lookbehind qui fonctionnent de la même manière, mais pour les correspondances précédentes. Nous pouvons donc capturer le numéro de prix et ignorer le caractère monétaire:

 const
  reLookbehind = / (? <=  D)  d + /,
  match = reLookbehind.exec ('$ 123.89');

console.log (match [0]); // 123,89

Ceci est une assertion de lookbehind positive; un non-chiffre D doit exister. Il existe également une assertion lookbehind négative, qui définit qu'une valeur ne doit pas exister. Par exemple:

 const
  reLookbehindNeg = / (? <!  D)  d + /,
  match = reLookbehind.exec ('$ 123.89');

console.log (match [0]); // nul

Drapeau de l'expression régulière (dotAll)

Un point d'expression régulière . correspond à un seul caractère sauf carriage returns. L'indicateur s modifie ce comportement afin que les terminaisons de ligne soient autorisées. Par exemple:

 /hello.world/s.test ('bonjour  nworld'); // vrai

Échaptions de propriétés Unicode d'expressions régulières

Jusqu'à présent, il n'était pas possible d'accéder aux propriétés de caractères Unicode de manière native dans les expressions régulières. ES2018 ajoute des échappements de propriété Unicode – sous la forme p {...} et P {...} – dans les expressions régulières qui ont le u drapeau (unicode). Par exemple:

 const reGreekSymbol = /  p {Script = Greek} / u;
reGreekSymbol.test ('π'); // vrai

Tweak Literals Tweak

Enfin, toutes les restrictions syntaxiques liées aux séquences d'échappement dans les littéraux de gabarit ont été supprimées.

Précédemment, un u a démarré un échappement Unicode, un a commencé un échappement hexadécimal, et suivi d'un chiffre a commencé une échappement octal. Cela a rendu impossible de créer certaines chaînes telles qu'un chemin de fichier Windows C: uuu xxx 111 . Pour plus de détails, reportez-vous à la documentation sur les littéraux de MDN .

C'est tout pour ES2018, mais le travail sur ES2019 a déjà commencé. Existe-t-il des fonctionnalités que vous êtes impatient de voir l'année prochaine?

Craig est un consultant web indépendant au Royaume-Uni qui a créé sa première page pour IE2.0 en 1995. Depuis, il préconise les normes, l'accessibilité et les meilleures pratiques. techniques Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler