Javascript 2015 (ES6)
ECMAScript 2015
La deuxième révision majeure de JavaScript .
ECMAScript 2015 est également connu sous le nom d'ES6.
Nouvelles fonctionnalités de JavaScript 2015 (ES6)
| Fonctionnalité | Description |
|---|---|
| Le mot-clé let | Déclare une variable avec une portée de bloc |
| Le mot-clé const | Déclare une variable constante immuable |
| Fonctions fléchées | Permet une syntaxe courte pour écrire des expressions de fonction |
| {a,b} = Opérateur | Assigne des propriétés d'objet à des variables (destructuration d'objet) |
| [a,b] = Opérateur | Assigne des valeurs de tableau à des variables (destructuration de tableau) |
| ... Opérateur | Éparpille un tableau ou un itérable en éléments individuels |
| For/of | Parcourt les valeurs des objets itérables |
| Objets Map | Objet avec des paires clé-valeur, similaire mais différent des objets |
| Objets Set | Tableau qui stocke des valeurs uniques |
| Classes | Modèles pour les objets JavaScript |
| Promesses | Objet représentant l'achèvement d'une opération asynchrone |
| Symbole | Un identifiant "caché" unique auquel aucun code ne peut accéder |
| Paramètres par défaut | Permet des valeurs par défaut pour les paramètres de fonction |
| Paramètres rest | Permet aux fonctions de traiter un nombre indéfini d'arguments |
| String.includes() | Renvoie vrai si une chaîne contient une valeur spécifiée |
| String.startsWith() | Renvoie vrai si une chaîne commence par une valeur spécifiée |
| String.endsWith() | Renvoie vrai si une chaîne se termine par une valeur spécifiée |
| Array.entries() | Renvoie un itérateur de paires clé/valeur d'un tableau |
| Array.from() | Crée un tableau à partir d'une chaîne |
| Array.keys() | Renvoie un itérateur avec les clés d'un tableau |
| Array.find() | Renvoie la valeur du premier élément qui passe un test |
| Array.findIndex() | Renvoie l'index du premier élément qui passe un test |
| Object.assign() | Copie des propriétés d'un objet source vers un objet cible |
| RegExp /u | Active la prise en charge complète de l'Unicode dans une expression régulière |
| RegExp /y | Effectue une recherche "collante" à partir de la propriété lastIndex |
| isFinite() | renvoie vrai si l'argument n'est pas Infinity ou NaN |
| IsNaN() | Renvoie vrai si l'argument est NaN |
| Modules | Permet de diviser votre code en fichiers séparés |
| Reflect | Objet pour des opérations de bas niveau sur des objets |
| Proxy | Objet qui enveloppe d'autres objets pour des opérations de contrôle |
Fonctionnalités Mathématiques
| Fonctionnalité | Description |
|---|---|
| Math.trunc(x) | Renvoie la partie entière de x |
| Math.sign(x) | Renvoie -1, 0 ou 1 (x est négatif, nul ou positif) |
| Math.cbrt(x) | Renvoie la racine cubique de x |
| Math.log2(x) | Renvoie le logarithme en base 2 de x |
| Math.log10(x) | Renvoie le logarithme en base 10 de x |
Fonctionnalités Numériques
| Fonctionnalité | Description |
|---|---|
| Number.EPSILON | La différence entre 1 et le plus petit nombre supérieur à 1 |
| Number.MIN_SAFE_INTEGER | Valeur minimale qui peut être représentée avec précision |
| Number.MAX_SAFE_INTEGER | Valeur maximale qui peut être représentée avec précision |
| Number.isInteger() | Renvoie vrai si l'argument est un entier |
| Number.isSafeInteger() | Renvoie vrai si l'argument est un entier sûr |
Support des Navigateurs
JavaScript 2015 est pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avr 2017 | Juin 2017 | Sep 2016 | Juin 2016 |
ES6 n'est pas pris en charge dans Internet Explorer.
JavaScript let
Le let permet de déclarer une variable avec une portée de bloc.
Exemple
var x = 10;
// Ici x est 10
{
let x = 2;
// Ici x est 2
}
// Ici x est 10 Lisez-en plus sur let dans le chapitre : JavaScript Let .
JavaScript const
Le const permet de déclarer une constante (une variable JavaScript avec une valeur constante).
Les constantes sont similaires aux variables let, sauf que leur valeur ne peut pas être changée.
Exemple
var x = 10;
// Ici x est 10
{
const x = 2;
// Ici x est 2
}
// Ici x est 10 Lisez-en plus sur const dans le chapitre : JavaScript Const .
Fonctions fléchées
Les fonctions fléchées sont une syntaxe courte pour écrire des expressions de fonction .
Vous n'avez pas besoin du mot-clé function , du mot-clé return , ou des accolades .
Avant la flèche :
Fonction pour calculer le produit de a et b
let myFunction = function(a, b) {return a * b}
Avec flèche
let myFunction = (a, b) => a * b;
Remarque
Les fonctions fléchées n'ont pas leur propre this . Elles ne sont pas bien adaptées pour définir des méthodes d'objet .
Les fonctions fléchées ne sont pas élevées. Elles doivent être définies avant d'être utilisées.
Vous ne pouvez omettre le mot-clé return et les accolades que si la fonction est une seule instruction. Pour cette raison, il peut être bon d'avoir l'habitude de toujours les garder :
Exemple
// Cela ne fonctionnera pas
let myFunction = (x, y) => { x * y } ;
// Cela ne fonctionnera pas
let myFunction = (x, y) => return x * y ;
// Seul cela fonctionnera
let myFunction = (x, y) => { return x * y };
Apprenez-en plus sur les fonctions fléchées dans le chapitre : JavaScript Arrow Function .
Destructuration d'objet
L'affectation par destructuration facilite l'affectation des valeurs de tableau et des propriétés d'objet à des variables.
Exemple
// Créer un objet
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Affectation par destructuration
let { firstName, age } = person; Remarque :
Lors de la destructuration d'un objet, vous devez utiliser le même nom pour les variables que les clés (noms) correspondantes de l'objet.
L'ordre des clés (noms) n'a pas d'importance.
Destructuration de tableau
L'affectation par destructuration facilite l'affectation des valeurs de tableau et des propriétés d'objet à des variables.
Exemple
// Créer un tableau
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// Affectation par destructuration
let [fruit1, fruit2] = fruits; L'opérateur Spread (...)
L'opérateur ... éparpille un tableau ou un itérable en éléments individuels.
Exemple
L'opérateur ... peut passer des arguments à une fonction :
const numbers = [23,55,21,87,56];
let minValue = Math.min(...numbers);
let maxValue = Math.max(...numbers); Exemple
L'opérateur ... peut être utilisé pour joindre des tableaux :
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; Exemple
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "Dec"];
const year = [...q1, ...q2, ...q3, ...q4];
La boucle For/Of
L'instruction JavaScript for/of parcourt les valeurs des objets itérables.
for/of vous permet de parcourir des structures de données qui sont itérables telles que des tableaux, des chaînes, des cartes, des NodeLists, et plus encore.
La boucle for/of a la syntaxe suivante :
for ( variable of iterable ) {
// bloc de code à exécuter
}
variable - Pour chaque itération, la valeur de la propriété suivante est assignée à la variable. Variable peut être déclarée avec const , let , ou var .
iterable - Un objet qui a des propriétés itérables.
Parcourir un tableau
Exemple
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
} Parcourir une chaîne
Exemple
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
} Apprenez-en plus dans le chapitre : JavaScript Loop For/In/Of .
Cartes JavaScript
Une carte est un objet qui stocke des paires clé-valeur, similaire aux objets, mais avec des différences :
- Les clés peuvent être de n'importe quel type de données (objets, fonctions, valeurs primitives), contrairement aux objets simples où les clés sont des chaînes.
- Maintient l'ordre d'insertion original des clés.
Remarque
Pouvoir utiliser un objet comme clé est une fonctionnalité importante des cartes.
Exemple
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]); Apprenez-en plus sur les objets Map, et la différence entre une carte et un tableau, dans le chapitre : JavaScript Maps .
Ensembles JavaScript
Un ensemble est un objet qui stocke des valeurs uniques de n'importe quel type (valeurs primitives, fonctions, objets).
Un ensemble ne peut contenir que des valeurs uniques. Une tentative d'ajouter une valeur dupliquée sera ignorée.
Exemple
// Créer un ensemble
const letters = new Set();
// Ajouter des valeurs à l'ensemble
letters.add("a");
letters.add("b");
letters.add("c");
Apprenez-en plus sur les objets Set dans le chapitre : JavaScript Sets .
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 ClassName {
constructor() { ... }
} Exemple
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
} L'exemple ci-dessus crée une classe nommée "Car".
La classe a deux propriétés initiales : "name" et "year".
Une classe JavaScript est non 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 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Apprenez-en plus sur les classes dans le chapitre : JavaScript Classes .
Promesses JavaScript
Une promesse JavaScript est un objet représentant l'achèvement ou l'échec d'une opération asynchrone et ses valeurs.
C'est un espace réservé pour une valeur qui peut ne pas encore être disponible, fournissant un moyen structuré de gérer le code asynchrone.
Syntaxe de la promesse
const myPromise = new Promise(function(myResolve, myReject) {
// "Code de production" (peut prendre un certain temps)
myResolve(); // quand c'est réussi
myReject(); // quand il y a une erreur
});
// "Code de consommation" (doit attendre une promesse remplie).
myPromise.then(
function(value) { /* code si réussi */ },
function(error) { /* code si une erreur */ }
); Exemple utilisant une promesse
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("Je t'aime !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Apprenez-en plus sur les promesses dans le chapitre : JavaScript Promises .
Le type Symbol
Un symbole JavaScript est un type de données primitif, tout comme Number, String ou Boolean.
Il représente un identifiant unique "caché" auquel aucun autre code ne peut accéder accidentellement.
Par exemple, si différents développeurs souhaitent ajouter une propriété person.id à un objet person appartenant à un code tiers, ils pourraient mélanger les valeurs des autres.
Utiliser Symbol() pour créer des identifiants uniques résout ce problème :
Exemple
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Maintenant person[id] = 140353
// mais person.id est toujours indéfini Remarque
Les symboles sont toujours uniques.
Si vous créez deux symboles avec la même description, ils auront des valeurs différentes :
Symbol("id") == Symbol("id"); // faux Valeurs par défaut des paramètres
ES6 permet aux paramètres de fonction d'avoir des valeurs par défaut.
Exemple
function myFunction(x, y = 10) {
// y est 10 s'il n'est pas passé ou indéfini
return x + y;
}
myFunction(5); // renverra 15 Paramètre de fonction rest
Le paramètre rest (...) permet à une fonction de traiter un nombre indéfini d'arguments comme un tableau :
Exemple
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77); String.includes()
La méthode includes() renvoie true si une chaîne contient une valeur spécifiée, sinon false :
Exemple
let text = "Hello world, welcome to the universe.";
text.includes("world") // Renvoie vrai String.startsWith()
La méthode startsWith() renvoie true si une chaîne commence par une valeur spécifiée, sinon false :
Exemple
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Renvoie vrai String.endsWith()
La méthode endsWith() renvoie true si une chaîne se termine par une valeur spécifiée, sinon false :
Exemple
var text = "John Doe";
text.endsWith("Doe") // Renvoie vrai Array.entries()
Exemple
Créez un itérateur de tableau, puis parcourez les paires clé/valeur :
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
} La méthode entries() renvoie un objet itérateur de tableau avec des paires clé/valeur :
[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]
La méthode entries() ne change pas le tableau original.
Array.from()
La méthode Array.from() renvoie un objet tableau à partir de tout objet ayant une propriété length ou de tout objet itérable.
Exemple
Créez un tableau à partir d'une chaîne :
Array.from("ABCDEFG") // Renvoie [A,B,C,D,E,F,G]
Array.keys()
La méthode keys() renvoie un objet itérateur de tableau avec les clés d'un tableau.
Exemple
Créez un objet itérateur de tableau, contenant les clés du tableau :
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
} Array.find()
La méthode find() renvoie la valeur du premier élément de tableau qui passe une fonction de test.
Cet exemple trouve (renvoie la valeur de) le premier élément qui est supérieur à 18 :
Exemple
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
} Notez que la fonction prend 3 arguments :
- La valeur de l'élément
- L'index de l'élément
- Le tableau lui-même
Array.findIndex()
La méthode findIndex() renvoie l'index du premier élément de tableau qui passe une fonction de test.
Cet exemple trouve l'index du premier élément qui est supérieur à 18 :
Exemple
const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
} Notez que la fonction prend 3 arguments :
- La valeur de l'élément
- L'index de l'élément
- Le tableau lui-même
Modules
Les modules sont importés de deux manières différentes :
Importer des exportations nommées
Importer des exportations nommées depuis le fichier person.js :
import { name, age } from "./person.js";
Importer des exportations par défaut
Importer une exportation par défaut depuis le fichier message.js :
import message from "./message.js";
Apprenez-en plus sur les modules dans : JavaScript Modules .
JavaScript Reflect
Avant Reflect, les opérations sur les objets étaient éparpillées :
- Utilisation du mot-clé
in - Utilisation du mot-clé
delete - Utilisation de méthodes comme
Object.defineProperty - Utilisation de mécanismes de langage comme
[[ Get ]]et[[ Set ]]
Reflect regroupe tout cela dans des méthodes Reflect claires.
- Les méthodes Reflect unifient tout
- Les méthodes Reflect ont un comportement prévisible
- Les méthodes Reflect fonctionnent parfaitement avec Proxy
Reflect.has()
Exemple
// Créer un objet
const person = {name: "John", lastname: "Doe"};
let answer = Reflect.has(person, "name"); Même chose que d'utiliser l'opérateur in :
let answer = "name" in person; En savoir plus...
JavaScript Proxy
Exemple
// Créer un objet
const user = { name: "Jan", age: 40 };
//Créer un Proxy
const proxy = new Proxy(user, {
get(target, property) {
log("Obtention : " + property);
return target[property];
},
set(target, property, value) {
log("Définition : " + property);
return target[property];
}
});
proxy.name = "John";
let text = proxy.name;
En savoir plus...
Nouvelles méthodes Math
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 -1, 0 ou 1 (si x est négatif, nul ou positif) :
Exemple
Math.sign(-4); // renvoie -1
Math.sign(0); // renvoie 0
Math.sign(4); // renvoie 1
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
La méthode Math.log2()
Math.log2(x) renvoie le logarithme en base 2 de x :
Exemple
Math.log2(2); // renvoie 1
La méthode Math.log10()
Math.log10(x) renvoie le logarithme en base 10 de x :
Exemple
Math.log10(10); // renvoie 1
Nouvelles propriétés numériques
ES6 a ajouté les propriétés suivantes à l'objet Number :
-
EPSILON -
MIN_SAFE_INTEGER -
MAX_SAFE_INTEGER
Exemple EPSILON
La différence entre 1 et le plus petit nombre à virgule flottante supérieur à 1 :
let x = Number.EPSILON; Exemple MIN_SAFE_INTEGER
Valeur entière minimale qui peut être représentée avec précision :
let x = Number.MIN_SAFE_INTEGER; Exemple MAX_SAFE_INTEGER
Valeur entière maximale qui peut être représentée avec précision :
let x = Number.MAX_SAFE_INTEGER; La méthode Number.isInteger()
La méthode Number.isInteger() 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 représenté exactement comme un nombre à double précision.
La méthode Number.isSafeInteger() renvoie true si l'argument est un entier sûr.
Exemple
Number.isSafeInteger(10); // renvoie vrai
Number.isSafeInteger(12345678901234567890); // renvoie faux
Les entiers sûrs sont tous les entiers de -(2 53 - 1) à +(2 53 - 1).
Ceci est sûr : 9007199254740991. Ceci n'est pas sûr : 9007199254740992.
Nouvelles méthodes globales
ES6 a ajouté 2 nouvelles méthodes globales pour les nombres :
-
isFinite() -
isNaN()
La méthode isFinite()
La méthode globale isFinite() renvoie false si l'argument est Infinity ou NaN .
Sinon, elle renvoie true :
Exemple
isFinite(10/0); // renvoie faux
isFinite(10/1); // renvoie vrai
La méthode isNaN()
La méthode globale isNaN() renvoie true si l'argument est NaN . Sinon, elle renvoie false :
Exemple
isNaN("Hello"); // renvoie vrai
JavaScript Object.assign()
La méthode Object.assign() copie des propriétés d'un ou plusieurs objets source vers un objet cible.
Exemple
// Créer un objet cible
const person1 = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Créer un objet source
const person2 = {firstName: "Anne",lastName: "Smith"};
// Assigner la source à la cible
Object.assign(person1, person2); Modificateur RegExp u
Exemples
let text = "Hello 😄";
let pattern = /\p{Emoji}/u;
let result = pattern.test(text);
let text = "Hello 😄";
let pattern = /\p{Emoji}/;
let result = pattern.test(text);
Description
Le drapeau u (unicode) active la prise en charge complète de l'Unicode dans l'expression régulière.
Par défaut, JavaScript et regex traitent les caractères Unicode à 4 octets (comme les emojis ou les symboles moins courants) comme deux unités de code "surrogates" séparées de 2 octets.
Le drapeau u traite le motif comme une séquence de points de code Unicode, ce qui est important pour gérer correctement les caractères en dehors du Plan Multilingue de Base (BMP).
Modificateur RegExp y
Exemples
let text = "abc def ghi";
let pattern = /\w+/y;
// Commencer la correspondance à partir de la position 4
pattern.lastIndex = 4;
let result = text.match(pattern);
let text = "abc def ghi";
let pattern = /\w+/;
// Commencer la correspondance à partir de la position 4
pattern.lastIndex = 4;
let result = text.match(pattern);
Description
Le drapeau y (Sticky) effectue une recherche "collante" qui ne correspond qu'à partir de la propriété lastIndex de l'objet RegExp.
Le drapeau y garantit que les correspondances suivantes commencent immédiatement après la précédente, sans sauter de caractères.