Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • labo_linux1 • c_c • actuslinux • actus • labo_linux_2_-_trinity_q4os • tuto_gimp • python_p._53 • actuslinux • page_finalisation • labo_linux1
issue139:c_c

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue139:c_c [2018/12/05 09:11] – d52frissue139:c_c [2018/12/07 15:00] (Version actuelle) – auntiee
Ligne 1: Ligne 1:
-**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.**
  
-What is ECMAScript?+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?
  
 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 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.
  
 **New Features **New Features
Ligne 17: Ligne 22:
  
 ‘const’ defines a locally scoped variable that cannot be changed once declared (it’s a constant variable, in other words). So if you want to scale various values by the same amount without the chance of it changing, use a const for the scaling value.** ‘const’ defines a locally scoped variable that cannot be changed once declared (it’s a constant variable, in other words). So if you want to scale various values by the same amount without the chance of it changing, use a const for the scaling value.**
 +
 +Nouvelles fonctionnalités
 +
 +ES6 apporte avec lui un grand nombre de changements.
 +
 +Let/Const
 +
 +Dans le JS ordinaire, vous déclarez classiquement une var et vous en restez là. ES6 offre de nouvelles options - let et const.
 +
 +« 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, 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
Ligne 29: Ligne 46:
  
 let welcome = `Hello ${username}, last logged in: ${lastLogin}`** let welcome = `Hello ${username}, last logged in: ${lastLogin}`**
 +
 +Spread
 +
 +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.
 +
 +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 ${}.
 +
 +let welcome = `Hello ${username}, last logged in: ${lastLogin}`
  
  
Ligne 46: Ligne 75:
  
 If you have more than one line in the body of the function, you will need to wrap the body in curly braces. See the next section for an example.** If you have more than one line in the body of the function, you will need to wrap the body in curly braces. See the next section for an example.**
 +
 +Fonctions Flèche
 +
 +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 :
 +
 +function (num1, num2) {
 +    return num1 + num2
 +}
 +
 +Avec ES6 :
 +
 +(num1, num2) => return num1 + num2
 +
 +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
Ligne 54: Ligne 99:
  
 ES6 also simplified pulling data from objects and arrays (shown below).** ES6 also simplified pulling data from objects and arrays (shown below).**
 +
 +Paramètres par défaut des fonctions
 +
 +Aussi surprenant que ça paraisse, le JS standard ne vous laisse pas définir des valeurs par défaut pour les paramètres des fonctions (voir ci-dessus).
 +
 +Extraire des données des tableaux et objets
 +
 +ES6 simplifie aussi l'extraction de données des objets et tableaux (présenté ci-dessous).
  
 **Conclusion/Homework **Conclusion/Homework
Ligne 60: Ligne 113:
  
 Do you think I missed an important feature? Then please let me know via email at lswest34+fcm@gmail.com. Similarly, anyone who has requests for articles or corrections to past ones should let me know at the address listed above.** Do you think I missed an important feature? Then please let me know via email at lswest34+fcm@gmail.com. Similarly, anyone who has requests for articles or corrections to past ones should let me know at the address listed above.**
 +
 +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 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.
  
  
Ligne 69: Ligne 128:
  
 https://es6console.com - Online console where you can try out ES6 yourself.** https://es6console.com - Online console where you can try out ES6 yourself.**
 +
 +Pour aller plus loin
 +
 +https://babeljs.io/docs/en/learn/ - Documentation Babel sur ES6.
 +
 +https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be - Tutoriel sur des fonctionnalités classiques de ES6.
 +
 +https://es6console.com - Console en ligne où vous pouvez tester ES6.
issue139/c_c.1543997506.txt.gz · Dernière modification : 2018/12/05 09:11 de d52fr