La version ES6 de JS a été largement prise en charge par les principaux navigateurs, et de nombreux cadres frontaux ont également utilisé ES6, et Babel peut être utilisé pour la compatibilité, de sorte que ES6 est entré dans l'étape de l'application.
Si vous n'êtes pas familier avec ES6, voici 4 usages de base simples qui peuvent vous aider à comprendre rapidement ES6
1. Déclarer les variables en utilisant le LET et const et const
Dans le code ES5 traditionnel, il y a deux principaux problèmes avec les déclarations variables
(1) Manque de soutien à la portée du bloc
(2) les constantes ne peuvent pas être déclarées
Dans ES6, ces deux problèmes ont été résolus, ajoutant deux nouveaux mots clés: let et const
Utiliser LET pour la portée du bloc
var a = 1; if (true) {var b = 2;} console.log (a); // 1Console.log (b); // 2Dans ES5, la variable B déclarée dans le bloc IF est accessible à l'extérieur du bloc.
// dans es6let a = 1; if (true) {Soit b = 2;} console.log (a); // 1Console.log (b); // référence: b n'est pas définiDans ES6, la variable B a déclaré utiliser le bloc si le bloc ne peut pas être accessible à l'extérieur du bloc
Le code suivant est une situation de confusion commune
var a = []; for (var i = 0; i <5; i ++) {a.push (function () {console.log (i);});} a.ForEach (function (value) {value ();});Les résultats de la course sont: 5, 5, 5, 5, 5
Utiliser let pour déclarer la variable I en boucle
var b = []; for (Soit i = 0; i <5; i ++) {b.push (function () {console.log (i);});} b.ForEach (function (value) {value ();});Les résultats de la course sont: 0, 1, 2, 3, 4
Définir les constantes en utilisant Const
// dans es5var my_constant = true; my_constant = false;
Les constantes ne peuvent pas être définies dans ES5, les valeurs peuvent être modifiées et nous ne pouvons que les garantir nous-mêmes.
// dans es6const my_constant = true; my_constant = false; // non apparenté TypeError: affectation à une variable constante
Const déclaré dans ES6 ne peut pas être modifié
2. String de modèle
La méthode suivante d'épissage des chaînes et des variables est plus courante
var url = 'http: // www.' + domaine + '.com /' + path + '?' + queryparams;
ES6 fournit une utilisation concise
Laissez url = `http: //www.$ {domaine} .com / $ {path}? $ {queryParams}`;
3. Nouveaux objets d'ensemble et de carte
Dans ES5, nous utilisons souvent des tableaux pour stocker des données dynamiques, par exemple
var collection = []; collection.push (1, 2, 1); console.log (collection); // [1, 2, 1]
Il contient des données en double. Si vous ne voulez pas de données en double, vous devez utiliser le code pour les juger.
fonction addToCollection (collection, valeur) {if (collection.indexof (valeur) <0) {collection.push (value)}}ES6 fournit des objets définis, ce qui rend beaucoup plus pratique de gérer cette situation.
Soit Collection = nouveau set (); collection.add (1); collection.add (2); collection.add (1); console.log (collection); // Définit {1, 2}L'ensemble peut également traverser l'entraînement et traiter les données de l'ensemble.
ES5 est généralement utilisé pour stocker les données des paires de valeurs clés, par exemple
var collection = {}; collection.a = 'abc'; collection.b = 'xyz';ES6 a une carte, donc il peut être utilisé
Soit Collection = new Map (); Collection.Set ('A', 'ABC'); Collection.Set ('B', 'XYZ');La traversée est également très simple
Collection.ForEach (fonction (valeur, key) {console.log (key + ":" + value);}); console.log (collection.size);4. Paramètres de fonction
Il existe deux nouvelles fonctionnalités pour les paramètres des fonctions dans ES6
valeur par défaut
fonction dosomething (someObject) {console.log (someObject);}Il peut y avoir une erreur d'exécution ici et les paramètres doivent être vérifiés.
fonction dosomething (someObject) {if (someObject === Undefined) {someObject = {}; } console.log (SomeObject);}Ce type de code de vérification est très courant. Vous pouvez définir des valeurs par défaut pour les paramètres dans ES6, ce qui est beaucoup plus simple.
fonction dosomething (someObject = {}) {console.log (someObject);}Destruction d'objets
Nous passons souvent un objet contenant des paires de valeurs de clé comme paramètres à une fonction, puis obtenons les différentes propriétés de l'objet dans la fonction
fonction dosomething (someObject) {var one = someObject.propone; console.log (un); var deux = someObject.proptwo; console.log (deux); var trois = someObject.propTe; console.log (trois);}ES6 nous permet de déconstruire les paramètres d'objet directement dans les paramètres
fonction dosomething ({propone, proptwo, propeTre}) {console.log (propone); Console.log (Proptwo); Console.log (Propterre);}Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.