Owen Little
0 
1788
480
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 lui? 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. , 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 sont 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, bloc interne: TypeError: affectation à une variable constante. bloc externe, x = monde 3. Fonctions des flèches
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 à 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) => retour 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 mis en correspondance avec 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 passer 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 tout le monde", y = 25 var a = x, y // est équivalent à l'ES5: x: x, y: y Les noms de propriété calculés sont très astucieux aussi. 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:
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 (radius) this.radius = radius // utilisez-le var c = new Circle (4) // retourne: Circle radius: 4 Méthodes de déclaration
Définir une méthode est également assez simple. Pas de surprises là-bas.
classe Circle constructeur (radius) this.radius = radius computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // retourne: 50.26548245743669 Getters et Setters
Nous avons maintenant aussi des accesseurs 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 (rayon) this.radius = radius get aire () return Math.PI * this.radius * this.radius var c = nouveau Circle (4) // retourne: Circle radius: 4 c.area // retourne: 50.26548245743669 Ajoutons maintenant un passeur. Pour pouvoir définir rayon comme une 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 var c = new Circle (4) // retourne: Circle _radius: 4 c.area // retourne: 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); set radius (r) super.width = r; super.height = r; // crée 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 souhaitez que vos enfants s'intéressent à la programmation? Montrez-leur ce guide pour construire une tête de robot animée réactive. !
Crédit d'image: micrologia / Depositphotos