Partager:
Qu'est-ce que ES6 et ce que les programmeurs Javascript doivent savoir
ES6 fait référence à la version 6 du langage de programmation ECMA Script. ECMA Script est le nom normalisé de JavaScript. Qu'est-ce que JavaScript? Et Internet peut-il exister sans elle? Qu'est-ce que JavaScript et Internet peut-il exister sans cela? JavaScript est l'une de ces choses que beaucoup prennent pour acquis. Tout le monde l'utilise. En savoir plus et la version 6 est la prochaine version après la version 5, parue en 2011. Elle constitue une amélioration majeure du langage JavaScript et ajoute de nombreuses autres fonctionnalités destinées à faciliter le développement de logiciels à grande échelle..
ECMAScript, ou ES6, a été publié en juin 2015. Il a par la suite été renommé ECMAScript 2015. La prise en charge du navigateur Web pour la langue complète n'est pas encore terminée, bien que des parties importantes soient prises en charge. Les principaux navigateurs Web prennent en charge certaines fonctionnalités de ES6. Cependant, il est possible d’utiliser un logiciel appelé transpiler convertir le code ES6 en ES5, ce qui est mieux pris en charge par la plupart des navigateurs.
Voyons maintenant quelques modifications majeures apportées par ES6 à JavaScript..
1. Constantes
Enfin, le concept de constantes a été rendu à JavaScript! Les constantes sont des valeurs qui ne peuvent être définies qu'une seule fois (par portée, portée expliquée ci-dessous). Une redéfinition dans la même portée déclenche une erreur.
const JOE = 4.0 JOE = 3.5 // entraîne: Uncaught TypeError: Affectation à une variable constante.. Vous pouvez utiliser la constante partout où vous pouvez utiliser une variable (var).
console.log ("La valeur est:" + joe * 2) // impressions: 8 2. Variables et fonctions à blocs
Bienvenue au 21ème siècle, JavaScript! Avec ES6, les variables déclarées à l'aide de laisser (et les constantes décrites ci-dessus) suivent les règles de périmètre de bloc, comme en Java, C ++, etc..
Avant cette mise à jour, les variables en JavaScript étaient étendues à la fonction. En d’autres termes, lorsque vous aviez besoin d’une nouvelle portée pour une variable, vous deviez la déclarer dans une fonction..
Les variables conservent la valeur jusqu'à la fin du bloc. Après le bloc, la valeur dans le bloc externe (le cas échéant) est restaurée.
let x = "bonjour"; let x = "world"; console.log ("bloc interne, x =" + x); console.log ("bloc externe, x =" + x); // affiche le bloc interne, x = bloc externe du monde, x = bonjour Vous pouvez aussi redéfinir les constantes, au sein de tels blocs.
let x = "bonjour"; const x = 4,0; console.log ("bloc interne, x =" + x); essayez x = 3.5 catch (err) console.error ("bloc interne:" + err); x = "monde"; console.log ("bloc externe, x =" + x); // affiche le bloc interne, x = 4: "TypeError": affectation à une variable constante. bloc externe, x = monde 3. Fonctions de flèche
ES6 apporte une nouvelle syntaxe pour définir les fonctions à l'aide d'une flèche. Dans l'exemple suivant, X est une fonction qui accepte un paramètre appelé une, et retourne son incrément:
var x = a => a + 1; x (4) // retourne 5 En utilisant cette syntaxe, vous pouvez facilement définir des arguments dans des fonctions..
Utiliser avec un pour chaque():
[1, 2, 3, 4] .pour chaque (a => console.log (a + "=>" + a * a)) // imprime 1 => 1 2 => 4 3 => 9 4 => 16 Définissez les fonctions acceptant plusieurs arguments en les mettant entre parenthèses:
[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // retourne [3, 22, 44, 67, 98] 4. Paramètres de fonction par défaut
Les paramètres de fonction peuvent maintenant être déclarés avec des valeurs par défaut. Dans ce qui suit, X est une fonction avec deux paramètres une et b. Le second paramètre b est donné une valeur par défaut de 1.
var x = (a, b = 1) => a * b x (2) // retourne 2 x (2, 2) // retourne 4 Contrairement aux autres langages tels que C ++ ou python, les paramètres avec des valeurs par défaut peuvent apparaître avant ceux sans valeurs par défaut. Notez que cette fonction est définie comme un bloc avec un revenir valeur à titre d'illustration.
var x = (a = 2, b) => retourne a * b Cependant, les arguments sont appariés de gauche à droite. Dans la première invocation ci-dessous, b a un indéfini valeur même si une a été déclaré avec une valeur par défaut. L'argument transmis est associé à une plutôt que b. La fonction retourne NaN.
x (2) // retourne NaN x (1, 3) // retourne 3 Quand vous passez explicitement indéfini comme argument, la valeur par défaut est utilisée s'il y en a un.
x (non défini, 3) // retourne 6 5. Paramètres de la fonction de repos
Lors de l'appel d'une fonction, il est parfois nécessaire de pouvoir transmettre un nombre arbitraire d'arguments et de traiter ces arguments dans la fonction. Ce besoin est géré par le paramètres de la fonction de repos syntaxe. Il fournit un moyen de capturer le reste des arguments après les arguments définis en utilisant la syntaxe indiquée ci-dessous. Ces arguments supplémentaires sont capturés dans un tableau.
var x = fonction (a, b,… args) console.log ("a =" + a + ", b =" + b + "," + args.length + "args à gauche"); x (2, 3) // affiche a = 2, b = 3, 0 argument à gauche x (2, 3, 4, 5) // affiche a = 2, b = 3, 2 arguments à gauche 6. Modèles de cordes
Le modèle de chaîne fait référence à l'interpolation de variables et d'expressions dans des chaînes en utilisant une syntaxe telle que perl ou le shell. Un modèle de chaîne est entouré de caractères de coche en arrière ('). En revanche, les guillemets simples (') ou des guillemets doubles (“) indiquent des chaînes normales. Les expressions à l'intérieur du modèle sont marquées entre $ et . Voici un exemple:
var name = "joe"; var x = 'hello $ name' // renvoie "hello joe" Bien sûr, vous pouvez utiliser une expression arbitraire pour l'évaluation.
// définit une fonction de flèche var f = a => a * 4 // définit une valeur de paramètre var v = 5 // et évalue la fonction dans le modèle de chaîne var x = 'hello $ f (v)' // renvoie "bonjour 20" Cette syntaxe de définition de chaînes peut également être utilisée pour définir des chaînes multilignes..
var x = 'hello world next line' // retourne hello world next line 7. Propriétés de l'objet
ES6 apporte une syntaxe de création d'objet simplifiée. Regardez l'exemple ci-dessous:
var x = "bonjour le monde", y = 25 var a = x, y // est équivalent à l'ES5: x: x, y: y Les noms de propriété calculés sont également très astucieux. Avec ES5 et les versions antérieures, pour définir une propriété d'objet avec un nom calculé, vous deviez procéder comme suit:
var x = "bonjour le monde", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a est maintenant: x: "bonjour le monde", y: 25 , joe25: 4 Maintenant, vous pouvez tout faire dans une seule définition:
var a = x, y, ["joe" + y]: 4 // retourne x: "hello world", y: 25, joe25: 4 Et bien sûr, pour définir des méthodes, vous pouvez simplement le définir avec le nom suivant:
var a = x, y, ["joe" + y]: 4, toto (v) return v + 4 a.foo (2) // renvoie 6 8. Syntaxe de définition de classe formelle
Définition de classe
Et enfin, JavaScript obtient une syntaxe de définition de classe formelle. Bien qu'il s'agisse simplement d'un sucre syntaxique par rapport aux classes basées sur les types de prototypes déjà disponibles, il sert néanmoins à améliorer la clarté du code. Cela signifie que cela fait ne pas ajouter un nouveau modèle d'objet ou quelque chose d'extraordinaire comme ça.
class Circle constructeur (rayon) this.radius = rayon // l'utiliser var c = nouveau cercle (4) // retourne: cercle rayon: 4 Méthodes de déclaration
Définir une méthode est également assez simple. Pas de surprises là-bas.
classe Circle constructeur (rayon) this.radius = rayon computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // retourne: 50.26548245743669 Getters et Setters
Nous avons maintenant des getters et des setters, avec une simple mise à jour de la syntaxe. Laissez-nous redéfinir le Cercle classe avec un surface propriété.
class Circle constructeur (radius) this.radius = radius get area () return Math.PI * this.radius * this.radius var c = new Circle (4) // retourne: Circle radius: 4 c.area // retourne: 50.26548245743669 Ajoutons maintenant un passeur. Pour pouvoir définir rayon en tant que propriété réglable, nous devrions redéfinir le champ réel à _rayon ou quelque chose qui ne sera pas en conflit avec le passeur. Sinon, nous rencontrons une erreur de débordement de pile.
Voici la classe redéfinie:
classe Cercle constructeur (rayon) this._radius = radius get area () return Math.PI * this._radius * this._radius set radius (r) this._radius = r (4) // retourne: Cercle _radius: 4 c.area // renvoie: 50.26548245743669 c.radius = 6 c.area // retourne: 113.09733552923255 Dans l’ensemble, c’est un ajout intéressant à JavaScript orienté objet..
Héritage
En plus de définir des classes en utilisant le classe mot-clé, vous pouvez également utiliser le s'étend mot clé à hériter des super classes. Voyons comment cela fonctionne avec un exemple.
class Ellipse constructeur (largeur, hauteur) this._width = width; this._height = height; get area () return Math.PI * this._width * this._height; set width (w) this._width = w; set height (h) this._height = h; Classe Cercle étend Ellipse constructeur (rayon) super (rayon, rayon); définir rayon (r) super.width = r; super.height = r; // créer un cercle var c = new Circle (4) // retourne: Circle _width: 4, _height: 4 c.radius = 2 // c est maintenant: Circle _width: 2, _height: 2 c.area // renvoie: 12.566370614359172 c.radius = 5 c.area // renvoie: 78.53981633974483 Et ce fut une brève introduction à certaines des fonctionnalités de JavaScript ES6.
Etape suivante: Script d'une animation de robot sensible à la voix Comment écrire une animation de robot sensible à la voix dans p5.js Comment Script d'une animation de robot sensible à la voix dans p5.js Vous voulez intéresser vos enfants à la programmation? Montrez-leur ce guide pour la construction d’une tête de robot animée réactive et réceptrice. Lire la suite !
Crédit d'image: micrologia / Depositphotos
En savoir plus sur: JavaScript, .