Javascript ES6
ECMAScript 2015 était la deuxième révision majeure de JavaScript.
ECMAScript 2015 est également appelé ES6 et ECMAScript 6.
Ce chapitre décrit les fonctionnalités les plus importantes de ES6.
Nouvelles fonctionnalités dans ES6
Prise en charge du navigateur pour ES6 (2015)
Safari 10 et Edge 14 ont été les premiers navigateurs à prendre entièrement en charge ES6 :
| Chrome 58 | Bord 14 | Firefox 54 | Safari 10 | Opéra 55 |
| janvier 2017 | août 2016 | mars 2017 | juil. 2016 | août 2018 |
JavaScript laisse
Le let Le mot clé vous permet de déclarer une variable avec une portée de bloc.
Exemple
varx = 10 ;
// Ici x vaut 10
{
soit x = 2 ;
// Ici x vaut 2
}
// Ici x vaut 10
En savoir plus sur let dans le chapitre : JavaScript Let.
Const JavaScript
Le const Le mot-clé permet de déclarer une constante (une variable JavaScript avec une valeur constante).
Les constantes sont similaires aux variables let, sauf que la valeur ne peut pas être modifiée.
Exemple
varx = 10 ;
// Ici x vaut 10
{
const x = 2 ;
// Ici x vaut 2
}
// Ici x vaut 10
En savoir plus sur const dans le chapitre : JavaScript Const.
Fonctions fléchées
Les fonctions fléchées permettent une syntaxe courte pour écrire des expressions de fonction.
Vous n’avez pas besoin de function mot clé, le return mot-clé, et le
accolades.
Exemple
// ES5
var x = fonction(x, y) {
retourner x * y ;
}
// ES6
const x = (x, y) => x * y ;
Les fonctions fléchées n’ont pas leur propre this. Ils ne conviennent pas pour définir méthodes objet.
Les fonctions fléchées ne sont pas hissées. Ils doivent être définis avant ils sont utilisés.
En utilisant const
est plus sûr que d’utiliser varcar une expression de fonction est toujours une valeur constante.
Vous pouvez seulement omettre le return mot clé et les accolades si la fonction est une instruction unique. Pour cette raison, ce pourrait être une bonne habitude de toujours les garder :
Apprenez-en plus sur les fonctions fléchées dans le chapitre : Fonction flèche JavaScript.
L’opérateur Spread (…)
L’opérateur … développe un itérable (comme un tableau) en plusieurs éléments :
Exemple
const q1 = [“Jan”, “Feb”, “Mar”];
const q2 = [“Apr”, “May”, “Jun”];
const q3 = [“Jul”, “Aug”, “Sep”];
const q4 = [“Oct”, “Nov”, “May”];
année constante = […q1, …q2, …q3, …q4];
L’opérateur … peut être utilisé pour développer un itérable en plusieurs arguments pour les appels de fonction :
Exemple
nombres constants = [23,55,21,87,56];
let maxValue = Math.max(…numbers);
Essayez-le vous-même »
La boucle For/Of
Le Javascript for/of L’instruction parcourt les valeurs d’un objet itérable.
for/of vous permet de boucler sur des structures de données itérables telles que des tableaux, des chaînes, des cartes, des listes de nœuds, etc.
Le for/of boucle a la syntaxe suivante :
pour (variable de itérable) {
// bloc de code à exécuter
}
variable – A chaque itération, la valeur de la propriété suivante est affectée à la variable. Variable peut être déclaré avec
const, letou var.
itérable – Un objet qui a des propriétés itérables.
Bouclage sur un tableau
Exemple
const voitures = [“BMW”, “Volvo”, “Mini”];
laisser texte = “” ;
pour (soit x de voitures) {
texte += x + ” ” ;
}
Boucler sur une chaîne
Exemple
let language = “JavaScript” ;
laisser texte = “” ;
pour (soit x de la langue) {
texte += x + ” ” ;
}
Essayez-le vous-même »
Apprenez-en plus dans le chapitre : Boucle JavaScript For/In/Of.
Cartes JavaScript
Pouvoir utiliser un objet comme clé est une caractéristique importante de la carte.
Exemple
const fruits = nouvelle carte([
[“apples”, 500],
[“bananas”, 300],
[“oranges”, 200]
]);
Apprenez-en plus sur les objets Map et la différence entre une Map et un Array dans le chapitre : JavaScript Maps.
Ensembles JavaScript
Exemple
// Créer un ensemble
lettres const = new Set();
// Ajoute des valeurs au Set
lettres.add(“a”);
lettres.add(“b”);
lettres.add(“c”);
Apprenez-en plus sur les objets Set dans le chapitre : Ensembles JavaScript.
Classes JavaScript
Les classes JavaScript sont des modèles pour les objets JavaScript.
Utilisez le mot-clé class pour créer une classe.
Ajoutez toujours une méthode nommée constructor():
Syntaxe
class NomClasse {
constructeur() { … }
}
Exemple
voiture de classe {
constructeur(nom, année) {
this.name = nom;
cette.année = année ;
}
}
L’exemple ci-dessus crée une classe nommée “Car”.
La classe a deux propriétés initiales : “nom” et “année”.
Une classe JavaScript est pas un objet.
C’est un modèle pour les objets JavaScript.
Utiliser une classe
Lorsque vous avez une classe, vous pouvez l’utiliser pour créer des objets :
Exemple
const myCar1 = nouvelle voiture (“Ford”, 2014);
const myCar2 = nouvelle voiture(“Audi”, 2019);
Apprenez-en plus sur les classes dans le chapitre : Classes JavaScript.
Promesses JavaScript
Une promesse est un objet JavaScript qui relie “Producing Code” et “Consuming Code”.
“Producing Code” peut prendre un certain temps et “Consuming Code” doit attendre le résultat.
Syntaxe de la promesse
const myPromise = new Promise(function(myResolve, myReject) {
// “Produire du code” (peut prendre un certain temps)
maRésolution(); // en cas de succès
monRejet(); // quand erreur
});
// “Consuming Code” (doit attendre une promesse remplie).
maPromise.then(
fonction (valeur) { /* code si réussi */ },
fonction (erreur) { /* code si une erreur */ }
);
Exemple d’utilisation d’une promesse
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve(“Je t’aime !!”); }, 3000);
});
maPromise.alors(fonction(valeur) {
document.getElementById(“démo”).innerHTML = valeur ;
});
Apprenez-en plus sur les promesses dans le chapitre : Promesses JavaScript.
Le type de symbole
Un symbole JavaScript est un type de données primitif, tout comme Number, String ou Boolean.
Il représente un identifiant “caché” unique auquel aucun autre code ne peut accidentellement accéder.
Par exemple, si différents codeurs souhaitent ajouter une propriété person.id à un objet person appartenant à un code tiers, ils peuvent mélanger les valeurs des autres.
L’utilisation de Symbol() pour créer un identifiant unique résout ce problème :
Exemple
const personne = {
prénom : “John”,
nom: “Biche”,
âge : 50 ans,
couleur des yeux : “bleu”
} ;
let id = Symbol(‘id’);
personne[id] = 140353 ;
// Maintenant personne[id] = 140353
// mais person.id n’est toujours pas défini
Note
Les symboles sont toujours uniques.
Si vous créez deux symboles avec la même description, ils auront des valeurs différentes :
Symbole(“id”) == Symbole(“id”); // FAUX
Valeurs des paramètres par défaut
ES6 permet aux paramètres de fonction d’avoir des valeurs par défaut.
Exemple
function maFonction(x, y = 10) {
// y vaut 10 si non passé ou indéfini
retourner x + y ;
}
maFonction(5); // renverra 15
Paramètre de repos de la fonction
Le paramètre rest (…) permet à une fonction de traiter un nombre indéfini d’arguments comme un tableau :
Exemple
fonction somme(…args) {
soit somme = 0 ;
for (let arg of args) sum += arg ;
somme de retour ;
}
soit x = somme(4, 9, 16, 25, 29, 100, 66, 77);
String.includes()
Le includes() la méthode renvoie true si une chaîne contient une valeur spécifiée, sinon false:
Exemple
let text = “Bonjour le monde, bienvenue dans l’univers.”;
text.includes(“monde”) // Renvoie vrai
String.startsWith()
Le startsWith() la méthode renvoie true
si une chaîne commence par une valeur spécifiée, sinon false:
Exemple
let text = “Bonjour le monde, bienvenue dans l’univers.”;
text.startsWith(“Bonjour”) // Renvoie vrai
String.endsWith()
Le endsWith() la méthode renvoie true
si une chaîne se termine par une valeur spécifiée, sinon false:
Tableau.de()
Le Array.from() renvoie un objet Array à partir de n’importe quel objet avec une propriété de longueur ou de n’importe quel objet itérable.
Exemple
Créez un tableau à partir d’une chaîne :
Array.from(“ABCDEFG”) // Retourne [A,B,C,D,E,F,G]
Clés de tableau()
Le keys() renvoie un objet Array Iterator avec les clés d’un tableau.
Exemple
Créez un objet Array Iterator, contenant les clés du tableau :
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
clés const = fruits.keys();
laisser texte = “” ;
pour (let x de clés) {
texte += x + “
” ;
}
Recherche de tableau()
Le find() La méthode renvoie la valeur du premier élément du tableau qui réussit une fonction de test.
Cet exemple trouve (renvoie la valeur de ) le premier élément supérieur à 18 :
Exemple
nombres constants = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
function maFonction(valeur, index, tableau) {
valeur de retour > 18 ;
}
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
Tableau findIndex()
Le findIndex() La méthode renvoie l’indice du premier élément du tableau qui réussit une fonction de test.
Cet exemple trouve l’index du premier élément supérieur à 18 :
Exemple
nombres constants = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
function maFonction(valeur, index, tableau) {
valeur de retour > 18 ;
}
Notez que la fonction prend 3 arguments :
- La valeur de l’article
- L’index des articles
- Le tableau lui-même
Nouvelles méthodes mathématiques
ES6 a ajouté les méthodes suivantes à l’objet Math :
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
La méthode Math.trunc()
Math.trunc(x) renvoie la partie entière de x :
Exemple
Math.trunc(4.9); // renvoie 4
Math.trunc(4.7); // renvoie 4
Math.trunc(4.4); // renvoie 4
Math.trunc(4.2); // renvoie 4
Math.trunc(-4.2); // renvoie -4
La méthode Math.sign()
Math.sign(x) renvoie si x est négatif, nul ou positif :
Exemple
Math.sign(-4); // renvoie -1
Math.sign(0); // retourne 0
Math.sign(4); // renvoie 1
Essayez-le vous-même »
La méthode Math.cbrt()
Math.cbrt(x) renvoie la racine cubique de x :
Exemple
Math.cbrt(8); // renvoie 2
Math.cbrt(64); // renvoie 4
Math.cbrt(125); // renvoie 5
Essayez-le vous-même »
La méthode Math.log2()
Math.log2(x) renvoie le logarithme en base 2 de x :
La méthode Math.log10()
Math.log10(x) renvoie le logarithme en base 10 de x :
Propriétés du nouveau numéro
ES6 a ajouté les propriétés suivantes à l’objet Number :
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Nouvelles méthodes numériques
ES6 a ajouté 2 nouvelles méthodes à l’objet Number :
Number.isInteger()Number.isSafeInteger()
La méthode Number.isInteger()
Le Number.isInteger() la méthode renvoie true si l’argument est un entier.
Exemple
Number.isInteger(10); // renvoie vrai
Number.isInteger(10.5); // renvoie faux
La méthode Number.isSafeInteger()
Un entier sûr est un entier qui peut être exactement représenté par un nombre à double précision.
Le Number.isSafeInteger() la méthode renvoie true si l’argument est un entier sûr.
Exemple
Number.isSafeInteger(10); // renvoie vrai
Number.isSafeInteger(12345678901234567890); // renvoie faux
Essayez-le vous-même »
Les entiers sûrs sont tous les entiers de -(253 – 1) à +(253 – 1).
Ceci est sûr : 9007199254740991. Ceci n’est pas sûr : 9007199254740992.
Nouvelles méthodes globales
ES6 a ajouté 2 nouvelles méthodes de numérotation globale :
La méthode isFinite()
Le Global isFinite() la méthode renvoie false si l’argument est Infinity ou NaN.
Sinon ça revient true:
La méthode isNaN()
Le Global isNaN() la méthode renvoie true si l’argument est NaN. Sinon ça revient false:
Entrées d’objet()
Exemple
Créez un Array Iterator, puis parcourez les paires clé/valeur :
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
const f = fruits.entries();
pour (soit x de f) {
document.getElementById(“démo”).innerHTML += x;
}
Le entries() renvoie un objet Array Iterator avec des paires clé/valeur :
[0, “Banana”]
[1, “Orange”]
[2, “Apple”]
[3, “Mango”]
Le entries() La méthode ne modifie pas le tableau d’origine.
Modules
Les modules sont importés de deux manières différentes :
Importer à partir d’exportations nommées
Importez des exportations nommées à partir du fichier person.js :
import { nom, âge } de “./person.js” ;
Importer à partir des exportations par défaut
Importez un export par défaut depuis le fichier message.js :
importer le message depuis “./message.js” ;
Essayez-le vous-même »
En savoir plus sur les modules dans : Modules JavaScript.
#Javascript #ES6
