Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste :
issue139:c_c

Différences

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

Lien vers cette vue comparative

Prochaine révision		Révision précédente
issue139:c_c [2018/12/01 16:16] – créée auntieeissue139: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.
  
-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.+**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.**
  
-New Features+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
  
 ES6 brought with it a large number of changes. ES6 brought with it a large number of changes.
Ligne 16: Ligne 21:
 ‘let’ defines a locally scoped variable that you can re-assign, but not redeclare. So if you want to make a counter that is run through a loop, ‘let’ would be what you want. ‘let’ defines a locally scoped variable that you can re-assign, but not redeclare. So if you want to make a counter that is run through a loop, ‘let’ would be what you want.
  
-‘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.**
  
-Spread+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
  
 Have you ever had an array that you want to dump to the console, or otherwise just turn into separate elements? Spread does exactly that. It even lets you combine two arrays with minimal fuss. Have you ever had an array that you want to dump to the console, or otherwise just turn into separate elements? Spread does exactly that. It even lets you combine two arrays with minimal fuss.
Ligne 27: Ligne 44:
  
 Previously, if you wanted to join strings together, you had to use a + operator. Now, ES6 will let you call them within a string using backticks and ${} variables. Previously, if you wanted to join strings together, you had to use a + operator. Now, ES6 will let you call them within a string using backticks and ${} variables.
 +
 +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}` let welcome = `Hello ${username}, last logged in: ${lastLogin}`
  
  
-Arrow Functions+**Arrow Functions
  
 ES6 also introduced arrow functions - these are essentially the same as regular functions, except the syntax is different. The upside to the syntax changes are that the whole declaration is shorter and easier to read. ES6 also introduced arrow functions - these are essentially the same as regular functions, except the syntax is different. The upside to the syntax changes are that the whole declaration is shorter and easier to read.
Ligne 45: Ligne 74:
 (num1, num2) => return num1 + num2 (num1, num2) => return num1 + num2
  
-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.**
  
-Default Function Parameters+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
  
 As surprising as it may seem, vanilla JS doesn’t let you define default values to your function parameters (see above). As surprising as it may seem, vanilla JS doesn’t let you define default values to your function parameters (see above).
Ligne 53: Ligne 98:
 Extract Data from Arrays and Objects Extract Data from Arrays and Objects
  
-ES6 also simplified pulling data from objects and arrays (shown below).+ES6 also simplified pulling data from objects and arrays (shown below).**
  
-Conclusion/Homework+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
  
 There are a lot of other things ES6 allows you to do - such as defining objects faster, classes, and many others. So far, the items listed above are the ones I have most commonly used and seen in documentation. As a bit of homework - see if you can figure out the new shortened syntax for object literals in ES6. There are a lot of other things ES6 allows you to do - such as defining objects faster, classes, and many others. So far, the items listed above are the ones I have most commonly used and seen in documentation. As a bit of homework - see if you can figure out the new shortened syntax for object literals in ES6.
  
-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
  
-Further Reading+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. 
 + 
 + 
 +**Further Reading
  
 https://babeljs.io/docs/en/learn/ - Babel documentation on ES6 https://babeljs.io/docs/en/learn/ - Babel documentation on ES6
Ligne 68: Ligne 127:
 https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be - Tutorial on some common features of ES6 https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be - Tutorial on some common features of ES6
  
-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.1543677375.txt.gz · Dernière modification : 2018/12/01 16:16 de auntiee