Editions ENI Livres | Vidéos | e-Formations
Les nouveautés d’EcmaScript 6
Présentation générale
EcmaScript 6, encore appelé ES6 ou JavaScript 2015, est une nouvelle évolution de JavaScript apparue en 2015. À cette occasion, JavaScript a subi de nombreuses retouches, notamment avec l’apparition de nouvelles syntaxes liées au modèle « programmation orientée objet » (POO).
En matière de POO, le langage ressemble syntaxiquement à ce que l’on peut retrouver dans les langages majeurs comme Java, C++ ou encore PHP 5, même s’il ne s’agit que d’un habillage.
De nombreuses autres nouveautés (ou améliorations) sont implémentées dans cette nouvelle version, notamment :
-
l’importation/exportation de modules (à l’instar de ce que l’on trouve dans Node JS, que nous étudierons dans le chapitre suivant),
-
les fonctions fléchées (arrow founctions),
-
la gestion des traitements asynchrones via les « promesses » (instruction promise),
-
les tableaux associatifs de clés/valeurs (instruction Map),
-
des structures de données nouvelles ou améliorées (instructions Map, Set, WeakMap, WeakSet),
-
...
Dans le cadre de ce chapitre, nous allons mettre en œuvre dans des exemples concrets les évolutions majeures. Bien entendu, l’exposé ne pourra pas être exhaustif.
Apports au niveau de la Programmation Orientée Objet
1. Notion de prototype
Débutons notre série d’exemples illustrant les nouveautés apportées par EcmaScript 6 en matière de POO par un premier script montrant ce qui était proposé jusqu’à la version EcmaScript 5 (datant de décembre 2009).
Script complet HTML/JavaScript
<!DOCTYPE html>
<!--
Nom du script : poo_01.htm
Auteur : Christian VIGOUROUX
Date de création : 15/10/2018
Date de dernière modification : 15/10/2018
Objet : "POO" en EcmaScript 5 (notion de prototype)
-->
<!-- Balise html -->
<html>
<!-- Section head -->
<head>
<!-- Balise meta de gestion de l'accentuation UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Section body -->
<body>
<!-- Utilisation de la police de caractères Arial -->
<font face="Arial">
<!-- Affichage du titre du script -->
<h3>Ecmacript 5 & 6 : Notion de prototype - Script poo_01.htm</h3>
<!-- Script JavaScript -->
<script>
/* Définition d'une fonction constructeur de nom Voiture */
/* NB : Le constructeur est ici vide */
var Voiture = function() {};
/* Test de l'existence par défaut d'un prototype */
/* pour tout constructeur */
document.write("Prototype du constructeur : " + Voiture.prototype);
/* Ajout d'une méthode zigzaguer au prototype du constructeur Voiture */
Voiture.prototype.zigzaguer = function()
{
document.write("zigzague dangereusement<br />");
...Fonctions fléchées (arrow functions)
1. Avantages des fonctions fléchées
Vous trouverez deux avantages aux fonctions fléchées (ou arrow functions) introduites dans EcmaScript 6 :
-
une syntaxe allégée par rapport aux fonctions EcmaScript 5,
-
la non-création d’un nouveau « scope » associé.
Ces avantages supposés semblent abstraits. Voyons au travers d’un exemple complet à quoi cela correspond.
2. Exemple
Script complet HTML/JavaScript
<!DOCTYPE html>
<!--
Nom du script : arrow.htm
Auteur : Christian VIGOUROUX
Date de création : 15/10/2018
Date de dernière modification : 15/10/2018
Objet : Utilisation de la syntaxe arrow (=>)
-->
<!-- Balise html -->
<html>
<!-- Section head -->
<head>
<!-- Balise meta de gestion de l'accentuation UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<!-- Scripts de compatibilité ES6 (transpiling) pour Microsoft Edge -->
<script
src="https://google.github.io/traceur-compiler/bin/traceur.js">
</script>
<script
src="https://google.github.io/traceur-compiler/src/bootstrap.js">
</script>
</head>
<!-- Section body -->
<body>
<!-- Utilisation de la police de caractères Arial -->
<font face="Arial">
<!-- Affichage du titre du script -->
<h3>EcmaScript 6 : Utilisation de la syntaxe arrow (=>)</h3>
<!-- Script JavaScript -->
<script>
// Définition d'un tableau JavaScript voiture de sport
// (marque uniquement)
let tabVoituresSport = ["Porsche"...Structures Map, Set et boucle for of
1. Présentation générale
Sans vouloir être exhaustif sur le sujet, étudions en séquence la gestion des structures de données suivantes disponibles en EcmaScript 6 :
-
Les tableaux JavaScript (déjà disponibles dans les versions antérieures).
-
Les structures Map.
-
Les structures Set.
2. Exemple
Script complet HTML/JavaScript
<!DOCTYPE html>
<!--
Nom du script : map_set.htm
Auteur : Christian VIGOUROUX
Date de création : 15/10/2018
Date de dernière modification : 15/10/2018
Objet : Map et Set
-->
<!-- Balise html -->
<html>
<!-- Section head -->
<head>
<!-- Balise meta de gestion de l'accentuation UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Section body -->
<body>
<!-- Utilisation de la police de caractères Arial -->
<font face="Arial">
<!-- Affichage du titre du script -->
<h3>EcmaScript 6 : Map, Set et boucle for ... of</h3>
<!-- Script JavaScript -->
<script>
//
// Définition d'un tableau JavaScript et affichage de son contenu
//
document.write("<h4>Tableau JavaScript</h4>");
// Définition d'un tableau JavaScript de voitures
// (marque uniquement)
// let tabVoitures = ["Porsche", "Ferrari", "BMW"];
let tabVoitures = new Array("Porsche", "Ferrari", "BMW");
// Ajout d'une 4e voiture
tabVoitures.push("Simca");
...Portée des variables (var ou let)
1. Présentation générale
La gestion de la portée des variables était problématique dans les versions antérieures de JavaScript.
Il est désormais facile de préciser la portée exacte des variables via deux mots-clés différents placés au début des déclarations : var et let.
Nous allons, au travers d’un exemple, voir l’impact de ces deux solutions.
2. Exemple
Script complet HTML/JavaScript
<!DOCTYPE html>
<!--
Nom du script : var_let.htm
Auteur : Christian VIGOUROUX
Date de création : 15/10/2018
Date de dernière modification : 15/10/2018
Objet : Déclaration de variables via var ou let
-->
<!-- Balise html -->
<html>
--> Section head -->-->
<head-->
<!-- Balise meta de gestion de l'accentuation UTF-8 -->-->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Section body -->
<body>
<!-- Utilisation de la police de caractères Arial -->
<font face="Arial">
<!-- Affichage du titre du script -->
<h3>EcmaScript 6 : Déclarations de variables via var et let</h3>
<!-- Script JavaScript -->
<script>
// Définition d'une variable porsche911 via var
// (portée dans l'ensemble du script)
var porsche911 = "Porsche 911";
// NB : un let au lieu d'un...Promesses (promise)
1. Présentation générale
L’objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une opération qui n’a pas encore été complétée, mais qui est attendue dans le futur (source : Mozilla Developer Network).
Prenons l’exemple d’un traitement web extrêmement long (par exemple un téléchargement de fichier volumineux) qui bloque temporairement ou complètement le navigateur. Les promesses, désormais implémentées dans JavaScript depuis EcmaScript 6, solutionnent le problème de manière élégante.
Étudions la création d’une promesse au travers d’un exemple, facile à interpréter, bien que pas vraiment réaliste.
Pour obtenir des explications détaillées sur le fonctionnement des promesses, consultez les nombreux blogs disponibles sur Internet, en particulier : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise
2. Exemple
Script complet HTML/JavaScript
<!DOCTYPE html>
<!--
Nom du script : promise.htm
Auteur : Christian VIGOUROUX
Date de création : 15/10/2018
Date de dernière modification : 15/10/2018
Objet : Utilisation des promesses
-->
<!-- Balise html -->
<html>
<!-- Section head -->
<head>
<!-- Balise meta de gestion de l'accentuation UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Section body -->
<body>
<!-- Utilisation de la police de caractères Arial -->
<font face="Arial">
<!-- Affichage du titre du script -->
<h3>EcmaScript 6 : Utilisation des promesses</h3>
<!-- Script JavaScript --> ...Déstructuration
1. Présentation générale
L’affectation par décomposition (destructuring en anglais) est une expression JavaScript qui permet d’extraire des données d’un tableau ou d’un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l’objet (source : Mozilla Developer Network).
2. Exemple
Script complet HTML/JavaScript
<!DOCTYPE html>
<!--
Nom du script : destructuring.htm
Auteur : Christian VIGOUROUX
Date de création : 15/10/2018
Date de dernière modification : 15/10/2018
Objet : Destructring de tableaux et d'objets JavaScript
-->
<!-- Balise html -->
<html>
<!-- Section head -->
<head>
<!-- Balise meta de gestion de l'accentuation UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Section body -->
<body>
<!-- Utilisation de la police de caractères Arial -->
<font face="Arial">
<!-- Affichage du titre du script -->
<h3>EcmaScript...