4 nouvelles syntaxes en javascript 6

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); // 2

Dans 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éfini

Dans 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.