SlideShare una empresa de Scribd logo
1 de 11
ECMASCRIPT6
Introduction à ES6:
ES6 est l’acronyme de ECMAScript 6, a été créé pour normaliser JavaScript, et
es6 est la 6e version d'ECMAScript, elle a été publiée en 2015 et est également
connue sous le nom d'ECMAScript 2015.
React utilise ES6, et vous devriez être familiarisé avec certaines des nouvelles
fonctionnalités qui sont très utilisables telles que :
● Fonctions fléchées
● Variables (let, const, var)
● Méthodes de tableau map()
● Déstructuration
● Opérateur de propagation
● Opérateur ternaire
● Modules
Les fonctions fléchées (Arrow Functions):
Les fonctions fléchées nous permettent d'écrire une syntaxe de fonction plus courte :
nomDeLaFonction = (arguments) => expression
Sans ES6
hello = function() {
return "Hello World!";
}
avec ES6
hello = ()=> {
return "Hello World!";
}
Les fonctions fléchées (Arrow Functions):
Exemple:
Les fonctions fléchées (Arrow Functions):
Exemple2:
Les fonctions fléchées (Arrow Functions):
Exercice:
Convertir la fonction suivante en JavaScript ES5 en une fonction fléchée en JavaScript ES6
:
Les fonctions fléchées (Arrow Functions):
Solution:
Les variables:
Avant ES, il n'y avait qu'une seule façon de définir vos variables : avec le mot-clé var. Si
vous ne les aviez pas définis, ils seraient affectés à l'objet global. Sauf si vous étiez en mode
strict, vous obtiendrez une erreur si vos variables n'étaient pas définies.
Maintenant, avec ES6, il existe trois façons de définir vos variables :
1. Var:
● Si vous l'utilisez var en dehors d'une fonction, elle appartient à la portée globale.
● Si vous utilisez var l'intérieur d'une fonction, il appartient à cette fonction.
● Si vous utilisez var l'intérieur d'un bloc, c'est-à-dire une boucle for, la variable est toujours disponible en dehors
de ce bloc.
2. Let :
● let à portée de bloc de var, et est limitée au bloc (ou à l'expression) où elle est définie.
● Si vous utilisez let à l'intérieur d'un bloc, c'est-à-dire une boucle for, la variable n'est disponible qu'à l'intérieur de
cette boucle.
3. Const:
● Il ne définit pas une valeur constante. Il définit une référence constante à une valeur.
Méthode de tableau map():
● Il existe de nombreuses méthodes de tableaux JavaScript, L'une des plus utiles dans
React est la méthode map().
● La méthode .map() permet d'exécuter une fonction sur chaque élément du tableau,
renvoyant un nouveau tableau comme résultat.
● Exemple1:
La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
Exemple2:
Nous avons déclaré un tableau products contenant des objets représentant des produits. Ensuite,
nous avons utilisé la méthode map pour créer un nouveau tableau productNames contenant les
noms de chaque produit.
Exercice:
1. Créez une fonction nommée "carrés" qui prend un tableau
de nombres comme argument.
2. Utilisez la méthode map pour parcourir le tableau de
nombres et renvoyer un nouveau tableau contenant les
carrés de chaque nombre.
3. Retournez le nouveau tableau contenant les carrés.

Más contenido relacionado

Similar a ECMASCRIPT6 1partie.pptx

Conception de base_de_l_algorithme
Conception de base_de_l_algorithmeConception de base_de_l_algorithme
Conception de base_de_l_algorithme
mustapha4
 
Enib cours c.a.i. web - séance #5 : scala play! framework
Enib   cours c.a.i. web - séance #5 : scala play! frameworkEnib   cours c.a.i. web - séance #5 : scala play! framework
Enib cours c.a.i. web - séance #5 : scala play! framework
Horacio Gonzalez
 
Cours 1 bases de matlab 2eme annees
Cours 1   bases de matlab 2eme anneesCours 1   bases de matlab 2eme annees
Cours 1 bases de matlab 2eme annees
Tarik Taleb Bendiab
 
Mat lab1
Mat lab1Mat lab1
Mat lab1
fouadDD
 

Similar a ECMASCRIPT6 1partie.pptx (20)

Introduction a Java
Introduction a JavaIntroduction a Java
Introduction a Java
 
La programmation fonctionnelle en javascript / PF
La programmation fonctionnelle en javascript / PFLa programmation fonctionnelle en javascript / PF
La programmation fonctionnelle en javascript / PF
 
Chap3 programmation modulaire en python
Chap3 programmation modulaire en pythonChap3 programmation modulaire en python
Chap3 programmation modulaire en python
 
L’environnement de programmation fonctionnelle DrRacket
L’environnement de programmation fonctionnelle DrRacketL’environnement de programmation fonctionnelle DrRacket
L’environnement de programmation fonctionnelle DrRacket
 
JAVA Chapitre6
JAVA Chapitre6JAVA Chapitre6
JAVA Chapitre6
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Conception de base_de_l_algorithme
Conception de base_de_l_algorithmeConception de base_de_l_algorithme
Conception de base_de_l_algorithme
 
0519-pdf-php-bases-initiation.pdf
0519-pdf-php-bases-initiation.pdf0519-pdf-php-bases-initiation.pdf
0519-pdf-php-bases-initiation.pdf
 
Ladder
LadderLadder
Ladder
 
C# langage & syntaxe
C#   langage & syntaxeC#   langage & syntaxe
C# langage & syntaxe
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
 
ch3_les variables_dynamiques.pdf
ch3_les variables_dynamiques.pdfch3_les variables_dynamiques.pdf
ch3_les variables_dynamiques.pdf
 
Nettoyer et transformer ses données avec Openrefine : partie 2
Nettoyer et transformer ses données avec Openrefine : partie 2Nettoyer et transformer ses données avec Openrefine : partie 2
Nettoyer et transformer ses données avec Openrefine : partie 2
 
Les bases de la programmation en JAVA
Les bases de la programmation  en JAVA   Les bases de la programmation  en JAVA
Les bases de la programmation en JAVA
 
Support matlab st
Support matlab stSupport matlab st
Support matlab st
 
Enib cours c.a.i. web - séance #5 : scala play! framework
Enib   cours c.a.i. web - séance #5 : scala play! frameworkEnib   cours c.a.i. web - séance #5 : scala play! framework
Enib cours c.a.i. web - séance #5 : scala play! framework
 
Cours 1 bases de matlab 2eme annees
Cours 1   bases de matlab 2eme anneesCours 1   bases de matlab 2eme annees
Cours 1 bases de matlab 2eme annees
 
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
 
Cours de Matlab
Cours de MatlabCours de Matlab
Cours de Matlab
 
Mat lab1
Mat lab1Mat lab1
Mat lab1
 

Último

Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
AmgdoulHatim
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
ikospam0
 

Último (16)

Télécommunication et transport .pdfcours
Télécommunication et transport .pdfcoursTélécommunication et transport .pdfcours
Télécommunication et transport .pdfcours
 
Neuvaine de la Pentecôte avec des textes de saint Jean Eudes
Neuvaine de la Pentecôte avec des textes de saint Jean EudesNeuvaine de la Pentecôte avec des textes de saint Jean Eudes
Neuvaine de la Pentecôte avec des textes de saint Jean Eudes
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
 
Apolonia, Apolonia.pptx Film documentaire
Apolonia, Apolonia.pptx         Film documentaireApolonia, Apolonia.pptx         Film documentaire
Apolonia, Apolonia.pptx Film documentaire
 
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANKRAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
 
les_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhkles_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhk
 
Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
 
Echos libraries Burkina Faso newsletter 2024
Echos libraries Burkina Faso newsletter 2024Echos libraries Burkina Faso newsletter 2024
Echos libraries Burkina Faso newsletter 2024
 
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptxIntégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
 
python-Cours Officiel POO Python-m103.pdf
python-Cours Officiel POO Python-m103.pdfpython-Cours Officiel POO Python-m103.pdf
python-Cours Officiel POO Python-m103.pdf
 
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
 
L application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptxL application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptx
 
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projetFormation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
 
L'expression du but : fiche et exercices niveau C1 FLE
L'expression du but : fiche et exercices  niveau C1 FLEL'expression du but : fiche et exercices  niveau C1 FLE
L'expression du but : fiche et exercices niveau C1 FLE
 
Cours Généralités sur les systèmes informatiques
Cours Généralités sur les systèmes informatiquesCours Généralités sur les systèmes informatiques
Cours Généralités sur les systèmes informatiques
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
 

ECMASCRIPT6 1partie.pptx

  • 2. Introduction à ES6: ES6 est l’acronyme de ECMAScript 6, a été créé pour normaliser JavaScript, et es6 est la 6e version d'ECMAScript, elle a été publiée en 2015 et est également connue sous le nom d'ECMAScript 2015. React utilise ES6, et vous devriez être familiarisé avec certaines des nouvelles fonctionnalités qui sont très utilisables telles que : ● Fonctions fléchées ● Variables (let, const, var) ● Méthodes de tableau map() ● Déstructuration ● Opérateur de propagation ● Opérateur ternaire ● Modules
  • 3. Les fonctions fléchées (Arrow Functions): Les fonctions fléchées nous permettent d'écrire une syntaxe de fonction plus courte : nomDeLaFonction = (arguments) => expression Sans ES6 hello = function() { return "Hello World!"; } avec ES6 hello = ()=> { return "Hello World!"; }
  • 4. Les fonctions fléchées (Arrow Functions): Exemple:
  • 5. Les fonctions fléchées (Arrow Functions): Exemple2:
  • 6. Les fonctions fléchées (Arrow Functions): Exercice: Convertir la fonction suivante en JavaScript ES5 en une fonction fléchée en JavaScript ES6 :
  • 7. Les fonctions fléchées (Arrow Functions): Solution:
  • 8. Les variables: Avant ES, il n'y avait qu'une seule façon de définir vos variables : avec le mot-clé var. Si vous ne les aviez pas définis, ils seraient affectés à l'objet global. Sauf si vous étiez en mode strict, vous obtiendrez une erreur si vos variables n'étaient pas définies. Maintenant, avec ES6, il existe trois façons de définir vos variables : 1. Var: ● Si vous l'utilisez var en dehors d'une fonction, elle appartient à la portée globale. ● Si vous utilisez var l'intérieur d'une fonction, il appartient à cette fonction. ● Si vous utilisez var l'intérieur d'un bloc, c'est-à-dire une boucle for, la variable est toujours disponible en dehors de ce bloc. 2. Let : ● let à portée de bloc de var, et est limitée au bloc (ou à l'expression) où elle est définie. ● Si vous utilisez let à l'intérieur d'un bloc, c'est-à-dire une boucle for, la variable n'est disponible qu'à l'intérieur de cette boucle. 3. Const: ● Il ne définit pas une valeur constante. Il définit une référence constante à une valeur.
  • 9. Méthode de tableau map(): ● Il existe de nombreuses méthodes de tableaux JavaScript, L'une des plus utiles dans React est la méthode map(). ● La méthode .map() permet d'exécuter une fonction sur chaque élément du tableau, renvoyant un nouveau tableau comme résultat. ● Exemple1: La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
  • 10. Exemple2: Nous avons déclaré un tableau products contenant des objets représentant des produits. Ensuite, nous avons utilisé la méthode map pour créer un nouveau tableau productNames contenant les noms de chaque produit.
  • 11. Exercice: 1. Créez une fonction nommée "carrés" qui prend un tableau de nombres comme argument. 2. Utilisez la méthode map pour parcourir le tableau de nombres et renvoyer un nouveau tableau contenant les carrés de chaque nombre. 3. Retournez le nouveau tableau contenant les carrés.