ECMAScript 2017
Nouvelles fonctionnalités de JavaScript 2017
| Fonctionnalité | Description | |
|---|---|---|
| String padStart() | Ajoute des caractères au début d'une chaîne | |
| String padEnd() | Ajoute des caractères à la fin d'une chaîne | |
| Object.entries() | Renvoie un tableau des paires clé/valeur d'un objet | |
| Object.values() | Renvoie un tableau des valeurs d'un objet | |
| async et await | Simplifie la gestion des promesses | |
| Virgules finales | Permet les virgules finales là où une liste de valeurs séparées par des virgules est acceptée | |
| getOwnProperty Descripteurs | Renvoie un objet contenant tous les descripteurs de propriété d'un objet |
Support des navigateurs
JavaScript 2017 est pris en charge dans tous les navigateurs modernes depuis septembre 2017 :
| Chrome 58 | Edge 15 | Firefox 52 | Safari 11 | Opera 45 |
| Avr 2017 | Avr 2017 | Mar 2017 | Sep 2017 | Mai 2017 |
Remplissage de chaînes en JavaScript
ECMAScript 2017 a ajouté deux méthodes de chaîne à JavaScript : padStart() et padEnd() pour permettre le remplissage au début et à la fin d'une chaîne.
Exemples
let text = "5";
text = text.padStart(4,0);
let text = "5";
text = text.padEnd(4,0);
Entrées d'objet en JavaScript
ECMAScript 2017 a ajouté la méthode Object.entries() aux objets.
Object.entries() renvoie un tableau des paires clé/valeur d'un objet :
Exemple
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
let text = Object.entries(person); Object.entries() facilite également l'utilisation des objets dans les boucles :
Exemple
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "<br>";
} Object.entries() facilite également la conversion des objets en cartes :
Exemple
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits)); Valeurs d'objet en JavaScript
Object.values() est similaire à Object.entries() , mais renvoie un tableau unidimensionnel des valeurs d'un objet :
Exemple
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
let text = Object.values(person); Fonctions asynchrones en JavaScript
Attente d'un délai d'attente
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("Je t'aime !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Virgules finales en JavaScript
JavaScript permet les virgules finales partout où une liste de valeurs séparées par des virgules est acceptée.
Cela inclut les littéraux de tableau et d'objet, les appels de fonction, les paramètres, ainsi que les importations et exportations.
Exemple
function myFunc(x,,,) {};
const myArr = [1,2,3,4,,,];
const myObj = {fname: "John", age:50,,,};
La méthode Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptors() renvoie tous les descripteurs de propriété d'un objet donné.
Exemple
La méthode getOwnPropertyNames() renvoie un tableau contenant les propriétés d'un objet :
const myProp = Object.getOwnPropertyNames(person); Exemple
La méthode getOwnPropertyDescriptors() renvoie les descripteurs de propriété d'un objet.
const myProp = Object.getOwnPropertyDescriptors(person); Un descripteur de propriété est un objet qui décrit tous les attributs d'une propriété :
- value: La valeur de la propriété
- writable: true si la valeur de la propriété peut être changée
- enumerable: true si la propriété apparaîtra dans les boucles (for...in, Object.keys())
- configurable: true si le descripteur de propriété peut être changé ou supprimé
- get: Fonction pour obtenir la valeur de la propriété (pour les propriétés d'accès)
- set: Fonction pour définir la valeur de la propriété (pour les propriétés d'accès)
Clonage d'objet
La méthode Object.getOwnPropertyDescriptors() est souvent utilisée pour cloner des objets tout en préservant les accesseurs, les mutateurs et les attributs de propriété :
Exemple
const clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(person));