| Les deux révisions précédentesRévision précédente | |
| issue139:c_c [2018/12/07 11:58] – andre_domenech | issue139:c_c [2018/12/07 15:00] (Version actuelle) – auntiee |
|---|
| **I’ve recently begun using GatsbyJS (a static site/progressive web app generator) for a few of my side projects. Prior to this, I hadn’t used JavaScript outside of some basic web functionality and a demo of NodeJS. Even then, I typically stuck with the vanilla syntax. The more I write React code, the more I stumble upon examples and documentation using arrow functions, let and const, and other features available through ES6. Since I’ve had to buckle down and try to learn as much as possible about ES6, I wanted to share it with anyone else who (like me) may not have needed to learn it just yet.** | **I’ve recently begun using GatsbyJS (a static site/progressive web app generator) for a few of my side projects. Prior to this, I hadn’t used JavaScript outside of some basic web functionality and a demo of NodeJS. Even then, I typically stuck with the vanilla syntax. The more I write React code, the more I stumble upon examples and documentation using arrow functions, let and const, and other features available through ES6. Since I’ve had to buckle down and try to learn as much as possible about ES6, I wanted to share it with anyone else who (like me) may not have needed to learn it just yet.** |
| |
| J'ai récemment commencé à utiliser GatsbyJS (un générateur de site statique et d'appli Web évolutive) pour certains de mes projets secondaires. Avant cela, je n'avais pas utilisé JavaScript en dehors de quelques fonctionnalités de base du Web et une démo de NodeJS. Même là, j'avais collé à la syntaxe classique. Plus j'écris de code React, plus je tombe sur des exemples et de la documentation utilisant les fonctions Flèches, let et const et d'autres fonctionnalités qui sont disponibles via ES6. Depuis que j'ai dû me mettre au travail pour essayer d'apprendre tout ce que je peux sur ES6, je voulais le partager avec tous ceux qui (comme moi) n'ont pas eu l'obligation de l'apprendre jusqu'à maintenant. | J'ai récemment commencé à utiliser GatsbyJS (un générateur de site statique et d'appli Web évolutive) pour certains de mes projets secondaires. Avant cela, je n'avais pas utilisé JavaScript en dehors de quelques fonctionnalités de base du Web et une démo de NodeJS. Même là, j'avais collé à la syntaxe classique. Plus j'écris de code React, plus je tombe sur des exemples et de la documentation utilisant les fonctions Flèche, let et const et d'autres fonctionnalités qui sont disponibles via ES6. Puisque j'ai dû me mettre au travail pour essayer d'apprendre tout ce que je peux sur ES6, je voulais le partager avec tous ceux qui (comme moi) n'ont pas eu l'obligation de l'apprendre jusqu'à maintenant. |
| |
| **What is ECMAScript? | **What is ECMAScript? |
| It’s essentially a series of enhancements to traditional (“vanilla”) JavaScript. It’s intended to update faster and offer more quality-of-life features than normal JS.** | It’s essentially a series of enhancements to traditional (“vanilla”) JavaScript. It’s intended to update faster and offer more quality-of-life features than normal JS.** |
| |
| Qu'est-ce que ECMASscript (ES6) ? | Qu'est-ce que ECMAScript (ES6) ? |
| |
| C'est à la base une série d'améliorations du Javascript traditionnel (« classique »). Il est supposé accélérer la mise à jour et offrir plus de fonctionnalités qui facilitent la vie que le JS ordinaire. | C'est à la base une série d'améliorations du Javascript traditionnel (« classique »). Il est supposé accélérer la mise à jour et offrir plus de fonctionnalités qui facilitent la vie que le JS ordinaire. |
| « let » définit une variable locale que vous pouvez ré-assigner, mais pas re-déclarer. Ainsi, si vous voulez construire un compteur qui tourne dans une boucle, « let » sera ce que vous voulez. | « let » définit une variable locale que vous pouvez ré-assigner, mais pas re-déclarer. Ainsi, si vous voulez construire un compteur qui tourne dans une boucle, « let » sera ce que vous voulez. |
| |
| « const » définit une variable locale qui ne peut plus être changée une fois déclarée (c'est une variable constante, en d'autres termes). Ainsi, si vous voulez adapter la valeur de plusieurs valeurs de la même quantité sans que celle-ci puisse être modifiée, utilisez une const pour la mise à l'échelle. | « const » définit une variable locale qui ne peut plus être changée une fois déclarée (c'est, autrement dit, une variable constante). Ainsi, si vous voulez adapter la valeur de plusieurs valeurs de la même quantité sans que celle-ci puisse être modifiée, utilisez une const pour la mise à l'échelle. |
| |
| **Spread | **Spread |
| Spread | Spread |
| |
| N'avez-vous jamais eu un tableau que vous vouliez déposer sur la console, ou, dans d'autres cas, la transformer en éléments séparés ? Spread fait exactement ça. Il vous laisse même combiner deux tableaux avec un minimum d’embêtements. | N'avez-vous jamais eu un tableau que vous vouliez déposer sur la console, ou, dans d'autres cas, transformer en éléments séparés ? Spread fait exactement ça. Il vous laisse même combiner deux tableaux avec un minimum d’embêtements. |
| |
| Les lignes ci-dessus sortiront un tableau avec tous les éléments combinés ensemble. Si vous étiez sur le point de lancer console.log(...fruits), il vous aurait balancé séparément les 3 objets chaînes sans les formater en tableau. | Les lignes ci-dessus sortiront un tableau avec tous les éléments combinés ensemble. Si vous étiez sur le point de lancer console.log(...fruits), il vous aurait balancé séparément les 3 objets chaînes sans les formater en tableau. |
| |
| Literals modèles | Template Literals (littérales modèles) |
| |
| Auparavant, si vous vouliez regrouper des chaînes, vous deviez utiliser l'opérateur +. Maintenant, ES6 vous permet de les appeler dans une chaîne en utilisant des accents graves (` - Alt-Gr-7) et des variables ${}. | Auparavant, si vous vouliez regrouper des chaînes, vous deviez utiliser l'opérateur +. Maintenant, ES6 vous permet de les appeler dans une chaîne en utilisant des accents graves (` - Alt-Gr-7) et des variables ${}. |
| Fonctions Flèche | Fonctions Flèche |
| |
| ES6 introduit les fonctions Flèches, elles sont à la base identiques aux fonctions ordinaires, sauf que la syntaxe est différente. L'avantage de cette modification de la syntaxe est que la déclaration complète est plus courte et plus facile à lire. | ES6 introduit les fonctions Flèche : elles sont à la base identiques aux fonctions ordinaires, sauf que la syntaxe est différente. L'avantage de cette modification de la syntaxe est que la déclaration complète est plus courte et plus facile à lire. |
| |
| En JS classique : | En JS classique : |
| (num1, num2) => return num1 + num2 | (num1, num2) => return num1 + num2 |
| |
| Si vous voulez plus d'une ligne dans le corps de la fonction, vous devrez entourer le corps de parenthèses incurvées. Voyez l'exemple dans la prochaine section. | Si vous voulez plus d'une ligne dans le corps de la fonction, vous devrez entourer le corps d'acolades. Voyez l'exemple dans la prochaine section. |
| |
| **Default Function Parameters | **Default Function Parameters |
| Conclusion / Travail personnel | Conclusion / Travail personnel |
| |
| Il y a une foule d'autres choses que ES6 vous permet de faire, telles que de définir plus vite des objets, des classes et beaucoup d'autres. Jusqu'à présent, les sujets listés ci-dessus sont les seuls que j'ai le plus fréquemment utilisés et vus dans la documentation. Comme petit travail personnel, voyez si vous pouvez définir la nouvelle syntaxe la plus courte pour les déclarations d'objets dans ES6. | Il y a une foule d'autres choses que ES6 vous permet de faire, telles que de définir plus vite des objets, des classes et beaucoup d'autres. Jusqu'à présent, les sujets listés ci-dessus sont les seuls que j'ai le plus fréquemment utilisés et vus dans la documentation. Comme petit travail personnel, voyez si vous pouvez définir la nouvelle syntaxe courte pour les déclarations d'objets dans ES6. |
| |
| Pensez-vous que j'ai oublié une fonctionnalité importante ? Alors, merci de le faire savoir par mail à lswest34+fcm@gmail.com. De même, tous ceux qui ont des demandes d'articles et des corrections pour les précédents devraient me le faire savoir à l'adresse indiquée ci-avant. | Pensez-vous que j'ai oublié une fonctionnalité importante ? Alors, merci de le faire savoir par mail à lswest34+fcm@gmail.com. De même, tous ceux qui ont des demandes d'articles et des corrections pour les précédents devraient me le faire savoir à l'adresse indiquée ci-avant. |
