Home-theater-designers
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 version suivante 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é en 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é joueur 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.
1. Constantes
Enfin, le concept de constantes a été intégré à 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
// results in: Uncaught TypeError: Assignment to constant variable.
Vous pouvez utiliser la constante partout où vous pouvez utiliser une variable ( où ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Variables et fonctions à portée de bloc
Bienvenue au 21ème siècle, JavaScript ! Avec ES6, les variables déclarées en utilisant laisser (et les constantes décrites ci-dessus) suivent les règles de portée de bloc comme dans Java, C++, etc. (Pour en savoir plus, voyez comment déclarer des variables en JavaScript .)
Avant cette mise à jour, les variables en JavaScript avaient une portée de fonction. C'est-à-dire que 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 extérieur (le cas échéant) est restaurée.
comment ripper un dvd sur un disque dur
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Vous pouvez également redéfinir des constantes dans de tels blocs.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Fonctions des flèches
ES6 présente fonctions de flèche à JavaScript. (Ces fonctions 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é à , et renvoie son incrément :
var x = a => a + 1;
x(4) // returns 5
En utilisant cette syntaxe, vous pouvez facilement définir et transmettre des arguments dans les fonctions.
Utilisation avec un pour chaque() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Définissez des fonctions acceptant plusieurs arguments en les mettant entre parenthèses :
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[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 à deux paramètres à 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)
// returns 2
x(2, 2)
// returns 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 revenir valeur à titre d'illustration.
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 été déclaré avec une valeur par défaut. L'argument transmis est mis en correspondance avec à plutôt que b . La fonction renvoie NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Lorsque vous transmettez explicitement indéfini comme argument, la valeur par défaut est utilisée s'il y en a une.
x(undefined, 3)
// returns 6
5. Paramètres de la fonction de repos
Lors de l'invocation d'une fonction, il est parfois nécessaire de pouvoir passer un nombre arbitraire d'arguments et de traiter ces arguments au sein de la fonction. Ce besoin est pris en charge par le paramètres de fonction de repos syntaxe. Il fournit un moyen de capturer le reste des arguments après les arguments définis en utilisant la syntaxe 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)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. Modèle de chaîne
Le modèle de chaîne 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 graduation ( `` ). 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}`
// returns 'hello joe'
Bien sûr, vous pouvez utiliser une expression arbitraire pour l'évaluation.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 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`
// returns
hello world
next line
7. Propriétés de l'objet
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 a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Les noms de propriétés 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 is now:
{x: 'hello world', y: 25, joe25: 4}
Maintenant, vous pouvez tout faire en une seule définition :
var a = {x, y, ['joe' + y]: 4}
// returns
{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 :
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
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 de 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 ne pas ajouter un nouveau modèle d'objet ou quelque chose de fantaisie comme ça.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Méthodes de déclaration
Définir une méthode est également assez simple. Pas de surprises là-bas.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Getters et Setters
Nous avons maintenant aussi des getters et des setters, avec une simple mise à jour de la syntaxe. Redéfinissons le Cercle classe avec un Région biens.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Ajoutons maintenant un setter. Pour pouvoir définir rayon en tant que propriété réglable, nous devons redéfinir le champ réel pour _rayon 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 :
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Dans l'ensemble, c'est un bel ajout au JavaScript orienté objet.
Héritage
En plus de définir des classes à l'aide de la classer 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 {
constructor(width, height) {
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; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
Et c'était une brève introduction à certaines des fonctionnalités de JavaScript ES6 .
Prochaine étape : se familiariser avec quelques méthodes de tableau JavaScript importantes et scénariser une animation de robot sensible à la voix ! Découvrez également un excellent framework frontal appelé Vue .
Crédit d'image: micrologia/ Depositphotos
Partager Partager Tweeter E-mail Canon vs Nikon : quelle marque d'appareil photo est la meilleure ?Canon et Nikon sont les deux plus grands noms de l'industrie de l'appareil photo. Mais quelle marque propose la meilleure gamme d'appareils photo et d'objectifs ?
app zone ar qu'est-ce que c'estLire la suite Rubriques connexes
- La programmation
- JavaScript
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner