Introduction
Ecmascript 6 est la prochaine norme pour JavaScript et est en développement rapide. L'objectif d'ECMAScript 6 est de permettre à JavaScript d'être utilisé pour écrire des applications complexes, des bibliothèques de fonctions et des générateurs automatiques de code (générateurs de code). Les derniers navigateurs prennent déjà en charge partiellement la syntaxe d'Ecmascript 6. Ecmascript 6 est actuellement essentiellement la norme de l'industrie, et sa popularité est beaucoup plus rapide que ES5. La raison principale est que les navigateurs modernes prennent en charge ES6 assez rapidement, en particulier les navigateurs Chrome et Firefox, qui prennent déjà en charge la plupart des fonctionnalités dans ES6.
1. LET, CONS et BLOCK SCOPES
LET permet de créer des lunettes au niveau du bloc. ES6 recommande d'utiliser des fonctions de relâchement pour définir des variables au lieu de VAR:
var a = 2; {Soit a = 3; console.log (a); // 3} console.log (a); // 2Une autre façon de déclarer les variables qui sont également valides à la portée au niveau du bloc est const, qui peut déclarer une constante. Dans ES6, la constante déclarée par const est similaire à un pointeur, qui pointe vers une référence, ce qui signifie que ce "const" n'est pas statique, comme:
{const arr = [5,6]; Arr.push (7); console.log (arr); // [5,6,7] arr = 10; // TypeError}Il y a quelques points à noter:
Laissez les variables de mot clé ne disposent pas de la fonction de levage
Les déclarations LET et const ne sont valables que dans le bloc le plus proche (dans les accolades bouclées)
Lorsque vous utilisez la déclaration constante de const, utilisez des variables majuscules, telles que: Capital_casing
const doit être affecté lorsqu'il est déclaré
2. Fonctions de flèche
Dans ES6, la fonction de flèche est une forme courte d'une fonction, en utilisant des supports pour envelopper les paramètres, suivis d'un =>, suivi du corps de fonction:
var getPrice = function () {return 4.55;}; // implémentation avec Arrow functionvar getPrice = () => 4,55;Il convient de noter que la fonction Getprice flèche dans le châtaignier ci-dessus utilise un corps de fonction concise, qui ne nécessite pas de déclaration de retenue. Le châtaignier ci-dessous utilise un corps de fonction normal:
Soit arr = [«pomme», «banane», «orange»]; Laissez le petit-déjeuner = arr.map (fruit => {return fruit + 's';}); console.log (petit-déjeuner); // pommes Bananas OrangesBien sûr, les fonctions Arrow ne consistent pas seulement à rendre le code concis, mais dans la fonction, cette liaison pointe toujours vers l'objet lui-même. Pour plus de détails, vous pouvez jeter un œil aux châtaignes suivantes:
fonction personne () {this.age = 0; setInterval (fonction GrowUp () {// en mode non strict, celui de la fonction GrowUp () pointe vers l'objet de fenêtre this.age ++;}, 1000);} var personne = new personne ();Nous devons souvent utiliser une variable pour enregistrer cela, puis la référencer dans la fonction de croissance:
fonction personne () {var self = this; self.age = 0; setInterval (fonction Growup () {self.age ++;}, 1000);}Et l'utilisation des fonctions flèches peut économiser ce problème:
fonction personne () {this.age = 0; setInterVal (() => {// | this | point à la personne objet this.age ++;}, 1000);} var personne = new personne ();3. Valeur par défaut du paramètre de fonction
ES6 vous permet de définir des valeurs par défaut pour les paramètres de fonction:
Soit GetfinalPrice = (prix, taxe = 0,7) => Prix + Prix * Taxe; GetFinalPrice (500); // 850
4. Opérateur de propagation / repos
L'opérateur de propagation / repos fait référence à ..., qu'il soit réparti ou repos dépend du contexte.
Lorsqu'il est utilisé dans un itérateur, il s'agit d'un opérateur de diffusion:
fonction foo (x, y, z) {console.log (x, y, z);} let arr = [1,2,3]; foo (... arr); // 1 2 3Lorsqu'il est utilisé pour le transfert d'argument de fonction, il s'agit d'un opérateur de repos:
fonction foo (... args) {console.log (args);} foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]5. Extension lexicale de l'objet
ES6 permet de déclarer la syntaxe abrégée lors de la déclaration des littéraux d'objets pour initialiser les méthodes de définition des variables et des fonctions d'attribut, et permet de calculer les opérations dans les propriétés d'objet:
Fonction getCar (make, modèle, valeur) {return {// Abréviation Variable Make, // équivalent à faire: MADE MODÈLE, // équivalent au modèle: Modèle Value, // Équivalent à la valeur: Valeur // L'attribut peut être calculé à l'aide d'expressions [Make '+ Make]: True, // Ignore `` Fonction` Keyword Abbreviation Object Fonction dépréciate () {this.Value - 2500word Abbreviation Object Fonction dépréciate () { }};} let car = getCar ('Barret', 'Lee', 40000); // Sortie: {// Make: 'Barret', // Modèle: 'Lee', // Valeur: 40000, // MakeBarret: true, // dépréciation: function () //}6. Literals binaires et octaux
ES6 prend en charge les littéraux binaires et octaux, qui peuvent être convertis en valeurs binaires en ajoutant 0O ou 0O devant le nombre:
Soit ovalue = 0o10; console.log (ovalue); // 8 Soit bValue = 0b10; // utilise `0b` ou` 0b` console.log (bValue); // 2
7. Destruction de l'objet et du tableau
La déconstruction peut éviter la génération de variables intermédiaires lors de l'affectation d'objet:
fonction foo () {return [1,2,3];} let arr = foo (); // [1,2,3] Soit [a, b, c] = foo (); console.log (a, b, c); // 1 2 3 Fonction Bar () {return {x: 4, y: 5, z: 6};} let {x: x, y: y, z: z} = bar (); console.log (x, y, z); // 4 5 68. Superclasse d'objet
ES6 permet l'utilisation d'une super méthode dans les objets:
var parent = {foo () {console.log ("Bonjour à partir du parent"); }} var child = {foo () {super.foo (); Console.log ("Hello From the Child"); }} Object.setprototypeof (enfant, parent); child.foo (); // Bonjour du parent // Bonjour de l'enfant9. Syntaxe et séparateur du modèle
Il existe un moyen très concis de rassembler un tas de cordes et de variables dans ES6.
$ {...} est utilisé pour rendre une variable
`En tant que séparateur
Laissez user = 'Barret'; console.log (`hi $ {user}!`); // Salut Barret!10. Pour ... de vs pour ... en
car ... est utilisé pour traverser un itérateur, comme un tableau:
Soit surnom = ['di', 'boo', 'punkeye']; nause.Size = 3; pour (laissez le surnom de surnoms) {console.log (surnom);} Résultat: di, boo, punkeyecar ... in est utilisé pour traverser les propriétés dans un objet:
Soit surnom = ['di', 'boo', 'punkeye']; nause.Size = 3; pour (laissez surnom dans les surnoms) {console.log (surnom);} Résultat: 0, 1, 2, taille11. Carte et faiblemap
Il y a deux nouveaux ensembles de structures de données dans ES6: MAP et FaibleMap. En fait, chaque objet peut être considéré comme une carte.
Un objet est composé de plusieurs paires clés-vale. Dans une carte, tout type peut être utilisé comme clé de l'objet, comme:
var mymap = new map (); var keystring = "a string", keyoBj = {}, keyfunc = function () {}; // Définissez la valeur mymap.set (touche, "La valeur est associée à" une chaîne ""); mymap.set (keyoBj, "la valeur est associée à keyoBj"); mymap.set (keyfunc, "la valeur est associée à keyfunc"); mymap.size; // 3 // Obtenez la valeur mymap.get (toucheSring); // "La valeur est associée à" une chaîne "" mymap.get (keyoBj); // "La valeur est associée à" une chaîne "" mymap.get (keyoBj); // "La valeur est associée à" une chaîne "" mymap.get (keyoBj); // "Value Associate avec keyoBj" mymap.get (keyfunc); // "Valeur associée à KeyFunc"Faible map
LowerMap est une carte, mais toutes ses clés sont des références faibles, ce qui signifie que les choses dans lame faible ne sont pas prises en compte lors de la collecte des ordures, et vous n'avez pas à vous soucier des fuites de mémoire lorsque vous l'utilisez.
Une autre chose à noter est que toutes les clés de lame faible doivent être des objets. Il n'a que quatre méthodes: supprimer (clé), a (key), get (key) et set (key, val):
Soit w = new faiblemap (); w.set ('a', 'b'); // non apparié TypeError: valeur non valide utilisée comme clé de carte faible var o1 = {}, o2 = function () {}, o3 = window; W.Set (O1, 37); w.set (o2, "azerty"); w.set (o3, non défini); W.get (O3); // non défini, car c'est la valeur définie w.has (o1); // truew.delete (O1); W.has (O1); // FAUX12. Set et faiblet
Un objet SET est un ensemble de valeurs non répétées et les valeurs en double seront ignorées. Les types de valeur peuvent être primitifs et des types de référence:
Soit MySet = nouveau set ([1, 1, 2, 2, 3, 3]); MySet.size; // 3myset.has (1); // truemySet.add ('Strings'); MySet.add ({a: 1, b: 2});Vous pouvez traverser les objets de définition par ForEach et pour ... de:
mySet.ForEach ((item) => {console.log (item); // 1 // 2 // 3 // 'Strings' // objet {a: 1, b: 2}}); for (Selt Value of MySet) {Console.log (valeur); // 1 // 2 // 3 // 'Strings' // Objet {a: 1, b: 2}}Set a également des méthodes delete () et clairement ().
Faible
Semblable à FaibleMap, l'objet faibleSet vous permet de sauvegarder des références faibles aux objets d'une collection, et les objets de faibleSet ne peuvent apparaître qu'une seule fois:
var ws = new faibleSet (); var obj = {}; var foo = {}; ws.add (fenêtre); ws.add (obj); ws.has (fenêtre); // truews.has (foo); // FAUX, FOO n'a pas été ajouté avec succès ws.delete (fenêtre); // Supprimer l'objet de fenêtre de la combinaison ws.has (fenêtre); // Faux, l'objet Window a été supprimé13. Classe
Il y a une syntaxe de classe dans ES6. Il convient de noter que la classe ici n'est pas un nouveau modèle d'héritage d'objet, ce n'est qu'une expression de sucre syntaxique de la chaîne prototype.
Les méthodes et les propriétés du constructeur sont définies dans la fonction à l'aide du mot-clé statique:
classe tâche {constructeur () {console.log ("tâche instanciée!"); } showId () {console.log (23); } static loadall () {console.log ("Chargement de toutes les tâches .."); }} console.log (TypeOf Task); // functionlet task = new task (); // "tâche instanciée!" Task.showid (); // 23Task.loadall (); // "Chargement de toutes les tâches .."Héritage et supersets dans la classe:
class car {constructor () {console.log ("Création d'une nouvelle voiture"); }} classe Porsche étend la voiture {constructor () {super (); console.log ("Création de Porsche"); }} Soit C = new Porsche (); // Création d'une nouvelle voiture // Création de PorscheExtend permet une sous-classe pour hériter de la classe parent. Il convient de noter que la fonction super () doit être exécutée dans la fonction constructeur de la sous-classe.
Bien sûr, vous pouvez également appeler les méthodes de la classe parent dans les méthodes de sous-classe, telles que super.parentMethodName ().
En savoir plus sur la classe ici.
Il y a quelques points à noter:
La déclaration de la classe ne sera pas hissée. Si vous souhaitez utiliser une classe, vous devez le définir avant de l'utiliser, sinon une erreur de référence sera lancée.
La définition des fonctions dans les classes ne nécessite pas l'utilisation de mots clés de fonction
14. Symbole
Le symbole est un nouveau type de données dont les valeurs sont uniques et immuables. Le but du symbole proposé dans ES6 est de générer un identifiant unique, mais vous ne pouvez pas accéder à cet identifiant:
var sym = symbol ("une description facultative"); console.log (typeof sym); // symboleNotez que le nouvel opérateur ne peut pas être utilisé devant le symbole.
S'il est utilisé comme propriété d'un objet, cette propriété sera inénumérable:
var o = {val: 10, [symbole ("random")]: "je suis un symbole",}; console.log (object.getownpropertyNames (o)); // ValSi vous souhaitez obtenir la propriété du symbole d'objet, vous devez utiliser object.getownPropertySymbols (o).
15. Itérateurs
L'itérateur permet d'accéder à un élément de l'ensemble de données chaque fois qu'un élément est accessible. Lorsque le pointeur pointe vers le dernier élément de l'ensemble de données, l'itérateur sort. Il fournit la fonction suivante () pour itérer sur une séquence, qui renvoie un objet contenant les attributs Done et Value.
Dans ES6, vous pouvez définir un traverser par défaut pour l'objet via Symbol.iterator. Peu importe lorsque l'objet doit être traversé, la méthode Iterator qui exécute sa méthode @@ iterator peut renvoyer un itérateur pour obtenir la valeur.
Le tableau est un itérateur par défaut:
var arr = [11,12,13]; var itr = arr [symbol.iterator] (); itr.next (); // {valeur: 11, fait: false} itr.next (); // {valeur: 12, fait: false} itr.next (); // {valeur: 13, fait: false} itr.next (); // {valeur: non définis, fait: true}Vous pouvez personnaliser un itérateur pour un objet via [symbol.iterator] ().
16. Générateurs
La fonction du générateur est une nouvelle fonctionnalité d'ES6, qui permet à une fonction de renvoyer un objet traversable pour générer plusieurs valeurs.
Dans votre utilisation, vous verrez la * syntaxe et un nouveau rendement de mot-clé:
Fonction * infinIntenumbers () {var n = 1; while (true) {rendement n ++; }} var nombres = infinIntenumbers (); // Renvoie un objet ITable Numbers.Next (); // {valeur: 1, fait: false} nombres.next (); // {valeur: 2, fait: false} nombres.next (); // {valeur: 3, fait: false}Chaque rendement est exécuté, la valeur renvoyée devient la valeur suivante de l'itérateur.
17. Promises
ES6 a un soutien natif pour la promesse. Une promesse est un objet attendant l'exécution asynchrone. Une fois son exécution terminée, son état sera résolu ou rejeté.
var p = nouvelle promesse (fonction (résolution, rejet) {if (/ * condition * /) {// rempli avec succès résoule (/ * valeur * /);} else {// error, rejection reject (/ * raisonnement * /);}});Chaque promesse a une méthode. La première consiste à gérer le rappel de l'état résolu, et l'autre est de gérer le rappel de l'état rejeté:
P.Then ((Val) => Console.log ("Promise Resolved", Val), (err) => console.log ("Promise rejeté", err));Ce qui précède est une introduction au début rapide d'Ecmascript 6 compilé pour tout le monde. Les amis qui en ont besoin peuvent apprendre et y faire référence.