JavaScript ES6 Fonctionnalités

Dans ce tutoriel, vous allez apprendre sur les nouvelles fonctionnalités de la dernière version de JavaScript.

Qu’est-ce que ECMAScript 6 (ou ES6)

ECMAScript 2015 (ou ES6) est la sixième et principale édition de la norme de spécification du langage ECMAScript. Il définit la norme pour L’implémentation JavaScript.

ES6 a apporté des changements importants au langage JavaScript., Il introduit plusieurs nouvelles fonctionnalités telles que des variables à portée de bloc, une nouvelle boucle pour itérer sur des tableaux et des objets, des littéraux de modèles et de nombreuses autres améliorations pour rendre la programmation JavaScript plus facile et plus amusante. Dans ce chapitre, nous allons discuter de certaines des meilleures fonctionnalités ES6 que vous pouvez utiliser dans votre codage JavaScript quotidien.

le mot-clé let

ES6 introduit le nouveau mot-clélet pour déclarer les variables. Avant ES6, la seule façon de déclarer une variable en JavaScript était le mot-clé var., Nous allons voir quelle est la différence entre eux est.

Il y a deux différences essentielles entre la balise var et let. Les Variables déclarées avec le mot-clé var sont fonction-scoped et hissées en haut dans sa portée, tandis que les variables déclarées avec le mot-clé let sont block-scoped ({}) et elles ne sont pas hissées.

bloquer la portée signifie simplement qu’une nouvelle portée est créée entre une paire d’accolades, c’est-à-dire{}., Par conséquent, si vous déclarez une variable avec le mot clé let dans une boucle, elle n’existe pas en dehors de la boucle, comme le montre l’exemple suivant:

comme vous pouvez le voir dans l’exemple ci-dessus, la variable i dans le premier bloc n’est pas accessible en dehors de la boucle for. Cela nous permet également de réutiliser le même nom de variable plusieurs fois car sa portée est limitée au bloc ({}), ce qui se traduit par moins de déclaration de variable et un code plus propre.,

Le mot-Clé const

La const mot clé permet de définir des constantes. Les constantes sont en lecture seule, vous ne pouvez pas leur réaffecter de nouvelles valeurs. Ils sont également à portée de bloc comme let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

Cependant, vous pouvez toujours modifier les propriétés de l’objet ou des éléments d’un tableau:

La pour…de la boucle

la nouvelle boucle for...of nous permet d’itérer sur des tableaux ou d’autres objets itérables très facilement., En outre, le code à l’intérieur de la boucle est exécuté pour chaque élément de l’objet itérable. Voici un exemple:

la boucle for...of ne fonctionne pas avec les objets car ils ne sont pas itérables. Si vous souhaitez parcourir les propriétés d’un objet, vous pouvez utiliser la boucle for-in.

modèles littéraux

Les modèles littéraux offrent un moyen simple et propre de créer des chaînes multi-lignes et d’effectuer une interpolation de chaîne. Maintenant, nous pouvons intégrer des variables ou des expressions dans une chaîne à n’importe quel endroit sans aucun problème.,

Les littéraux de modèle sont créés en utilisant le caractère back-tick (` `) (accent grave) au lieu des guillemets doubles ou simples habituels. Les Variables ou expressions peuvent être placées à l’intérieur de la chaîne en utilisant la syntaxe ${...}. Comparez les exemples suivants et voyez à quel point c’est utile:

dans ES5, pour obtenir la même chose, nous avons dû écrire quelque chose comme ceci:

valeurs par défaut pour les paramètres de fonction

maintenant, dans ES6, vous pouvez spécifier des valeurs par défaut pour les paramètres de fonction., Cela signifie que si aucun argument n’est fourni pour fonctionner lorsqu’il est appelé, ces valeurs de paramètres par défaut seront utilisées. C’est l’une des fonctionnalités les plus attendues en JavaScript. Voici un exemple:

alors que dans ES5, pour obtenir la même chose, nous avons dû écrire quelque chose comme ceci:

fonctions Arrow

Les fonctions Arrow sont une autre fonctionnalité intéressante dans ES6. Il fournit une syntaxe plus concise pour écrire des expressions de fonction en désactivant les mots-clés function et return.,

Les fonctions Arrow sont définies à l’aide d’une nouvelle syntaxe, la notation fat arrow (=>). Voyons à quoi cela ressemble:

comme vous pouvez le voir, le mot-cléfunction Etreturn dans la déclaration de la fonction Flèche.

Vous pouvez également ignorer les parenthèses, c’est-à-dire() dans le cas où il y a exactement un paramètre, mais vous devrez toujours l’utiliser lorsque vous avez zéro ou plus d’un paramètre.,

de plus, s’il y a plus d’une expression dans le corps de la fonction, vous devez l’envelopper entre accolades ({}). Dans ce cas, vous devez également utiliser l’instruction return pour renvoyer une valeur.

Il existe plusieurs variantes de la façon dont vous pouvez écrire des fonctions de flèche. Voici les plus couramment utilisés:

Il existe une différence importante entre les fonctions régulières et les fonctions fléchées., Contrairement à une fonction normale, une fonction Flèche n’a pas son propre this, elle prend this de la fonction externe où elle est définie. En JavaScript, this est le contexte d’exécution actuel d’une fonction.,

pour comprendre cela clairement, examinons les exemples suivants:

réécrire le même exemple en utilisant les littéraux de modèle ES6 et la fonction arrow:

comme vous pouvez le voir clairement, le mot-clé this dans l’exemple ci-dessus fait référence au contexte de la fonction entourant la fonction arrow qui est Objet personne (ligne no-9), contrairement à l’exemple précédent où il faisait référence à la fenêtre objet global (ligne no-9).

Classes

dans ECMAScript 5 et les versions antérieures, les classes n’ont jamais existé en JavaScript., Les Classes sont introduites dans ES6 qui ressemble aux classes dans d’autres langages orientés objet, tels que Java, PHP, etc. cependant, ils ne fonctionnent pas exactement de la même manière. Les classes ES6 facilitent la création d’objets, implémentent l’héritage en utilisant le mot-clé extends et réutilisent le code.

dans ES6, vous pouvez déclarer une classe en utilisant le nouveau mot-cléclass suivi d’un nom de classe. Par convention, les noms de classe sont écrits en TitleCase (c’est-à-dire en majuscule de la première lettre de chaque mot).,

dans l’exemple ci-dessus, la classe Square hérite de Rectangle en utilisant le mot-clé extends. Les Classes qui héritent d’autres classes sont appelées classes dérivées ou classes enfants.

Vous devez également appelersuper()dans le constructeur de classe enfant avant d’accéder au contexte (this)., Par exemple, si vous omettez le super() et l’appel de la balise getArea() méthode sur un objet carré il en résultera une erreur, car getArea() méthode nécessite l’accès à l’ this mot clé.

Modules

Avant l’ES6, il n’y avait pas de support natif pour les modules en JavaScript. Tout ce qui se trouve dans une application JavaScript, par exemple des variables dans différents fichiers JavaScript, partageait la même portée.

ES6 introduit un module basé sur un fichier, dans lequel chaque module est représenté par un fichier.js distinct., Maintenant, vous pouvez utiliser l’instructionexport ouimport dans un module pour exporter ou importer des variables, des fonctions, des classes ou toute autre entité vers/depuis d’autres modules ou fichiers.

créons un module c’est-à-dire un fichier JavaScript « main.js  » et placez-y le code suivant:

créez maintenant un autre fichier JavaScript « app.js  » avec le code suivant:

enfin créer un fichier HTML « test.html  » et avec le code suivant et ouvrez ce fichier HTML dans votre navigateur en utilisant le protocole HTTP (ou utilisez localhost). Notez également le type="module" sur la balise de script.,

les paramètres Rest

ES6 introduit des paramètres rest qui nous permettent de passer un nombre arbitraire de paramètres à une fonction sous la forme d’un tableau. Ceci est particulièrement utile dans les situations où vous souhaitez passer des paramètres à une fonction mais vous n’avez aucune idée du nombre dont vous aurez besoin.

un paramètre rest est spécifié en préfixant un paramètre nommé avec l’opérateur rest (...) c’est-à-dire trois points. Reste paramètre ne peut être le dernier dans la liste des paramètres, et il peut seulement être un reste de paramètre., Regardez l’exemple suivant, pour voir comment il fonctionne:

Quand le reste paramètre est le seul paramètre à une fonction, il reçoit tous les arguments passés à la fonction, sinon, il obtient le reste des arguments qui dépasse le nombre de paramètres nommés.

L’opérateur de propagation

l’opérateur de propagation, qui est également noté par (...), exécute la fonction exactement opposée de l’opérateur rest. L’opérateur spread étale (c’est-à-dire divise) un tableau et passe les valeurs dans la fonction spécifiée, comme indiqué dans l’exemple suivant:

l’opérateur spread peut également être utilisé pour insérer les éléments d’un tableau dans un autre tableau sans utiliser les méthodes de tableau comme push(), unshift() concat(), etc.,

affectation de déstructuration

l’affectation de déstructuration est une expression qui facilite l’extraction de valeurs de tableaux, ou de propriétés d’objets, en variables distinctes en fournissant une syntaxe plus courte.

Il existe deux types d’expressions d’affectation de déstructuration: l’affectation de déstructuration de tableau et d’objet.,faites la même chose en une seule ligne en utilisant l’affectation de déstructuration de tableau:

Vous pouvez également utiliser l’opérateur rest dans l’affectation de déstructuration de tableau, comme indiqué ici:

l’affectation de déstructuration d’objet

dans ES5 pour extraire les valeurs de propriété d’un objet, nous devons écrire quelque chose comme ceci:

Mais dans ES6, vous pouvez extraire les valeurs de la dernière version des principaux navigateurs Web tels que Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc.,