ECMAScript 6 - 10 nouvelles fonctionnalités impressionnantes
Saviez-vous que JavaScript (avec JScript et ActionScript) est une implémentation d'une spécification de langage de script côté client générale appelée ECMAScript? Pour rendre cette définition un peu plus attrayante, nous pouvons dire que ECMAScript (ou officiellement ECMA-262) est la norme qui définit la manière dont nous utilisons JavaScript et ce que nous pouvons accomplir avec ça.
ECMAScript 2015 (ou ES6), la 6ème édition du langage, est probablement la mise à jour la plus importante depuis la première version en 1997. L'objectif principal de la dernière version était de fournir un meilleur support pour la création d'applications et de bibliothèques plus volumineuses. Cela signifie une syntaxe plus évoluée, de nouveaux raccourcis facilitant le codage, ainsi que de nouvelles méthodes, mots-clés, types de données et de nombreuses autres améliorations..
La documentation de l'ES6 est exhaustive. Si vous aimez lire beaucoup, vous pouvez télécharger les spécifications complètes sur le site Web de ECMA International. Dans cet article, nous examinerons 10 fonctionnalités choisies à la main, même si ES6 a beaucoup plus à offrir. Si vous souhaitez expérimenter, ES6 Fiddle est un excellent endroit pour le faire. Vous pouvez également y trouver des extraits de code..
Prise en charge d'ECMAScript 6
Les éditeurs de navigateurs ont progressivement ajouté la prise en charge des fonctionnalités d’ECMAScript 6. Vous trouverez ici un tableau de compatibilité intéressant sur la prise en charge des navigations et du compilateur pour les nouvelles fonctionnalités..
Si vous êtes intéressé par la prise en charge ES6 dans Node.js, consultez la documentation ici..
Bien que toutes les fonctionnalités ne soient pas actuellement prises en charge, nous pouvons utiliser des transpileurs tels que Babel pour transcrire notre code ES6 en ES5. Il y a un plugin Grunt cool pour Babel, de nombreux plugins ES6 impressionnants pour Grunt et un plugin Gulp-Babel génial, alors, heureusement, nous avons beaucoup de choix.
De cette façon, nous pouvons commencer à utiliser la syntaxe et les fonctionnalités améliorées, sans avoir à nous soucier des problèmes de compatibilité. Voyons maintenant les caractéristiques.
1. Nouveau laisser Mot-clé
ES6 présente le nouveau laisser mot-clé qui nous permet de déclarer des variables locales dans la portée d'un bloc, telles qu'une instruction, une expression ou une fonction (n inner). Par exemple, nous pouvons déclarer un pour boucle de la manière suivante, puis réutilise le même nom de variable (car sa portée est limitée à la pour boucle) à l'intérieur du prochain si déclaration:
pour (soit i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Nous réutilisons "i" laissons i = x * y
En utilisant le laisser mot-clé conduit à un code plus propre et plus utilisable. La différence entre laisser et var est dans la portée, par exemple une variable locale définie par le var mot-clé peut être utilisé dans toute la fonction englobante, tandis que les variables définies par laisser ne travaillent que dans leur propre (sous) bloc. Laisser peut également être utilisé globalement, dans ce cas, il se comporte de la même manière que var. Bien sûr, dans ES6, nous pouvons toujours utiliser var Si nous voulons.
2. Nouveau const Mot-clé
Le nouveau const mot clé permet de déclarer des constantes, également appelées variables immuables, auxquelles nous ne pouvons pas réaffecter un nouveau contenu ultérieurement.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Erreur silencieuse, nous ne pouvons pas réaffecter une nouvelle valeur à une constante
Les variables immuables ne sont pas toujours totalement immuables dans ECMAScript 6, bien que, comme si une constante contient un objet, nous pouvons ultérieurement modifier la valeur de ses propriétés et méthodes. La même chose est vraie pour les éléments d'un tableau.
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
Nous ne pouvons toujours pas réaffecter directement une nouvelle valeur à l'objet MY_CONSTANT dans le fragment de code ci-dessus, ce qui signifie que nous ne pouvons pas modifier le nom des propriétés et des méthodes, ni créer ni créer de nouveau, ni supprimer un nom existant. chose suivante:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // Erreur
3. Fonctions fléchées
ECMAScript 6 facilite notre écriture fonctions anonymes, comme nous pouvons complètement omettre le une fonction mot-clé. Il suffit d’utiliser la nouvelle syntaxe pour fonctions de flèche, nommé d'après le signe => flèche (grosse flèche), qui nous fournit un excellent raccourci.
// 1. Un paramètre dans ES6 let sum = (a, b) => a + b; // dans ES5 var sum = fonction (a, b) return a + b; ; // 2. Sans paramètres dans ES6 let randomNum = () => Math.random (); // dans ES5 var randomNum = function () return Math.random (); ; // 3. Sans retour dans ES6, laissez message = (nom) => alert ("Hi" + nom + "!"); // dans ES5 var message = function (yourName) alert ("Hi" + yourName + "!"); ; Il existe une différence importante entre les fonctions normales et les fonctions de flèche, c’est-à-dire que les fonctions de flèche ne reçoivent pas ce valeur automatiquement comme des fonctions définies avec le une fonction mot clé faire. Fonctions de flèche lier lexicalement la ce valeur à la portée actuelle. Cela signifie que nous pouvons facilement réutiliser le ce mot clé dans une fonction interne. Dans ES5, cela n'est possible qu'avec le hack suivant:
// ES5 Hack pour utiliser le mot-clé "this" dans une fonction interne … addAll: function addAll (pièces) var self = this; _.each (pièces, fonction (pièce) self.add (pièce);); ,… // ES6 la même fonction interne peut désormais utiliser son propre "ceci" … addAll: fonction addAll (pièces) _.each (pièces, pièce => ceci.add (pièce)); ,…
Le code ci-dessus est de Mozilla Hacks
4. Nouveau propager Opérateur
Le nouveau propager L’opérateur est marqué avec 3 points (…), et nous pouvons l’utiliser pour signer la place de plusieurs éléments attendus. L'un des cas d'utilisation les plus courants de l'opérateur spread consiste à insérer les éléments d'un tableau dans un autre tableau:
laissez myArray = [1, 2, 3]; let newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
Nous pouvons également tirer parti de la propager opérateur dans les appels de fonction dans lesquels nous voulons transmettre les arguments d'un tableau:
laissez myArray = [1, 2, 3]; fonction somme (a, b, c) retourne a + b + c; console.log (sum (… myArray)); // 6
le propager l'opérateur est assez flexible, car il peut être utilisé plusieurs fois dans le même tableau ou appel de fonction.
5. Valeurs par défaut pour les paramètres et les nouveaux paramètres de repos
Bonne nouvelle, dans ECMAScript 6, nous pouvons ajouter des valeurs par défaut aux paramètres d'une fonction. Cela signifie que si nous ne transmettons pas d'arguments plus tard dans l'appel de la fonction, les paramètres par défaut seront utilisés. Dans ES5, les valeurs par défaut des paramètres sont toujours définies sur indéfini, la nouvelle possibilité de les définir comme bon nous semble est donc une grande amélioration de la langue.
fonction somme (a = 2, b = 4) retour a + b; console.log (sum ()); // 6 console.log (sum (3, 6)); // 9
ES6 introduit également un nouveau type de paramètre, le paramètres de repos. Ils ont l’air et travaillent de la même manière pour propager les opérateurs. Ils sont pratiques si nous ne savons pas combien d’arguments seront passés plus tard dans l’appel de la fonction. Nous pouvons utiliser les propriétés et les méthodes des paramètres de l'objet Array on rest:
fonction putInAlphabet (… args) let Trier = = args.sort (); retour trié; console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t 6. Nouveau pour… de Déclaration
Avec l'aide du nouveau pour… de boucle, nous pouvons facilement parcourir des tableaux ou d’autres objets itérables. Avec le nouveau pour… de ECMAScript 6 introduit également deux nouveaux objets itérables, Map pour les mappes clé / valeur, et Set pour les collections de valeurs uniques pouvant également être des valeurs primitives et des références d’objet. Quand on utilise le pour… de instruction, le code à l'intérieur du bloc est exécuté pour chaque élément de l'objet itérable.
laissez myArray = [1, 2, 3, 4, 5]; laisser somme = 0; pour (let i de myArray) sum + = i; console.log (sum); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Littéraux de modèle
ECMAScript 6 nous offre une nouvelle alternative pour la concaténation de chaînes. Littéraux de modèles nous permettent de créer facilement des modèles dans lesquels nous pouvons intégrer différentes valeurs à n’importe quel endroit de notre choix. Pour ce faire, nous devons utiliser le $ … la syntaxe partout où nous voulons insérer les données que nous pouvons transmettre à partir de variables, de tableaux ou d'objets de la manière suivante:
let customer = title: 'Ms', prénom: 'Jane', nom de famille: 'Doe', age: '34'; let template = 'Dear $ customer.title $ customer.firstname $ customer.surname! Joyeux $ client.age e anniversaire! '; console.log (modèle); // Chère Mme Jane Doe! Joyeux 34ème anniversaire!
8. cours
ES6 introduit des classes JavaScript basées sur l'héritage existant basé sur un prototype. La nouvelle syntaxe facilite la création d'objets, exploite l'héritage et réutilise le code. Cela permettra également aux débutants venant d’autres langages de programmation de mieux comprendre le fonctionnement de JavaScript..
Dans ES6, les classes sont déclarées avec le nouveau classe mot-clé, et besoin d'avoir un constructeur() méthode qui est appelée quand un nouvel objet est instancié en utilisant le new myClass () syntaxe. Il est également possible d’étendre de nouvelles classes avec le classe Child étend le parent syntaxe qui peut être familière à partir d'autres langages orientés objet tels que PHP. Il est également important de savoir que, contrairement aux déclarations de fonction et de variable, les déclarations de classe ne sont PAS levées dans ECMAScript 6..
class Polygon constructeur (hauteur, largeur) // constructeur de classe this.name = 'Polygon'; this.height = height; this.width = width; sayName () // méthode de classe console.log ('Bonjour, je suis un', this.name + '.'); let myPolygon = new Polygon (5, 6); console.log (myPolygon.NomDay ()); // Salut, je suis un polygone. Code ci-dessus à partir d'ES6 exemples de violon, .
9. Modules
Vous êtes-vous déjà demandé quelle serait la fraîcheur si JavaScript était modulaire? Bien entendu, il existait des solutions de contournement telles que CommonJS (utilisé dans Node.js) ou AMD (définition de module asynchrone) (utilisées dans RequireJS), mais ES6 introduit les modules en tant que fonctionnalité native..
Nous devons définir chaque module dans son propre fichier, puis utiliser le exportation mot clé pour exporter des variables et des fonctions à autres fichiers, et le importation mot-clé pour les importer de autres fichiers, selon la syntaxe suivante:
// functions.js function cube (a) retourne a * a * a; fonction cubeRoot (a) return Math.cbrt (a); export cube, cubeRoot // ou: export cube comme cb, cubeRoot comme cr // app.js import cube, cubeRoot de 'fonctions'; console.log (cube (4)); // 64 console.log (cubeRoot (125)); // 5
Cette solution est brillante, car le code stocké dans un module est invisible de l'extérieur et nous devons exporter uniquement la partie à laquelle nous souhaitons avoir accès par d'autres fichiers. Nous pouvons faire beaucoup plus de choses incroyables avec les modules ES6. Vous trouverez ici une explication détaillée et détaillée à leur sujet..
10. Charge de nouvelles méthodes
ECMAScript 6 introduit de nombreuses nouvelles méthodes pour le prototype de chaîne, l’objet de tableau, le prototype de tableau et l’objet mathématique existants. Les nouvelles méthodes peuvent considérablement améliorer la manière dont nous pouvons manipuler ces entités. Mozilla Dev a d'excellents exemples de code des nouvelles additions, cela vaut la peine de prendre du temps et de les examiner de manière approfondie.
Juste pour montrer à quel point ils sont vraiment cool, voici mon préféré: la méthode de recherche du prototype Array, qui nous permet de tester certains critères sur les éléments d’un tableau en exécutant la fonction de rappel sur chaque élément, puis en renvoyant le premier élément résultats vrai.
fonction isPrime (élément, index, tableau) var start = 2; tant que (début <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // non défini, non trouvé console.log ([4, 5, 8, 12] .find (isPrime)); // 5
Code ci-dessus à partir de: Mozilla Dev
