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
- Le mot-clé let
- Le mot clé const
- Fonctions fléchées
- Pour/de
- Objets cartographiques
- Définir des objets
- Des classes
- Promesses
- symbole
- Paramètres par défaut
- Paramètre de repos de la fonction
- String.includes()
- String.startsWith()
- String.endsWith()
- Tableau.de()
- Clés de tableau()
- Recherche de tableau()
- Tableau findIndex()
- Nouvelles méthodes mathématiques
- Propriétés du nouveau numéro
- Nouvelles méthodes numériques
- Nouvelles méthodes globales
- Itérables Object.entries
- Modules Javascript
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 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript laisse
Le mot- letclé vous permet de déclarer une variable avec une portée de bloc.
Exemple
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
En savoir plus letdans le chapitre : JavaScript Let .
Const JavaScript
Le constmot 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
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
En savoir plus constdans 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 du mot- functionclé, du mot- returnclé et
des accolades .
Exemple
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Les fonctions fléchées n'ont pas leur propre this. Ils ne sont pas bien adaptés pour définir des méthodes d'objet .
Les fonctions fléchées ne sont pas hissées. Ils doivent être définis avant d' être utilisés.
L'utilisation const
est plus sûre que l'utilisation de var, car une expression de fonction est toujours une valeur constante.
Vous ne pouvez omettre le returnmot-clé et les accolades que si la fonction est une instruction unique. Pour cette raison, ce pourrait être une bonne habitude de toujours les garder :
Exemple
const x = (x, y) => { return x * y };
Apprenez-en plus sur les fonctions fléchées dans le chapitre : Fonction flèche JavaScript .
La boucle For/Of
L'instruction JavaScript for/ofparcourt les valeurs d'un objet itérable.
for/ofvous 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.
La for/ofboucle a la syntaxe suivante :
for (variable of iterable) {
// code block to be executed
}
variable - Pour chaque itération, la valeur de la propriété suivante est affectée à la variable. La variable peut être déclarée avec
const, letou var.
itérable - Un objet qui a des propriétés itérables.
Bouclage sur un tableau
Exemple
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Boucler sur une chaîne
Exemple
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Apprenez-en plus dans le chapitre : Boucle JavaScript For/In/Of .
Objets cartographiques JavaScript
Pouvoir utiliser un objet comme clé est une caractéristique importante de la carte.
Exemple
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Apprenez-en plus sur les objets Map dans le chapitre : JavaScript Map() .
Objets d'ensemble JavaScript
Exemple
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Apprenez-en plus sur les objets Set dans le chapitre : JavaScript Set() .
Classes JavaScript
Les classes JavaScript sont des modèles pour les objets JavaScript.
Utilisez le mot-clé classpour 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 : "nom" et "année".
Une classe JavaScript n'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 = new Car("Ford", 2014);
const myCar2 = new Car("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) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Exemple d'utilisation d'une promesse
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
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 person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
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") // false
Valeurs des paramètres par défaut
ES6 permet aux paramètres de fonction d'avoir des valeurs par défaut.
Exemple
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 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
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 includes()méthode retourne truesi une chaîne contient une valeur spécifiée, sinon false:
Exemple
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.startsWith()
La startsWith()méthode retourne 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") // Returns true
String.endsWith()
La endsWith()méthode retourne true
si une chaîne se termine par une valeur spécifiée, sinon false:
Exemple
var text = "John Doe";
text.endsWith("Doe") // Returns true
Tableau.de()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true