URL: https://linuxfr.org/news/ecmascript-2015-est-approuve Title: ECMAScript 2015 est approuvé Authors: supergab palm123, Kaane, BAud, ZeroHeure et DontShootMe Date: 2015年06月22日T23:27:00+02:00 License: CC By-SA Tags: Score: 55 La spécification ECMAScript 6^e édition a été approuvée le 17 juin 2015 sous le nom ECMAScript 2015. Parmi les nouveautés, il faut noter l'arrivée des classes, des modules, des fonctions fléchées, des boucles `for-of`, des générateurs, des proxies et de plusieurs nouvelles méthodes. ---- [Standard ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm) [ECMAScript 6 — New Features](http://es6-features.org) [ECMAScript sur Wikipédia](https://fr.wikipedia.org/wiki/ECMAScript) [Support d'ECMAScript 6 par Mozilla](https://developer.mozilla.org/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_6_par_Mozilla) [Le tableau de compatibilité (de Kangax)](http://kangax.github.io/compat-table/es6/) ---- Cette nouvelle édition permet de rattraper le retard face au [[JavaScript]] déjà implémenté dans les navigateurs. De ce fait, l'arrivée des mots clés `const` et `let` n'est pas si nouvelle. Par contre, la spécification ne correspond pas toujours aux implémentations, et certaines fonctionnalités devront être revues. Constante et variable --------------------- La déclaration `const` permet de créer une constante nommée accessible uniquement en lecture. ```Javascript const PI = 3.141593; PI> 3.0; ``` L'instruction `let` permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur. ```Javascript function letTest() { let x = 31; if (true) { let x = 71; // c'est une variable différente console.log(x); // 71 } console.log(x); // 31 } ``` Classe ------ Durant le développement de la spécification, plusieurs propositions ont été élaborées pour la gestion des classes. La solution retenue est plutôt minimale. La classe contient un constructeur et des méthodes. L'héritage simple est géré. À cela s'ajoutent des méthodes `get` et `set`, et des membres statiques. ```Javascript class Fruit { constructor (couleur) { this.couleur = couleur; } static choisirCouleur() { return ['rouge', 'jaune', 'bleu', 'vert', 'orange', 'mauve']; } toString () { return "fruit"; } } class Pomme extends Fruit { constructor (couleur, sorte) { super(couleur); this.sorte = sorte; } get saveur() { return this.sorte + " " + this.couleur; } toString () { return super.toString() + " : pomme"; } } let maPomme = new Pomme('jaune', 'Délicieuse'); ``` Fonction fléchée ---------------- Une expression de fonction fléchée (arrow function en anglais) permet d'avoir une syntaxe plus courte que les expressions de fonction et permet de lier la valeur `this` de façon lexicale. Les fonctions fléchées sont obligatoirement anonymes. Les fonction fléchées peuvent être utilisées suivant deux syntaxes différentes : ```Javascript param => expression ``` qui est équivalente à ``` Javascript function(param) {return param.expression} ``` ou sous la forme ```Javascript ([param] [, param]) => {instructions} ``` qui est équivalente à ```Javascript function([param] [, param]) { instructions } ``` Bien que la fonction fléchée soit nécessairement anonyme elle-même, elle peut néanmoins être mappée sur une variable. ```Javascript var simple = a => a> 15 ? 15 : a; var complexe = (a, b) => { if (a> b) { return a; } else { return b; } } ``` Une fonction fléchée ne définit pas son propre `this`. Elle utilise celui disponible dans son contexte. ```Javascript var robert = { _nom: "Robert", _amis: [], imprimerAmis() { this._amis.forEach(f => console.log(this._nom + " connaît " + f)); } } ``` Affecter par décomposition -------------------------- L'affectation par décomposition (_destructuring_ en anglais) est une expression 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. La syntaxe est semblable à ce qu'offre [Perl](https://www.perl.org/) ou [Python](https://www.python.org/). ### Décomposition d'un tableau ```Javascript var list = [ 1, 2, 3 ]; var [ a, , b ] = list; [ b, a ] = [ a, b ]; ``` ### Décomposition d'un objet ```Javascript var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true var {p: toto, q: truc} = o; console.log(toto); // 42 console.log(truc); // true ``` ### Opérateur de décomposition L'opérateur de décomposition permet de développer une expression lorsque plusieurs arguments ou plusieurs éléments sont nécessaires. ```Javascript var params = [ "salut", true, 7 ]; var other = [ 1, 2, ...params ]; // [ 1, 2, "salut", true, 7 ] f(1, 2, ...params) === 9; var str = "foo"; var chars = [ ...str ]; // [ "f", "o", "o" ] ``` Paramètres ---------- Un paramètre du reste permet de représenter un nombre indéfini d'arguments sous forme d'un tableau. ```Javascript function f (x, y, ...a) { return (x + y) * a.length; } f(1, 2, "salut", true, 7) === 9; ``` Un paramètre par défaut permet d'initialiser des paramètres lors de l'appel de la fonction si la valeur passée est nulle (au sens où il n'y a aucune valeur de passée) ou undefined. ```Javascript function f (x, y = 7, z = 42) { return x + y + z; } f(1) === 50; ``` ### Décomposition Les valeurs des tableaux et les propriétés des objets passés en paramètre à une fonction seront décomposées. ```Javascript function f ([ name, val ]) { console.log(name, val); } function g ({ name: n, val: v }) { console.log(n, v); } function h ({ name, val }) { console.log(name, val); } f([ "bar", 42 ]); g({ name: "foo", val: 7 }); h({ name: "bar", val: 42 }); ``` Nouvelles notations ------------------- ### Raccourcis pour les noms de propriétés Une notation raccourcie permet de créer une propriété qui porte le nom de sa variable d'origine. ```Javascript var a = "toto", b = 42, c = {}; var o = { a, b, c }; ``` ### Raccourcis pour les noms de méthodes Une notation raccourcie permet de ne plus utiliser le mot-clé `function`. ```Javascript var o = { property([parameters]) {}, get property() {}, set property(value) {}, * generator() {} }; ``` ### Noms calculés pour les propriétés Une expression entre crochets [] peut être calculée en tant que nom d'une propriété. ```Javascript var prop = "toto"; var o = { [prop]: "hey", ["tr" + "uc"]: "ho" }; ``` Itérateur --------- L'instruction `for-of` permet de créer une boucle qui parcourt un objet itérable. ```Javascript let fibonacci = { [Symbol.iterator]() { let pre = 0, cur = 1; return { next () { [ pre, cur ] = [ cur, pre + cur ]; return { done: false, value: cur }; } }; } } for (let n of fibonacci) { if (n> 1000) break; console.log(n); } ``` Générateur ---------- Un générateur est une fonction qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives. ```Javascript function* range (start, end, step) { while (start < end) { yield start; start += step; } } for (let i of range(0, 10, 2)) { console.log(i); // 0, 2, 4, 6, 8 } ``` Promise ------- L'objet `Promise` (pour « promesse ») est utilisé pour réaliser des opérations de façon asynchrone. Une promesse est dans un de ces états : - _en attente_ : état initial, la promesse n'est ni remplie, ni rompue ; - _tenue_ : l'opération a réussi ; - _rompue_ : l'opération a échoué ; - _acquittée_ : la promesse est tenue ou rompue mais elle n'est plus en attente. Le constructeur de l'objet `Promise` prend en argument une fonction avec deux paramètres : `resolve` et `reject`. Si la promesse est tenue, on appelle la fonction `resolve()` avec le résultat. Si elle est rompue, on appelle la fonction `reject()` avec la raison. ```Javascript var p1 = new Promise((resolve, reject) => { setTimeout(() => resolve(1), 1000); }); ``` La méthode `then()` prend deux arguments qui sont deux fonctions _callback_ à utiliser en cas de complétion ou d'échec de la `Promise`. Elle renvoie une `Promise`, on peut donc facilement enchaîner plusieurs appels à cette méthode. ```Javascript p1.then((valeur) => { console.log(valeur); // 1 return valeur + 1; }).then((valeur) => { console.log(valeur); // 2 }); ``` Module ------ Les modules permettent de créer de nouveaux espaces de noms, et ainsi limiter la pollution de l'espace de nom global. ### Import ```Javascript // someApp.js import * as math from "lib/math"; console.log("2π = " + math.sum(math.pi, math.pi)); ``` ### Export ```Javascript // lib/math.js export function sum (x, y) { return x + y }; export var pi = 3.141593; ``` Réflexion --------- ### Proxy L'objet `Proxy` est utilisé afin de définir un comportement sur mesure pour certaines opérations fondamentales (par exemple, l'accès aux propriétés, les affectations, les énumérations, les appels de fonctions, etc.). ```Javascript var handler = { get: function(cible, nom){ return nom in cible ? cible[nom] : 37; } }; var p = new Proxy({}, handler); p.a = 1; p.b = undefined; p.a === 1; p.b === undefined; 'c' in p === false; p.c === 37; ``` ### Reflect `Reflect` est un objet natif qui fournit des méthodes pour les opérations qui peuvent être interceptées (via les proxies). Reflect n'est pas une fonction (y compris pour construire un objet). ```Javascript let obj = { a: 1 }; Object.defineProperty(obj, "b", { value: 2 }); obj[Symbol("c")] = 3; Reflect.ownKeys(obj); // [ "a", "b", Symbol(c) ] ``` Nouvelles méthodes ------------------ Voici quelques exemples de nouvelles méthodes qui ont été ajoutées aux objets standards. ### Object La méthode `Object.assign()` est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. ```Javascript var dst = { quux: 0 }; var src1 = { foo: 1, bar: 2 }; var src2 = { foo: 3, baz: 4 }; Object.assign(dst, src1, src2); ``` La méthode `Object.setPrototypeOf()` définit le prototype d'un objet donné avec un autre objet ou null. ```Javascript function Parent(){} function Child(){} Object.setPrototypeOf(Child.prototype, Parent.prototype); new Child instanceof Child; // true new Child instanceof Parent; // true ``` ### Array La méthode `find()` renvoie une valeur contenue dans le tableau si un élément du tableau respecte une condition donnée par la fonction de test passée en argument. ```Javascript [ 1, 3, 4, 2 ].find(x => x> 3); // 4 ``` ### String Les méthodes `startsWith()`, `endsWith()` et `includes()` renvoient un booléen indiquant, respectivement, si la chaîne de caractères commence par, se termine par ou contient la deuxième chaîne de caractères fournie en argument. ```Javascript "hello".startsWith("ello", 1); // true "hello".endsWith("hell", 4); // true "hello".includes("ell"); // true "hello".includes("ell", 1); // true "hello".includes("ell", 2); // false ``` La méthode `repeat()` construit et renvoie une nouvelle chaîne de caractères qui contient le nombre de copies demandées de la chaîne de caractères sur laquelle la méthode a été appelée, concaténées les unes aux autres. ```Javascript " ".repeat(4 * depth); "foo".repeat(3); ``` ### Number La méthode `Number.isSafeInteger()` permet de déterminer si la valeur, passée en argument, est un entier représentable correctement en ECMAScript (c'est-à-dire un nombre compris entre -(2^53 -1) et 2^53 -1). ```Javascript Number.isSafeInteger(42) === true; Number.isSafeInteger(9007199254740992) === false; ``` Autres fonctionnalités ---------------------- - Les nombres octaux et binaires sous une forme littérale - Les tableaux typés - Les gabarits de chaînes de caractères - Les objets Map et Set et leurs équivalents avec références faibles - Amélioration de la gestion de l'Unicode pour les chaînes de caractères et les expressions rationnelles Il ne reste plus qu'à attendre que toutes ces nouveautés arrivent jusqu'à votre navigateur préféré. Conversion ---------- La conversion des nouveautés du ECMAScript 2015 vers le langage compris par les précédentes implémentations peut se faire à l'aide d'outils. Plusieurs nouveautés peuvent être implémentées par ECMAScript lui-même. ### Compilateur Il est possible de faire appel à un compilateur pour convertir les nouvelles fonctionnalités du langage vers du code compatible avec les anciennes implémentations. Il est plus facile de compiler le code depuis le serveur et envoyer seulement le résultat au client. **[Babel](https://babeljs.io/)** est un de ces compilateurs. Tous les exemples proposés ici compilent avec **Babel**. Une application Web permet de tester ses connaissances depuis un navigateur sans installer quoi que ce soit. Par contre, elle ne traduit pas les nouvelles méthodes. Il faut faire appel à d'autres outils pour avoir une application fonctionnelle. ### API Des bibliothèques sont disponibles pour l'implémentation des nouvelles API. **[core-js](https://github.com/zloirock/core-js)** implémente les nouveaux objets et les nouvelles méthodes du langage. Elle s'utilise en complément d'un compilateur comme **Babel**.

AltStyle によって変換されたページ (->オリジナル) /