Utilisez ECMAScript 6 aujourd'hui

Dans les langages de programmation orientés objet, un classe est une représentation d'un objet. Il constitue le plan directeur, alors qu'un objet est une instance d'une classe. En ce qui concerne JavaScript, il s’agit d’un langage de programmation sans classe et tout est un objet. Traditionnellement, nous utilisions des fonctions et des prototypes pour implémenter des classes. Explorons un moyen courant d'implémenter une classe dans ES5.

 var Langue = fonction (config) this.name = config.name; this.founder = config.founder; this.year = config.year; ; Language.prototype.summary = function () return this.name + "a été créé par" + this.founder + "dans" + this.year; ;

Voyons maintenant comment ES6 implémente les classes avec une syntaxe de déclaration de classe minimale qui peut être extrêmement importante pour distinguer les classes et les fonctions. Pour coder classe En utilisant la syntaxe ES6, nous utiliserons Traceur de Google, qui est un transpiler qui compile le code ES6 dans ES5. Tout d'abord, créons le html structure de fichier dans laquelle nous allons insérer la syntaxe ES6 pour les classes. Pour compiler le code Traceur, nous avons besoin à la fois de traceur.js compiler Traceur en JavaScript, ainsi que bootstrap.js pour les lier tous. Enfin, Traceur cherchera script type = "text / traceur" balises pour compiler le code correspondant à l'intérieur des balises en JavaScript vanille.

Ensuite, dans le script type = "text / traceur" balises, utilisons la syntaxe ES6 pour implémenter la même classe que nous avons déjà fait pour La langue.

 classe Language constructeur (nom, fondateur, année) this.name = nom; this.founder = fondateur; this.year = year;  summary () return this.name + "a été créé par" + this.founder + "dans" + this.year; 

Nous pouvons maintenant créer une instance du classe de langue en ouvrant le fichier HTML dans le navigateur Chrome comme var js = nouvelle langue. Dans la console, nous verrons également les invites pour les autres propriétés de la langue.!

Avec une déclaration de syntaxe aussi claire, nous pouvons également étendre la classe pour implémenter une sous-classe MetaLanguage qui héritera de toutes les propriétés de la classe parente La langue. Dans la fonction constructeur, nous aurons besoin de la fonction super cela appellera le constructeur de la classe parente afin qu'il puisse hériter de toutes ses propriétés. Enfin, nous pouvons également ajouter des propriétés supplémentaires, telles que version, comme illustré dans le code ci-dessous. Passons en revue la syntaxe de l'ES6 et exécutons-la dans le navigateur Chrome:

 classe MetaLanguage étend Langage constructeur (x, y, z, version) super (x, y, z); this.version = version; 

Traceur est un transpiler utile qui nous permet de coder en utilisant la syntaxe ES6, tout en faisant le gros du travail pour nous de le recompiler à la version actuelle de JavaScript. Essayez également d'autres fonctionnalités ES6 dans Traceur.!

Fonction 4 - Paramètres de fonction par défaut

• Documentation: paramètres de fonction par défaut
• Outil: TypeScript 0.8.3

Avec les paramètres de fonction par défaut, nous pouvons toujours avoir l'option paramètres de fonction en définissant des valeurs par défaut. La syntaxe de cette fonctionnalité dans ES6 est extrêmement intuitive. Les paramètres par défaut sont définis lors de la définition des fonctions. Regardons la syntaxe ES6 ci-dessous dans un nouveau fichier TypeScript avec une extension de * .ts.

 historique des fonctions (lang = "C", année = 1972) return lang + "a été créé autour de l'année" + année; 

Ensuite, nous allons installer TypeScript en tant que module npm et exécuter le fichier. .* ts et le compiler en JavaScript vanille. Voici les commandes d'installation puis de compilation dans la ligne de commande:

 $ npm install -g typescript $ npm voir la version dactylographiée 0.8.3 $ tsc 4-default-params.ts

La commande ci-dessus va créer un fichier JavaScript vanille, appelé 4-default-params.js, qui peut ensuite être appelé à partir d'un fichier HTML. Voici le fichier HTML simple qui appellera le fichier JavaScript externe créé par le compilateur TypeScript:

Enfin, nous allons ouvrir le fichier HTML dans Chrome / Firefox et appeler la fonction l'histoire() deux fois, avec et sans les paramètres de fonction. Notez que le fait de ne transmettre aucun paramètre de fonction retombera sur les paramètres par défaut:

Examinez les autres fonctionnalités TypeScript, y compris classe ou passez par un tutoriel sur TypeScript pour une utilisation plus approfondie.

Feature 5 - Collections

• Documentation: Ensembles et cartes
• Outil: NodeJS v0.10.4

ES6 offre de nouvelles structures de données non disponibles auparavant en JavaScript. Avant d’explorer deux structures de données de ce type (ensembles et cartes), voyons comment utiliser la syntaxe ES6 avec NodeJS. Installez NodeJS; à partir de maintenant, nous allons travailler en ligne de commande. Tout d'abord, nous vérifierons la version de NodeJS installée, puis les options qui activeront les fonctionnalités de l'ES6 à l'aide de la commande noeud --v8-options | harmonie de grep.

 $ node --version v0.10.4 $ noeud --v8-options | grep harmonie --harmony_typeof (active la sémantique de l’harmonie pour typeof) --harmony_scoping (active le ciblage des blocs d’harmonie) --harmony_modules (active les modules d’harmonie (implique le ciblage des blocs)) --harmony_proxies (active le proxy) ensembles, cartes et cartes faibles)) --harmony (active toutes les fonctions d’harmonie (sauf typeof))

Ensuite, démarrez la réplique NodeJS et recherchez les propriétés disponibles pour Set et Maps. Nous allons commencer le NodeJS repl avec noeud --harmonie activer toutes les fonctionnalités de l'ES6.

 $ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['constructeur', 'add', 'a', 'supprimer']> Object.getOwnPropertyNames (Map.prototype) ['constructeur', 'get', ' set ',' has ',' delete ']> .exit $

Ensembles

Les ensembles sont des structures de données simples similaires aux tableaux, mais chaque valeur est unique. Créons un nouveau fichier, appelé 5-sets.js, et insérez du code pour créer, ajouter, supprimer et interroger le nouvel ensemble que nous allons créer. Notez également que nous ajouterons deux fois les données "Hippo", mais dans l’ensemble, elles ne seront enregistrées qu’une seule fois.!

 moteurs var = new Set (); // crée un nouveau Set engines.add ("Gecko"); // add to Set engines.add ("Trident"); engines.add ("Webkit"); moteurs.add ("Hippo"); moteurs.add ("Hippo"); // notez que Hippo est ajouté deux fois à console.log ("Les moteurs de navigateur incluent Gecko?" + engines.has ("Gecko")); // true console.log ("Les moteurs de navigateur incluent Hippo?" + engines.has ("Hippo")); // true console.log ("Les moteurs de navigateur incluent Indigo?" + engines.has ("Indigo")); // false engine.delete ("Hippo"); // delete item console.log ("Hippo est supprimé. Les moteurs de navigateur incluent Hippo?" + engines.has ("Hippo")); // faux

Exécuter le fichier dans le noeud repl avec la commande noeud --harmony 5-set.js. Notez que, même si "Hippo" a été ajouté deux fois à l'ensemble, après l'avoir supprimé, l'ensemble ne l'incluait plus. Ceci illustre encore une fois qu’un ensemble est une structure de données qui ne peut contenir que des valeurs uniques.

Plans

Les cartes sont assez similaires aux paires objet / clé JavaScript. En utilisant une clé unique, nous pouvons récupérer la valeur. Dans ES6, la clé peut être n’importe quel type de données JavaScript et pas seulement des chaînes. C'est la partie intéressante! Créons un nouveau fichier, appelé 5-map.js, pour essayer les fonctionnalités de création, d'obtention et de suppression:

 var es6 = nouvelle carte (); // crée une nouvelle carte es6.set ("edition", 6); // key is string es6.set (262, "standard"); // la clé est le nombre es6.set (indéfini, "nah"); // la clé n'est pas définie var hello = function () console.log ("hello");; es6.set (bonjour, "Bonjour ES6!"); // key is function console.log ("La valeur de 'édition' est-elle existante?" + es6.has ("édition")); // true console.log ("La valeur de 'année' se termine?" + es6.has ("années")); // false console.log ("Une valeur de 262 sorties?" + es6.has (262)); // true console.log ("Valeur des exits non définis?" + es6.has (undefined)); // true console.log ("La valeur de hello () exits?" + es6.has (hello)); // true es6.delete (undefined); // delete map console.log ("Valeur des exits non définis?" + es6.has (undefined)); // false console.log (es6.get (hello)); // Bonjour ES6! console.log ("Le travail est en cours pour ES" + es6.get ("edition")); // Les travaux sont en cours pour ES6

Comme le montrent les fonctionnalités des collections ES6, l'option d'harmonie NodeJS prend déjà en charge d'autres fonctionnalités de l'ES6 telles que la portée des blocs, les mandataires et les modules. Essayez-les aussi dans NodeJS!

Caractéristique 6 - Destructuration

• Documentation: La destruction
• Outil: Navigateur Firefox 20.0: Menu> Outils> Développeur Web> Console Web

Dans les langages de programmation, le terme "déstructuration" désigne une correspondance de motif. Dans ES6, nous pouvons effectuer des correspondances de motifs assez astucieuses dans des tableaux et des objets qui nous auraient précédemment pris plus d’une étape. Explorons certains d'entre eux en les codant dans la console Web de Firefox..

Déstructuration des tableaux

Avec la destruction de tableaux, nous pouvons initialiser des variables à la fois, voire les échanger au lieu d’avoir la méthode conventionnelle de créer un var temp; variable temporaire.

 var [début, fin] = ["terre", "lune"] // initialise console.log (début + "appelant" + fin); // Terre appelant la lune [début, fin] = [fin, début] // échange de variable console.log (début + "appelant" + fin); // la lune appelle la terre

La destruction devient également un raccourci utile lors du renvoi de plusieurs valeurs d'une fonction, car nous n'avons plus besoin d'envelopper un objet. En outre, pour ignorer certaines variables, laissez simplement l'élément de tableau vide:

 fonction équinoxe () return [20, "mars", 2013, 11, 02];  var [date, mois,,] = équinoxe (); console.log ("L'équinoxe de cette année était" + date + mois); // L'équinoxe de cette année a eu lieu le 20 mars

Déstructuration d'objet

En raison de la déstructuration, les variables peuvent également être initialisées à partir d'un objet renvoyé par une fonction même avec des objets profondément imbriqués. En outre, tout comme les modèles de tableau, nous pouvons ignorer ceux qui ne sont pas nécessaires. Voici l'extrait de code qui illustre simplement ceci:

 fonction equinox2 () return date: 20, mois: "mars", année: 2013, heure: heure: 11, // minute imbriquée: 2;  var date: d, mois: m, heure: heure: h = équinox2 (); // h a la valeur de la propriété imbriquée alors que "année" et "minute" sont ignorés totalement console.log ("L'équinoxe de cette année était sur" + d + m + "à" + h); // L'équinoxe de cette année a eu lieu le 20 mars à 11 heures.

Caractéristique 7 - Paramètres de repos et opérateurs d'épandage

• Documentation: Paramètres de repos et opérateur Spread
• Outil: Grunt plugin Traceur

Paramètres de repos

Dans ES6, les paramètres de repos nous permettent d’utiliser facilement quelques paramètres fixes dans une fonction, ainsi que le reste des paramètres de fin et variables. Nous utilisons déjà arguments, qui est un objet de type tableau qui définit les arguments passés à une fonction, mais nous ne pouvons évidemment pas utiliser la fonction tableau pour manipuler ces arguments. Avec une syntaxe claire dans ES6, il déplace également l'intention du développeur dans le niveau de syntaxe avec trois points … dénoter un nombre variable d'arguments.

Essayons d'utiliser les paramètres rest dans la syntaxe ES6 avec gruntjs et son plugin pour le transpiler traceur, que nous avons utilisés dans la section précédente..

1. Installez l'utilitaire de ligne de commande grunt:

    $ npm désinstaller -g grunt $ npm installer -g grunt-cli

2. Créez un fichier, appelé package.json, qui définira les différents modules nécessaires à l’exécution de Grunt. Notez que cette liste de dépendances inclut le plugin traceur:

    "name": "rest-params", "version": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"

3. Créer le Gruntfile.js qui ne contiendra qu'une tâche traceur cela convertira la syntaxe ES6 en JavaScript aujourd'hui. Avec cela, nous pourrons essayer les paramètres de repos ES6.

    module.exports = fonction (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')), suivi: custom: fichiers: 'js /': ['rest-spread.js '] // dest: [fichiers source]); grunt.loadNpmTasks ('grunt-traceur'); grunt.registerTask ('default', ['traceur']); ;

4. Créer un simple index.html appeler le fichier JavaScript compilé par traceur, js / rest-spread.js:

5. Plus important encore, nous allons créer le fichier rest-spread.js, qui contiendra la syntaxe du paramètre reste:

    function push (array,… items) // définition des paramètres de repos avec la syntaxe à 3 points items.forEach (function (item) array.push (item); console.log (item););  // 1 paramètres fixes fixes + 4 variables var planets = []; console.log ("Les planètes intérieures de notre système solaire sont:"); pousser (planètes, "Mercure", "Vénus", "Terre", "Mars"); // paramètres de repos

6. Enfin, nous allons courir grognement dans la ligne de commande, qui exécutera par défaut la tâche traceur et créera le fichier, js / 5-rest-spread.js. Ensuite, il suffit de voir le fichier index.html dans la console du navigateur:

    $ npm install $ grunt ╰─ $ grunt Exécution de la tâche "traceur: custom" (traceur) js / ['rest-spread.js'] Compilation… js / Compilation réussie - js / Écriture… js / js / rest-spread.js réussi. Écriture réussie - [objet Objet]

   

Opérateur de propagation

Un opérateur de propagation est l'opposé des paramètres de repos. Lorsque vous appelez une fonction, vous pouvez transmettre l'argument fixe nécessaire ainsi qu'un tableau de taille variable avec la syntaxe bien connue, à trois points, pour indiquer le nombre variable d'arguments..

Nous utiliserons le même projet que les paramètres restants ci-dessus et ajouterons le code d'opérateur d'étalement au fichier. rest-spread.js. Dans l'exemple ci-dessous, la fonction nécessite six arguments distincts. Lors de l'appel de la fonction, les données sont transmises sous forme de tableau avec l'opérateur spread. Voyons à quoi ressemble la syntaxe, lors de l'appel de la fonction avec des arguments fixes ainsi qu'un nombre variable d'arguments:

1. Ajouter le code d'opérateur de propagation à rest-spread.js:

    // Opérateur de propagation "… lien au Web" fonction createURL (commentaire, chemin, protocole, sous-domaine, domaine, tld) var shoutout = commentaire + ":" + protocole + ": //" + sous-domaine + "." + domaine + "." + tld + "/" + chemin; console.log (shoutout);  var weblink = ["hypertexte / WWW / TheProject.html", "http", "info", "cern", "ch"], comment = "le premier site Web du monde"; createURL (commentaire,… lien Web); // opérateur de propagation

2. Exécutez la compilation traceur via la tâche Grunt en ligne de commande et affichez le fichier., index.html, dans le navigateur:

    $ grunt Exécution de "traceur: custom" (traceur) tâche js / ['rest-spread.js'] Compilation… js / Compilation réussie - js / Écriture… js / js / rest-spread.js réussie. Écriture réussie - [objet Objet] Fait, sans erreur.

   

Si vous utilisez déjà GruntJS en tant qu'outil de construction dans votre projet actuel, il sera facile de l'intégrer aux plug-ins ES6. Essayez donc d’autres plug-in liés à GruntJS ES6 pour compiler la syntaxe ES6 en JavaScript actuel..

Feature 8 - Itérateurs

• Documentation: Itérateur
• Outil: Navigateur Firefox 20.0: Menu> Outils> Développeur Web> Console Web

Offres JavaScript pour-dans pour itération, mais il a certaines limites. Par exemple, dans une itération de tableau, les résultats avec un pour-dans boucle nous donnera les index et non les valeurs. Jetons un coup d'œil au code ci-dessous pour illustrer ceci:

 var planètes = ["Mercure", "Vénus", "Terre", "Mars"]; pour (p sur les planètes) console.log (p); // 0,1,2,3 var es6 = édition: 6, comité: "TC39", standard: "ECMA-262"; pour (e in es6) console.log (e); // édition, comité, standard

Essayons le même concept, mais cette fois-ci avec pour-de avec un tableau, un ensemble et une carte:

 var planètes = ["Mercure", "Vénus", "Terre", "Mars"]; pour (p des planètes) console.log (p); // Mercure, Vénus, Terre, Mars var engines = Set (["Gecko", "Trident", "Webkit", "Webkit"]); pour (var e des moteurs) console.log (e); // Set n'a que des valeurs uniques, par conséquent Webkit ne s'affiche qu'une seule fois var es6 = new Map (); es6.set ("édition", 6); es6.set ("comité", "TC39"); es6.set ("standard", "ECMA-262"); for (var [nom, valeur] de es6) console.log (nom + ":" + valeur); 

Article 9 - Compréhension du tableau

• Documentation: Compréhension du tableau
• Outil: Navigateur Firefox 20.0: Menu> Outils> Développeur Web> Console Web

Les compréhensions de tableau nous donnent une syntaxe abrégée pour manipuler chacun des contenus de tableau dans un certain motif. C'est très semblable à la carte() ou filtre() méthodes disponibles dans l'objet Array. Examinons comment nous utilisons carte()

 température var = [0, 37, 100]; fonction degToKelvin (deg) return deg + 273;  temperature.map (degToKelvin); // [273, 310, 373]

Examinons la même fonctionnalité dans Firefox pour voir la syntaxe abrégée dans ES6 afin de créer des tableaux comportant jusqu'à trois boucles pour créer des solutions possibles pour le jeu, Cluedo:

 // Tableau créé avec 1 boucle var temperature = [0, 37, 100]; [t + 273 pour (t de température)]; // [273, 310, 373] // Tableau créé avec trois boucles var suspects = ["Miss Scarlet", "Colonel Mustard"], arms = ["Chandelier", "Dague"], rooms = ["Cuisine", "Salle de bal"]; [(console.log (s + "avec un" + w + "dans le" + r)) pour (s de suspects) pour (w d’armes) pour (r de pièces)];

Feature 10 - Modules

• Documentation: Modules, exemples de modules, chargeurs de modules
• Outil: Transpiler de module ES6

Dans les langages de programmation, les modules effectuent des fonctions discrètes isolées et sont indépendants les uns des autres. Cela permet non seulement de créer des composants réutilisables sur plusieurs projets, mais également de garder les erreurs isolées sur les pièces liées au projet actuel. Nous avons créé des modules en JavaScript généralement avec AMD ou CommonJS. Créons un module simple en utilisant la syntaxe ES6 et le transpiler de module ES6.