ECMAScript 2018

Nouvelles fonctionnalités en JavaScript 2018

Fonctionnalité	Description
Itération Asynchrone	Permet d'utiliser le mot-clé await dans les boucles for/of
Promise Finally	Planifie une fonction à exécuter lorsqu'une promesse a été "résolue" ou "rejetée"
Éléments Rest d'Array	Permet de déstructurer un tableau et de collecter les éléments restants
Propriétés Rest d'Objet	Permet de déstructurer un objet et de collecter les propriétés restantes
Mémoire Partagée	Permet à différentes parties d'un programme d'accéder à la même mémoire

Nouvelles fonctionnalités RegExp en 2018

Fonctionnalité	Description
/s	Permet au métacaractère . (point) de correspondre aux terminators de ligne
\p{}	Correspond à un caractère avec une propriété de caractère Unicode
(?<=y)	(?<=y)x correspond à "x" si "x" est précédé de "y"
(?<!y)	(?<!y)x correspond à "x" si "x" n'est PAS précédé de "y"
(?<name>)	Capture le texte et lui attribue un nom (étiquette)

Support des navigateurs

ECMAScript 2018 est pris en charge dans tous les navigateurs modernes depuis Juin 2020 :


Chrome 64	Edge 79	Firefox 78	Safari 12	Opera 51
Jan 2018	Jan 2020	Jun 2020	Sep 2018	Feb 2018

Itération Asynchrone en JavaScript

ECMAScript 2018 a ajouté des itérateurs et des itérables asynchrones.

Avec des itérables asynchrones, nous pouvons utiliser le await mot-clé dans les boucles for/of .

Exemple

 for await () {} 

JavaScript Promise.finally()

ECMAScript 2018 finalise la mise en œuvre complète de l'objet Promise avec Promise.finally :

Promise.finally() définit une fonction à exécuter lorsqu'une promesse a été soit résolue avec succès soit rejetée.

Exemple

 let myPromise = new Promise(); 
 
 myPromise.then(); 
 myPromise.catch(); 
 myPromise.finally(); 
 

Éléments Rest d'Array en JavaScript

ECMAScript 2018 a ajouté l'opérateur rest (...).

L'opérateur rest (...) nous permet de déstructurer un tableau et de collecter les éléments restants :

Exemple 1

 let a, rest; 
 const arr1 = [1,2,3,4,5,6,7,8]; 
 
 [a, ...rest] = arr1; 
 

Essayez-le vous-même »

Exemple 2

 let a, b, rest; 
 const arr1 = [1,2,3,4,5,6,7,8]; 
 
 [a, b, ...rest] = arr1; 
 

Essayez-le vous-même »

Propriétés Rest d'Objet en JavaScript

ECMAScript 2018 a ajouté l'opérateur rest (...).

Cela nous permet de déstructurer un objet et de collecter les propriétés restantes dans un nouvel objet :

Exemple

 // Créer un Objet : 
 const car = {type:"Fiat", model:"500", color:"white"}; 
 
 // Déstructurer l'Objet 
 let {type, model, color} = car; 
 document.getElementById("demo").innerHTML = "Le type de voiture est : " + type; 
 

Essayez-le vous-même »

Nouvelles fonctionnalités RegExp en JavaScript

ECMAScript 2018 a ajouté 4 nouvelles fonctionnalités RegExp :

/s (dotAll) Flag
Échappements de Propriété Unicode (\p{...})
Assertions de Lookbehind (?<=y)x et (?<!y)x
Groupes de Capture Nommés

RegExp /s Flag

Exemple

 let text = "Ligne\nLigne."; 
 
 let pattern = /Ligne./gs; 
 let result = text.match(pattern); 
 

Essayez-le vous-même »

Description

Le s (dotAll) flag permet au métacaractère . (point) de correspondre à n'importe quel caractère, y compris les caractères de terminator de ligne (comme \n, \r, \u2028, \u2029).

Sans s , \n ne correspond pas aux terminators de ligne.

RegExp \p Métacaractère

Exemple

 let text = "Bonjour 😄"; 
 
 let pattern = /\p{RGI_Emoji}/v; 
 let result = pattern.test(text); 
 

Essayez-le vous-même »

Description

Le métacaractère \p{Unicode Property} correspond à n'importe quel caractère ayant une propriété de caractère Unicode.

RegExp Lookbehind

Exemple (?<=y)x

 let text = "Bonjour formation-ti.org"; 
 
 let pattern = /(?<=Bonjour )formation-ti.org/; 
 let result = pattern.test(text); 
 

Essayez-le vous-même »

Description

(?<=y)x correspond à "x" si "x" est précédé de "y".

Lookbehind Négatif

Exemple (?<!y)x

 let text = "Bonjour formation-ti.org"; 
 
 let pattern = /(?<=Bonjour )formation-ti.org/; 
 let result = pattern.test(text); 
 

Essayez-le vous-même »

Description

(?<!y)x correspond à "x" si "x" n'est PAS précédé de "y".

RegExp Groupes de Capture Nommés

Exemple (?<name>...)

 const text = "Nom : John Doe"; 
 
 // Utilisation de groupes de capture nommés 
 const regex = /(?<firstName>\w+) (?<lastName>\w+)/; 
 const match = text.match(regex); 
 
 let fName = match.groups.firstName; 
 let lName = match.groups.lastName; 
 

Essayez-le vous-même »

Explication

(?<firstName>\w+) capture un mot et l'étiquette firstName
(?<lastName>\w+) fait de même pour lastName
text.match() retourne un tableau avec une propriété groups
match.groups() retourne un objet :
{firstName:"John", lastName:"Doe" }

Lors de l'utilisation d'une expression régulière avec des groupes de capture, la méthode match() d'une chaîne retourne un tableau de résultats qui inclut une propriété groups. Cette propriété groups est un objet qui contient les correspondances pour les groupes de capture nommés.

Threads JavaScript

En JavaScript, vous utilisez l'API Web Workers pour créer des threads.

Les threads de travail sont utilisés pour exécuter du code en arrière-plan afin que le programme principal puisse continuer son exécution.

Les threads de travail s'exécutent simultanément avec le programme principal. L'exécution simultanée de différentes parties d'un programme peut faire gagner du temps.

Mémoire Partagée en JavaScript

La mémoire partagée est une fonctionnalité qui permet aux threads (différentes parties d'un programme) d'accéder et de mettre à jour les mêmes données dans la même mémoire.

Au lieu de passer des données entre les threads, vous pouvez passer un objet SharedArrayBuffer qui pointe vers la mémoire où les données sont enregistrées.

SharedArrayBuffer

Un objet SharedArrayBuffer représente un tampon de données binaires brutes de longueur fixe, similaire à l'objet ArrayBuffer.