Si ES6 spécification n’est pas super frais, je pense que beaucoup de développeurs ne sont pas encore à sauter familier avec elle., La raison principale est probablement une mauvaise prise en charge dans les navigateurs Web juste après la publication de la spécification. Actuellement, la spécification a plus de 2 ans et de nombreux navigateurs Web modernes fonctionnent bien avec ES6. Même si vous (ou vos clients) n’utilisez pas la version la plus récente du navigateur web, vous pouvez utiliser des transpileurs (comme Babel), qui transforme les sources ES6 en sources ES5 pendant le processus de construction de l’application. Cela signifie qu’il est temps de faire un pas en avant et d’apprendre ES6.
dans cet article, je vais essayer d’introduire les fonctionnalités les plus utiles de manière succincte., Après le tutoriel, vous posséderez des compétences de base et pourrez les appliquer dans un vrai projet. Ne le traitez pas comme un guide ou une documentation. Mon objectif est de vous encourager à approfondir et à vous familiariser avec ES6.
const et de laisser les mots-clés
const vous permet de définir des constantes (enfin!!!). laissez vous permet de définir des variables. C’est génial, mais n’avons-nous pas déjà des variables en JavaScript? Oui, c’est vrai, mais les variables déclarées par var ont une portée de fonction et sont hissées vers le haut. Cela signifie qu’une variable peut être utilisée avant d’avoir été déclaré., let variables et constantes ont une portée de bloc (entourée de {}) et ne peuvent pas être utilisées avant la déclaration.
fonctions D’aide de tableau
de nouvelles fonctions d’aide intéressantes sont apparues, qui facilitent le travail avec les tableaux JS dans la plupart des cas utiles. Combien de fois avez-vous implémenté une logique comme: filtrage, vérification si un ou tous les éléments répondent à la condition, ou conversion d’éléments? Probablement très souvent. Maintenant, vous avez d’excellentes fonctionnalités linguistiques pour faire le travail pour vous., Voici, à mon avis, les fonctions les plus précieuses:
forEach
exécute la fonction fournie pour chaque élément du tableau, en passant l’élément tableau comme argument.
map
Crée un nouveau tableau contenant le même nombre d’éléments, mais les éléments de sortie sont créés par la fonction fournie. Il convertit simplement chaque élément de tableau en autre chose.,
filter
Crée un nouveau tableau contenant un sous-ensemble du tableau original. Le résultat a ces éléments qui réussissent le test implémenté par la fonction fournie, qui devrait renvoyer true ou false.
trouver
Trouve le premier élément qui passe le test mis en œuvre par la fonction fournie, qui doit retourner true ou false.,
chaque
Vérifie si chaque élément du tableau passe le test mis en œuvre par la fonction fournie, qui doit retourner true ou false.
certains
Vérifie si tout élément du tableau passe le test mis en œuvre par la fonction fournie, qui doit retourner true ou false.,
réduction
s’Applique à une fonction passée comme premier paramètre à l’encontre d’un accumulateur et chaque élément de la matrice (de gauche à droite), la réduisant ainsi à une valeur unique. La valeur initiale de l’accumulateur doit être fournie comme deuxième paramètre de la fonction de réduction.
Flèche fonctions
la mise en Œuvre de fonctions très simples (comme ladite somme ou d’un produit) nécessite l’écriture de beaucoup de passe-partout., Y a-t-il un remède pour cela? Oui, essayez simplement les fonctions arrow!
Flèche, les fonctions peuvent être en ligne. – Il vraiment simplifie le code:
Flèche, les fonctions peuvent être plus complexes et de nombreuses lignes de code:
Classes
Java développeur ne manquez pas les classes lors de la commutation d’un JS projet?, Qui n’aime pas l’héritage explicite, comme en langage Java, au lieu d’écrire du code magique pour l’héritage prototypique? Bien que certains développeurs JS se soient plaints, des classes ont été introduites dans ES6. Ils ne changent pas le concept d’héritage. Ils ne sont que du sucre syntaxique pour l’héritage prototypique.
une amélioration de la littéraux d’objet
Objet littéraux ont été améliorées., Maintenant, nous pouvons beaucoup plus facilement:
- définir des champs avec une affectation variable du même nom
- définir des fonctions
- définir des propriétés dynamiques (calculées)
chaînes de Template
qui aime écrire de grandes chaînes et la concaténation de variables? Je crois qu’une minorité d’entre nous. Qui déteste la lecture? Je suis sûr que tout le monde. Heureusement, ES6 introduit des modèles de chaînes très faciles à utiliser avec des espaces réservés pour les variables.,
Veuillez noter que nous pouvons écrire de texte multi-ligne.
Important: utilisez des backticks au lieu d’apostrophes pour envelopper le texte.
arguments de fonction par défaut
n’aimez-vous pas fournir tous les paramètres de fonction possibles? Utiliser les valeurs par défaut.
le Repos et la propagation des opérateurs
Écart
Il permet l’extraction de tableau ou d’un objet de contenu comme de simples éléments.,
Exemple — faire de copie de tableau:
Exemple de fusion des tableaux:
Reste
vous souhaitez lier les premiers paramètres de la fonction de variables, et d’autres pour des variables simples comme un tableau? Maintenant, vous pouvez le faire assez facilement.,
Déstructuration
tableau
Permet l’extraction des éléments demandés à partir du tableau et de les affecter à des variables.
De l’objet
Permet l’extraction de propriétés de l’objet et de les affecter à des variables de même nom en tant que propriétés.,
des Promesses
Promesse promesses (oui, je sais ça sonne bizarre) que vous pourriez obtenir dans les résultats futurs de l’ajournement ou de longue durée d’exécution des tâches. Promise a deux canaux: le premier pour les résultats, le second pour les erreurs potentielles. Pour obtenir le résultat, vous fournissez la fonction de rappel en tant que paramètre de fonction’ then’. Pour gérer les erreurs, vous fournissez la fonction de rappel en tant que paramètre de fonction’ catch’.
veuillez noter que la sortie de l’exemple peut différer pour chaque exécution, en raison d’un appel de fonction aléatoire.,
Résumé
j’espère que vous avez apprécié l’article. Si vous voulez de la pratique, vous pouvez utiliser le bac à sable pour le processus d’apprentissage: https://es6console.com/. Si vous avez besoin de plus d’informations, vous pouvez les trouver ici: