Qu'est-ce qu'ES6 JavaScript et en quoi est-il différent?
JavaScript alimente la plupart du Web interactif, et il a donc dû évoluer en parallèle. De nouvelles fonctionnalités en JavaScript sont ajoutées chaque année maintenant; nous allons voir les nouveautés et la façon dont vous utilisez JavaScript ES6 sur votre site Web.
Sommaire
JavaScript a de nombreuses saveurs
Oracle a une marque sur le terme JavaScript, ainsi la norme réelle que le JavaScript moderne implémente s'appelle la norme EMCAScript, ou ES. Le standard JavaScript principal est EMCAScript 5, ou ES5, sorti en 2009. Il s'agit d'un JavaScript vanille sans fonctionnalités spéciales, pris en charge partout, même dans IE 9.
ES6 est une spécification relativement nouvelle, publiée en 2015, et prend en charge de nombreuses nouvelles fonctionnalités. Il s'appelle techniquement ES2015, et chaque version annuelle après est indiquée par l'année de sa sortie. Mais tout le monde l'appelle ES6 de toute façon, donc nous nous en tenons à cela.
ES6 est important, en particulier, car il marque le début de la normalisation de JavaScript. Aujourd'hui, l'EMCA publie chaque année une nouvelle norme. Mais ES6 est sorti 6 ans après ES5, soit 10 ans après ES3, c'est donc une étape importante.
Comment utiliser la syntaxe ES6
ES6 est en fait pris en charge dans de nombreux endroits, le principal problème étant Internet Explorer (comme d'habitude). Ainsi, bien que vous puissiez commencer à écrire avec le style ES6, vous ne pouvez pas être sûr que le navigateur de chacun se comportera de la même manière.
De nos jours, il est toujours généralement compilé en syntaxe ES5 «régulière» à l'aide d'un utilitaire comme Babel. Babel est un compilateur qui convertira votre code de développement (écrit en ES6 avec tous ses goodies) en code que vous exécuterez sur votre site de production, souvent intégré et minifié avec Webpack également.
Voici comment cela fonctionne: vous avez votre environnement de développement où vous écrivez votre .js des dossiers. Vous êtes libre d'utiliser la syntaxe ES6 de votre choix. Plutôt que de les exécuter directement, vous configurez Webpack pour charger des fichiers JS avec Babel. Souvent, vous voudrez exécuter webpack-dev-server, donc cela se produit automatiquement lorsque vous apportez des modifications.
Maintenant, au lieu de charger index.js, vous chargez bundle.js, qui contient tout votre code. Cela a également le grand avantage de vous permettre d'utiliser des modules NPM dans votre JS, bien que cela puisse rendre votre code volumineux si vous en ajoutez trop (bien que le webpack soit assez bon pour la minification).
Quoi de neuf
Il y a beaucoup à déballer ici, donc cet article ne couvrira certainement pas tout. Pour une liste complète, vous pouvez afficher ce tableau de compatibilité, qui comprend également ES2016 et des fonctionnalités plus récentes.
En général, si Babel peut compiler quelque chose selon une ancienne spécification de JS, il est probablement sûr de l'utiliser dans le développement. Si ce n'est pas le cas et que vous ne vous souciez pas des 3% de la population utilisant IE 11, il est probablement pris en charge par la plupart des navigateurs, à condition qu'il ne s'agisse pas d'une super nouvelle fonctionnalité.
Fonctions fléchées
Plutôt que de taper:
arr.map(function (d) {
return d + 1;
});
Vous pouvez à la place remplacer le mot-clé function par une flèche après les parenthèses:
arr.map((d) => {
return d + 1;
});
De plus, vous n'avez pas besoin des parenthèses si vous ne passez qu'un seul argument. Et, vous n'avez pas besoin des crochets et de l'instruction return si vous ne renvoyez qu'une seule valeur:
arr.map(d => d + 1);
Il s'agit de la nouvelle syntaxe des fermetures d'expressions et permet des fonctions bien compactées, en particulier lorsque vous travaillez avec des listes, des rappels ou la gestion des erreurs. C'est similaire à la façon dont une seule ligne if les déclarations fonctionnent.
Création d'objets et de tableaux simplifiée avec déstructuration
Plutôt que d'écrire:
var type = "123", color = "blue"
var obj = { type: type, color: color }
Vous pouvez simplement omettre les noms de clés, et ils seront automatiquement définis sur les noms de variables:
var obj = { type, color }
De plus, cela fonctionne dans l'autre sens, appelé affectation de déstructuration:
var { type, color } = obj
Un effet secondaire de fantaisie de la déstructuration est le ... syntaxe, qui agit comme "etc." et assigne le reste du tableau ou de l'objet à une variable:
var { type, ...rest } = obj
//rest == { color: "blue" }
Et, cela fonctionne également dans l'autre sens, ce qui a pour effet d'étendre et d'aplatir les tableaux:
var arr1 = ("a", "b"), arr2 = ("c", "d")
var flat = (...a, ...b, "e")
//flat = ("a", "b", "c", "d", "e")
Il y a bien plus à déstructurer que ce qui est abordé ici.
Des classes
JavaScript a maintenant des classes. Voici comment cela fonctionne, à partir des documents de Mozilla:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
// Method
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area); // 100
Comme vous pouvez le voir, il est similaire à d'autres langages orientés objet, mais pas tout à fait. Comme l'indique Mozilla, ce nouveau système est «principalement du sucre syntaxique par rapport à l'héritage basé sur prototype existant de JavaScript» et ne rend pas réellement orienté objet JS. Mais c'est quand même bien d'avoir.
En outre, la syntaxe de classe prend en charge les méthodes et propriétés statiques et les classes enfants, mais une classe enfant ne peut pas hériter de plusieurs parents.
Modifications des arguments de fonction
ES6 présente deux nouvelles façons d'écrire des paramètres de fonction. Tout d'abord, les paramètres par défaut peuvent être spécifiés en affectant une valeur dans la définition de la fonction:
var func = (a, b = "default") => { }
Si vous deviez appeler func sans spécifier deux arguments, il prendrait la valeur par défaut.
De plus, les fonctions peuvent désormais recevoir un nombre indéfini d'arguments sous forme de tableau, appelé syntaxe des paramètres de la fonction de repos:
var func = (a, b, c, ...rest) => { }
le rest sera défini sur un tableau des autres paramètres de la fonction, ou undefined si pas plus que les paramètres nommés ne sont présents.
let et const
le let la commande remplace var qui accorde spécifiquement portée du bloc. Voici comment les variables fonctionnent normalement dans JS:
var x = 0; //global variable
function someFunc() {
var y = 3; //local variable
}
La variable globale peut être utilisée dans la fonction, mais la variable de fonction locale ne peut pas être utilisée en dehors de la fonction. C'est ce qui vous permet de nommer vos variables "i","tmp","x", et "count"Tout le temps et s'en tirer.
L'étendue des blocs est différente et vous permet de redéfinir les variables avec des blocs imbriqués:
var x = 0
{
let x = 2
//x == 2
}
// x == 0 again
le let La syntaxe vous permet essentiellement de modifier le contenu de x dans ce bloc (que ce soit une fonction, un bloc catch ou un bloc explicite comme celui-ci) et de le réinitialiser lorsque vous quittez le bloc. Ceci est particulièrement utile pour lescount», Car chaque bloc aura une portée différente. La portée est héritée des blocs enfants, mais peut être imbriquée et modifiée à nouveau.
le const la syntaxe est assez simple. Remplacer var avec constet votre variable est désormais en lecture seule. Si vous essayez d'écrire dessus, cela lancera:
Uncaught TypeError: Assignment to constant variable.
Vous faire savoir que vous essayez de faire quelque chose que vous ne devriez pas faire. Cela n'a d'autre but que d'être un bon rappel lors du codage pour éviter certains bugs.
