ES6 fait référence à la version 6 du langage de programmation ECMA Script. ECMA Script est le nom standardisé de JavaScript, et la version 6 est la prochaine version après la version 5, qui a été publiée en 2011. Il s'agit d'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 ensuite été renommé ECMAScript 2015. La prise en charge du navigateur Web pour le langage complet n'est pas encore terminée, bien que la majeure partie soit prise en charge. Les principaux navigateurs Web prennent en charge certaines fonctionnalités d'ES6. Cependant, il est possible d'utiliser un logiciel appelé transpiler pour convertir le code ES6 en ES5, qui est mieux pris en charge sur la plupart des navigateurs.
Voyons maintenant quelques changements majeurs apportés par ES6 à JavaScript.
Enfin, le concept de constantes est arrivé à 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 le même périmètre déclenche une erreur.
const JOE =4.0
JOE=3,5
// résultats dans :Erreur de type non interceptée :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
Bienvenue au 21ème siècle, JavaScript ! Avec ES6, les variables déclarées en utilisant let (et les constantes décrites ci-dessus) suivent les règles de portée de bloc comme en Java, C++, etc. (Pour en savoir plus, voir comment déclarer des variables en JavaScript.)
Avant cette mise à jour, les variables en JavaScript étaient étendues aux fonctions. Autrement dit, 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 du bloc externe (le cas échéant) est restaurée.
{
soit x ="bonjour" ;
{
soit x ="monde" ;
console.log("bloc interne, x =" + x);
}
console.log("bloc externe, x =" + x);
}
// imprime
bloc intérieur, x =monde
bloc extérieur, x =bonjour
Vous pouvez également redéfinir des constantes dans ces blocs.
{
soit x ="bonjour" ;
{
constante x =4,0 ;
console.log("bloc interne, x =" + x);
essayer {
x =3,5
} attrape (erreur) {
console.error("bloc interne :" + err);
}
}
x ="monde" ;
console.log("bloc externe, x =" + x);
}
// imprime
bloc intérieur, x =4
bloc interne :TypeError :affectation à une variable constante.
bloc extérieur, x =monde
ES6 introduit des fonctions fléchées dans JavaScript. (Celles-ci sont similaires aux fonctions traditionnelles, mais ont une syntaxe plus simple.) Dans l'exemple suivant, x est une fonction qui accepte un paramètre appelé a , et renvoie son incrément :
var x =a => a + 1;
x(4) // renvoie 5
En utilisant cette syntaxe, vous pouvez facilement définir et transmettre des arguments dans des fonctions.
Utilisation avec un forEach() :
[1, 2, 3, 4].forEach(a => console.log(a + " => " + a*a))
// imprime
1 => 1
2 => 4
3 => 9
4 => 16
Définissez les fonctions acceptant plusieurs arguments en les plaçant entre parenthèses :
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// Retour
[3, 22, 44, 67, 98]
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 à deux paramètres a et b . Le deuxième paramètre b reçoit une valeur par défaut de 1 .
var x =(a, b =1) => a * b
x(2)
// renvoie 2
x(2, 2)
// renvoie 4
Contrairement à d'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 retour valeur à titre indicatif.
var x =(a =2, b) => { return 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 a a été déclaré avec une valeur par défaut. L'argument transmis correspond à a plutôt que b . La fonction renvoie NaN .
x(2)
// retourne NaN
x(1, 3)
// renvoie 3
Lorsque vous transmettez explicitement undefined en argument, la valeur par défaut est utilisée s'il y en a une.
x(non défini, 3)
// renvoie 6
Lors de l'invocation d'une fonction, il est parfois nécessaire de pouvoir transmettre un nombre arbitraire d'arguments et de traiter ces arguments au sein de la fonction. Ce besoin est géré par les 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 =function(a, b, ...args) { console.log("a =" + a + ", b =" + b + ", " + args.length + " args left"); }
x(2, 3)
// imprime
a =2, b =3, 0 arg restant
x(2, 3, 4, 5)
// imprime
a =2, b =3, 2 arguments restants
La création de modèles de chaînes fait référence à l'interpolation de variables et d'expressions dans des chaînes à l'aide d'une syntaxe telle que perl ou le shell. Un modèle de chaîne est entouré de caractères de back-tick (` ). 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 =`bonjour ${nom}`
// retourne "bonjour joe"
Bien sûr, vous pouvez utiliser une expression arbitraire pour l'évaluation.
// définit une fonction fléchée
var f =une => une * 4
// définit une valeur de paramètre
var v =5
// et évalue la fonction dans le modèle de chaîne
var x =`bonjour ${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 =`bonjour le monde
ligne suivante`
// Retour
Bonjour le monde
ligne suivante
ES6 apporte une syntaxe de création d'objet simplifiée. Jetez un œil à l'exemple ci-dessous :
var x ="hello world", y =25
var une ={x, y}
// est équivalent à l'ES5 :
{x :x, y :y}
Les noms de propriété calculés sont également assez astucieux. Avec ES5 et versions antérieures, pour définir une propriété d'objet avec un nom calculé, vous deviez faire ceci :
var x ="hello world", 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 en une seule définition :
var a ={x, y, ["joe" + y] :4}
// Retour
{x :"bonjour le monde", y :25, joe25 :4}
Et bien sûr, pour définir des méthodes, vous pouvez simplement le définir avec le nom :
var a ={x, y, ["joe" + y] :4, foo(v) { return v + 4 }}
un.foo(2)
// Retour
6
Et enfin, JavaScript obtient une syntaxe de définition de classe formelle. Bien qu'il ne s'agisse que d'un sucre syntaxique par rapport aux classes basées sur des prototypes déjà disponibles, il sert à améliorer la clarté du code. Cela signifie que cela ne le fait pas ajoutez un nouveau modèle d'objet ou quelque chose de fantaisiste comme ça.
classe Cercle {
constructeur(rayon) {
this.radius =rayon
}
}
// utilise le
var c =nouveau Cercle(4)
// renvoie :Cercle {rayon :4}
Définir une méthode est également assez simple. Pas de surprises là-bas.
classe Cercle {
constructeur(rayon) {
this.radius =rayon
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c =nouveau Cercle(4)
c.computeArea()
// renvoie :50.26548245743669
Nous avons maintenant aussi des getters et des setters, avec une simple mise à jour de la syntaxe. Redéfinissons le Cercle classe avec une zone propriété.
classe Cercle {
constructeur(rayon) {
this.radius =rayon
}
get area() { return Math.PI * this.radius * this.radius }
}
var c =nouveau Cercle(4)
// renvoie :Cercle {rayon :4}
c.zone
// renvoie :50.26548245743669
Ajoutons maintenant un setter. Pour pouvoir définir le rayon en tant que propriété paramétrable, nous devrions redéfinir le champ réel en _radius ou quelque chose qui n'entrera 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 =rayon
}
get area() { return Math.PI * this._radius * this._radius }
définir le rayon (r) { this._radius =r }
}
var c =nouveau Cercle(4)
// renvoie :Cercle {_radius :4}
c.zone
// renvoie :50.26548245743669
c.rayon =6
c.zone
// renvoie :113.09733552923255
Dans l'ensemble, c'est un bel ajout au JavaScript orienté objet.
En plus de définir des classes à l'aide de la classe mot-clé, vous pouvez également utiliser le extends mot-clé à hériter des super classes. Voyons comment cela fonctionne avec un exemple.
classe Ellipse {
constructeur (largeur, hauteur) {
this._width =largeur ;
this._height =hauteur ;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width =w; }
set hauteur(h) { this._height =h; }
}
la classe Cercle étend Ellipse {
constructeur(rayon) {
super(rayon, rayon);
}
set radius(r) { super.width =r; super.hauteur =r; }
}
// crée un cercle
var c =nouveau Cercle(4)
// renvoie :Cercle {_width :4, _height :4}
c.rayon =2
// c est maintenant :Cercle {_width :2, _height :2}
c.zone
// renvoie :12.566370614359172
c.rayon =5
c.zone
// renvoie :78.53981633974483
Et c'était une brève introduction à certaines des fonctionnalités de JavaScript ES6.
Ensuite :familiarisez-vous avec quelques méthodes de tableau JavaScript importantes et créez un script d'animation de robot sensible à la voix ! Découvrez également un excellent framework frontal appelé Vue.
Crédit image :micrologia/Depositphotos