JavaScript ES6 apporte une nouvelle syntaxe et de nouvelles fonctionnalités impressionnantes pour rendre votre code plus moderne et plus lisible. Il vous permet d’écrire moins de code et d’en faire plus. ES6 nous présente de nombreuses fonctionnalités intéressantes telles que les fonctions de flèche, les chaînes de modèle, la destruction de classe, les Modules.et plus encore. Jetons un coup d’oeil.

const et laissez

const est un nouveau mot-clé dans l’ES6 pour déclarer des variables. const est plus puissant que le var. Une fois utilisée, la variable ne peut pas être réaffectée., En d’autres termes, c’est une variable immuable sauf lorsqu’elle est utilisée avec des objets.

ceci est vraiment utile pour cibler les sélecteurs. Par exemple, lorsque nous avons un seul bouton qui déclenche un événement, ou lorsque vous souhaitez sélectionner un élément HTML en JavaScript, utilisez const au lieu de var. C’est parce que var est ‘hissé’. Il est toujours préférable d’utiliser const lorsque vous ne voulez pas réaffecter la variable .,

Dans le code ci-dessus, const ne changera pas et ne peut pas être modifiée. Si vous essayez de lui donner une nouvelle valeur, il vous renverra une erreur.

let peut être réaffectés et prendre la nouvelle valeur. Il crée une variable mutable.

let est le const les deux sont bloqués-portée. Cela signifie que la variable n’est disponible que dans sa portée.,

Arrow functions

la fonction arrow est vraiment géniale et rend votre code plus lisible, plus structuré et ressemble à du code moderne. Au lieu d’utiliser ceci:

Utiliser ceci:

Comme vous le voyez, la flèche de la fonction semble plus lisible et propre! Vous n’aurez plus besoin d’utiliser l’ancienne syntaxe.

en outre, vous pouvez utiliser la Flèche de la fonction avec map, filter et reduce fonctions intégrées.,

La fonction map avec des flèches semble plus clair et lisible que map dans l’ES5. Avec ES6, vous pouvez écrire du code plus court et plus intelligent. Vous pouvez utiliser le même avec des filter et reduce.

littéraux de modèle

Les littéraux de modèle ou les chaînes de modèle sont assez cool. Nous n’avons pas à utiliser l’opérateur plus (+) pour concaténer des chaînes, ou lorsque l’on veut utiliser une variable à l’intérieur d’une chaîne.,

La vieille syntaxe:

Avec la nouvelle ES6 syntaxe:

Si simple! C’est une différence vraiment énorme entre L’ancienne syntaxe et ES6. Lorsque vous jouez avec des chaînes, la chaîne littérale dans ES6 semble plus organisée et bien structurée que ES5.

paramètres par défaut

lorsque je travaille en PHP, j’utilise généralement des paramètres par défaut. Ceux-ci vous permettent de définir un paramètre à l’avance.,

ainsi, lorsque vous oubliez d’écrire le paramètre, il ne retournera pas d’erreur non définie car le paramètre est déjà défini par défaut. Ainsi, lorsque vous exécutez votre fonction avec un paramètre manqué, il prendra la valeur du paramètre par défaut t, et il ne retournera pas d’erreur!

Regardez cet exemple:

La fonction ci-dessus renvoie undefined, parce que nous avons oublié de lui donner le deuxième paramètre age.,

Mais si nous avons utilisé le paramètre par défaut, il ne retournera pas undefined, et il utilisera sa valeur lorsque nous oublierons d’affecter un paramètre!

Comme vous le voyez, la fonction renvoie une valeur, même si nous avons raté le deuxième paramètre. Maintenant, avec le paramètre par défaut, nous pouvons gérer l’erreur à l’avance.

destruction de tableau et d’objet

la Destruction facilite l’affectation des valeurs d’un tableau ou d’un objet à la nouvelle variable.,

La vieille syntaxe:

Avec ES6 syntaxe:

Avec ES5, nous avons à attribuer à chaque valeur de chaque variable. Avec ES6, nous mettons simplement nos valeurs entre accolades pour obtenir n’importe quelle propriété de l’objet.

Remarque: Si vous affectez une variable qui n’est pas identique au nom de la propriété, elle retournera undefined. Par exemple, si le nom de la propriété est name et que nous l’affectons à une variable username, elle retournera undefined.,

nous devons toujours nommer la variable de la même manière que le nom de la propriété. Mais si nous voulons renommer la variable, nous pouvons utiliser les deux-points : à la place.

Pour le tableau, on utilise la même syntaxe que celle de l’objet. Nous devons juste remplacer les accolades par des crochets.

Importer et exporter

import et export en JavaScript de votre application, il est de plus en plus puissants., Ils vous permettent de créer des composants réutilisables.

Si vous êtes familier avec le code JavaScript framework MVC, vous verrez qu’ils utilisent import et export pour gérer les composants, la plupart du temps. Alors, comment fonctionnent-ils vraiment?

Il est simple! export permet d’exporter un module à utiliser dans un autre composant JavaScript. Nous utilisons import pour importer ce module pour l’utiliser dans notre composant.

Par exemple, nous avons deux fichiers., Le premier est nommé detailComponent.js et le second est appelé homeComponent.js.

Dans detailComponent.js nous allons exporter le detail fonction.

Et si nous voulons utiliser cette fonction dans homeComponent.js, nous allons simplement utiliser import.

Si on veut importer plus d’un module, nous venons de mettre à l’intérieur des accolades.,

trop cool, n’est-ce pas?!

les Promesses

les Promesses sont une nouvelle fonctionnalité de l’ES6. C’est une méthode pour écrire du code asynchrone. Il peut être utilisé lorsque, par exemple, nous voulons extraire des données à partir d’une API, ou quand nous avons une fonction qui prend du temps à être exécutées. Les promesses facilitent la résolution du problème, alors créons notre première promesse!

Si vous vous connectez votre console, il sera de retour d’une Promesse. Donc, si nous voulons exécuter une fonction après extraction des données, nous allons utiliser une Promesse., La Promesse prend deux paramètres: resolve et reject gérer une erreur attendue.

Remarque: la fonction fetch renvoie une promesse elle-même!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Maintenant, si vous vous connectez votre console il va retourner un tableau de données.

paramètre Rest et opérateur de propagation

Les paramètres rest sont utilisés pour obtenir l’argument d’un tableau et renvoyer un nouveau tableau.,

La propagation de l’opérateur a la même syntaxe que le reste de paramètre, mais la propagation de l’opérateur prend le Tableau lui-même, et pas seulement les arguments. On peut utiliser le paramètre Spread pour obtenir les valeurs d’un Tableau, au lieu d’utiliser une boucle for ou de toute autre méthode.

Catégories

les Classes sont au cœur de la programmation orientée objet (POO). Ils rendent votre code plus sécurisé et encapsulé. L’utilisation de classes donne à votre code une belle structure et le maintient orienté.,

Pour créer une classe, utilisez la balise class mot clé suivi par le nom de la classe avec deux accolades.

Maintenant, nous pouvons accéder à la balise class méthodes et propriétés à l’aide de la balise new mot clé.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

pour hériter d’une autre classe, utilisez le mot-cléextends suivi du nom de la classe dont vous souhaitez hériter.,

Vous pouvez en apprendre plus sur les Classes ici.

ES6 a d’autres fonctionnalités étonnantes — vous pouvez les explorer ici.

Conclusion

j’espère que vous avez trouvé cet article utile, et j’espère que j’ai pu vous présenter certaines des fonctionnalités ES6. Si c’est le cas, abonnez-vous à cette liste de diffusion pour en savoir plus sur les sujets frontaux. Merci pour votre temps.

en passant, j’ai récemment travaillé avec un groupe solide d’ingénieurs logiciels pour l’une de mes applications mobiles., L’organisation était excellente, et le produit a été livré très rapidement, beaucoup plus rapidement que les autres entreprises et pigistes avec qui j’ai travaillé, et je pense que je peux honnêtement les recommander pour d’autres projets. Envoyez-moi un e-mail si vous voulez entrer en contact — [email protected].