JavaScript 2009 (ES5)
ECMAScript 2009
La première révision majeure de JavaScript .
ECMAScript 2009 est également connu sous le nom de ES5.
Fonctionnalités de ES5
| Fonctionnalité | Description |
|---|---|
| "use strict" | Permet d'exécuter le code en "mode strict" |
| Accès à String [] | Renvoie le caractère à un index spécifié dans une chaîne |
| Chaînes multilignes | Permet des chaînes sur plusieurs lignes si échappées avec \ |
| String.trim() | Supprime les espaces vides des deux côtés d'une chaîne |
| Array.isArray() | Renvoie true si une variable est un tableau |
| Array forEach() | Appelle une fonction pour chaque élément du tableau |
| Array map() | Crée un nouveau tableau à partir d'une fonction appliquée à chaque élément |
| Array filter() | Crée un tableau à partir des éléments qui passent un test |
| Array reduce() | Réduit un tableau à une seule valeur (de gauche) |
| Array reduceRight() | Réduit un tableau à une seule valeur (de droite) |
| Array every() | Vérifie si toutes les valeurs du tableau passent un test |
| Array some() | Vérifie si certaines valeurs passent un test |
| Array indexOf() | Recherche une valeur d'élément et renvoie sa position |
| Array lastIndexOf() | Recherche une valeur d'élément et renvoie sa position |
| JSON.parse() | Convertit JSON en un objet JavaScript |
| JSON.stringify() | Convertit un objet JavaScript en chaîne JSON |
| Date.now() | Renvoie le nombre de millisecondes depuis la date zéro |
| Date toISOString() | Convertit un objet Date en chaîne ISO |
| Date toJSON() | Convertit un objet Date en chaîne JSON |
| Accesseurs de propriété | Permet de définir comment une valeur de propriété est récupérée |
| Mutateurs de propriété | Permet de définir comment une valeur de propriété est définie |
| Noms réservés | Permet d'utiliser des noms réservés comme noms de propriété |
| Object.create() | Crée un objet à partir d'un objet existant |
| Object.keys() | Renvoie un tableau contenant les clés d'un objet |
| Gestion des objets | Méthodes de gestion des objets |
| Protection des objets | Méthodes de protection des objets |
| Object.defineProperty() | Permet de définir ou de modifier les propriétés d'un objet |
| Function bind() | Permet aux objets d'emprunter des méthodes d'autres objets |
| Virgules finales | Permet des virgules finales dans les définitions d'objets et de tableaux : |
Support des navigateurs
JavaScript 2009 est pris en charge dans tous les navigateurs modernes depuis juillet 2013 :
| Chrome 23 | IE/Edge 10 | Firefox 21 | Safari 6 | Opera 15 |
| Sep 2012 | Sep 2012 | Apr 2013 | Jul 2012 | Jul 2013 |
La directive "use strict"
"use strict" définit que le code JavaScript doit être exécuté en "mode strict".
Avec le mode strict, vous ne pouvez, par exemple, pas utiliser de variables non déclarées.
Vous pouvez utiliser le mode strict dans tous vos programmes. Cela vous aide à écrire un code plus propre, en vous empêchant d'utiliser des variables non déclarées.
"use strict" est simplement une expression de chaîne. Les anciens navigateurs ne généreront pas d'erreur s'ils ne le comprennent pas.
Accès aux propriétés sur les chaînes
La méthode charAt() renvoie le caractère à un index (position) spécifié dans une chaîne :
Exemple
let str = "HELLO WORLD";
str.charAt(0); // renvoie H ES5 permet l'accès aux propriétés sur les chaînes :
Exemple
let str = "HELLO WORLD";
str[0]; // renvoie H L'accès aux propriétés sur les chaînes peut être un peu imprévisible.
En savoir plus dans Méthodes de chaîne JS .
Chaînes sur plusieurs lignes
ES5 permet les littéraux de chaîne sur plusieurs lignes s'ils sont échappés avec un antislash :
Exemple
"Hello \
Dolly!"; Remarque
La méthode \ peut ne pas avoir de support universel.
Les anciens navigateurs peuvent traiter les espaces autour de l'antislash différemment.
Certains anciens navigateurs ne permettent pas d'espaces derrière le caractère \.
Une manière plus sûre de diviser un littéral de chaîne est d'utiliser l'addition de chaînes :
Exemple
"Hello " +
"Dolly!"; Mots réservés comme noms de propriété
ES5 permet d'utiliser des mots réservés comme noms de propriété :
Exemple d'objet
var obj = {name: "John", new: "yes"} String trim()
La méthode trim() supprime les espaces vides des deux côtés d'une chaîne.
Exemple
var str = " Hello World! ";
alert(str.trim()); En savoir plus dans Méthodes de chaîne JS .
Array.isArray()
La méthode isArray() vérifie si un objet est un tableau.
Exemple
const fruits = ["Banana", "Orange", "Apple", "Mango"];
result = Array.isArray(fruits); En savoir plus dans Méthodes de tableau JS .
Array forEach()
La méthode forEach() appelle une fonction une fois pour chaque élément du tableau.
Exemple
const numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
En savoir plus dans Méthodes d'itération de tableau JS .
Array map()
La méthode map() crée un nouveau tableau en appliquant une fonction à chaque élément du tableau.
Exemple
Multipliez chaque valeur du tableau par 2 :
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
} En savoir plus dans Méthodes d'itération de tableau JS .
Array filter()
La méthode filter() crée un nouveau tableau à partir des éléments qui passent un test.
Exemple
Créez un nouveau tableau à partir des éléments avec une valeur supérieure à 18 :
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
} En savoir plus dans Méthodes d'itération de tableau JS .
Array reduce()
La méthode reduce() réduit un tableau à une seule valeur.
Exemple
Trouvez la somme de tous les nombres dans un tableau :
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
} En savoir plus dans Méthodes d'itération de tableau JS .
Array reduceRight()
La méthode reduceRight() réduit un tableau à une seule valeur (de droite à gauche).
Exemple
Trouvez la somme de tous les nombres dans un tableau :
const numbers1 = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
} En savoir plus dans Méthodes d'itération de tableau JS .
Array every()
La méthode every() vérifie si toutes les valeurs du tableau passent un test.
Exemple
Vérifiez si toutes les valeurs sont supérieures à 18 :
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
} En savoir plus dans Méthodes d'itération de tableau JS .
Array some()
La méthode some() vérifie si certaines valeurs du tableau passent un test.
Exemple
Vérifiez si certaines valeurs sont supérieures à 18 :
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.some(myFunction);
function myFunction(value) {
return value > 18;
} En savoir plus dans Méthodes d'itération de tableau JS .
Array indexOf()
La méthode indexOf() recherche une valeur d'élément et renvoie sa position.
Exemple
Recherchez une valeur d'élément dans un tableau :
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1; En savoir plus dans Méthodes de recherche de tableau JS .
Array lastIndexOf()
lastIndexOf() est identique à indexOf() , mais recherche à partir de la fin du tableau.
Exemple
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1; En savoir plus dans Méthodes de recherche de tableau JS .
JSON.parse()
Une utilisation courante de JSON est de recevoir des données d'un serveur web.
Imaginez que vous avez reçu cette chaîne de texte d'un serveur web :
'{"name":"John", "age":30, "city":"New York"}' La fonction JavaScript JSON.parse() est utilisée pour convertir le texte en un objet JavaScript :
Exemple
const txt = '{"name":"John", "age":30, "city":"New York"}'
const myObj = JSON.parse(txt);
En savoir plus dans notre Tutoriel JSON .
JSON.stringify()
Une utilisation courante de JSON est d'envoyer des données à un serveur web.
Lors de l'envoi de données à un serveur web, les données doivent être une chaîne.
Imaginez que nous avons cet objet en JavaScript :
const myObj = {name:"John", age:30, city:"New York"}; Utilisez la fonction JavaScript JSON.stringify() pour le convertir en une chaîne.
const myJSON = JSON.stringify(myObj); Le résultat sera une chaîne suivant la notation JSON.
myJSON est maintenant une chaîne, prête à être envoyée à un serveur :
Exemple
const myObj = {name:"John", age:30, city:"New York"};
const myJSON = JSON.stringify(myObj);
En savoir plus dans notre Tutoriel JSON .
Date.now()
Date.now() renvoie le nombre de millisecondes depuis la date zéro (1er janvier 1970 00:00:00 UTC).
Exemple
var timInMSs = Date.now(); Date.now() renvoie la même chose que getTime() effectué sur un objet Date .
En savoir plus dans Méthodes de date JS .
Date toISOString()
La méthode toISOString() convertit un objet Date en une chaîne, en utilisant le format standard ISO :
Exemple
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString(); En savoir plus dans Méthodes de date JS .
Date toJSON()
toJSON() convertit un objet Date en une chaîne, formatée comme une date JSON.
Les dates JSON ont le même format que la norme ISO-8601 : YYYY-MM-DDTHH:mm:ss.sssZ :
Exemple
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON(); En savoir plus dans Méthodes de date JS .
Accesseurs de propriété
Un accesseur de propriété est une méthode qui vous permet de définir comment une valeur de propriété est récupérée lorsqu'elle est accédée.
Cet exemple crée un accesseur pour une propriété appelée fullName :
Exemple
// Créer un objet :
const Person = {
firstName: "John",
lastName : "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// Afficher les données de l'objet en utilisant un accesseur :
document.getElementById("demo").innerHTML = Person.fullName; En savoir plus sur les accesseurs et les mutateurs dans Accesseurs d'objet JS
Mutateurs de propriété
Un mutateur de propriété est une méthode qui vous permet de définir comment une valeur de propriété est définie.
Cet exemple utilise un mutateur pour sécuriser les mises à jour en majuscules de la langue :
Exemple
const Person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Définir une propriété d'objet en utilisant un mutateur :
person.lang = "en";
// Afficher les données de l'objet :
document.getElementById("demo").innerHTML = Person.language;
Cet exemple crée un mutateur et un accesseur pour la propriété de langue :
Exemple
const Person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Définir une propriété d'objet en utilisant un mutateur :
person.lang = "en";
// Afficher les données de l'objet en utilisant un accesseur :
document.getElementById("demo").innerHTML = Person.lang;
En savoir plus sur les accesseurs et les mutateurs dans Accesseurs d'objet JS
Object.defineProperty()
Object.defineProperty() est une nouvelle méthode d'objet dans ES5.
Elle vous permet de définir une propriété d'objet et/ou de modifier la valeur d'une propriété et/ou ses métadonnées.
Exemple
// Créer un objet :
const person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// Modifier une propriété :
Object.defineProperty (person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
// Énumérer les propriétés
let txt = "";
for (let x in person) {
txt += person[x] + "<br>";
}
// Afficher les propriétés
document.getElementById("demo").innerHTML = txt;
L'exemple suivant est le même code, sauf qu'il cache la propriété de langue de l'énumération :
Exemple
// Créer un objet :
const person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// Modifier une propriété :
Object.defineProperty (person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
// Énumérer les propriétés
let txt = "";
for (let x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
Cet exemple crée un mutateur et un accesseur pour sécuriser les mises à jour en majuscules de la langue :
Exemple
// Créer un objet :
const person = {
firstName: "John",
lastName : "Doe",
language : "NO"
};
// Modifier une propriété :
Object.defineProperty (person, "language", {
get : function() { return language },
set : function(value) { language = value.toUpperCase()}
});
// Modifier la langue
person.language = "en";
// Afficher la langue
document.getElementById("demo").innerHTML = person.language; En savoir plus dans Gestion des objets JS
Object.create()
La méthode Object.create() crée un objet à partir d'un objet existant.
Exemple
// Créer un objet :
const person = {
firstName: "John",
lastName: "Doe"
};
// Créer un nouvel objet
const man = Object.create(person);
man.firstName = "Peter";
En savoir plus dans Définition d'objet JS
Object.keys()
La méthode Object.keys() renvoie un tableau contenant les clés d'un objet.
Exemple
// Créer un objet
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Obtenir les clés
const keys = Object.keys(person); En savoir plus dans Itérations d'objet JS
Gestion des objets
ES5 a ajouté de nouvelles méthodes de gestion des objets à JavaScript :
Gestion des objets
// Ajouter ou modifier une propriété d'objet
Object.defineProperty(object, property, descriptor)
// Ajouter ou modifier des propriétés d'objet
Object.defineProperties(object, descriptors)
// Accéder à une propriété
Object.getOwnPropertyDescriptor(object, property)
// Accéder aux propriétés
Object.getOwnPropertyDescriptors(object)
// Renvoie toutes les propriétés sous forme de tableau
Object.getOwnPropertyNames(object)
// Accéder au prototype
Object.getPrototypeOf(object)
En savoir plus dans Propriétés d'objet .
Protection des objets
ES5 a ajouté des méthodes de protection des objets à JavaScript :
Protection des objets
// Empêche l'ajout de propriétés à un objet
Object.preventExtensions(object)
// Renvoie true si des propriétés peuvent être ajoutées à un objet
Object.isExtensible(object)
// Empêche les modifications des propriétés d'objet (pas des valeurs)
Object.seal(object)
// Renvoie true si l'objet est scellé
Object.isSealed(object)
// Empêche toute modification d'un objet
Object.freeze(object)
// Renvoie true si l'objet est gelé
Object.isFrozen(object) En savoir plus dans Protection des objets .
Function Bind()
Avec la méthode bind() , un objet peut emprunter une méthode d'un autre objet.
Cet exemple crée 2 objets (personne et membre).
L'objet membre emprunte la méthode fullname de l'objet personne :
Exemple
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member); En savoir plus dans Function bind() .
Virgules finales
ES5 permet des virgules finales dans les définitions d'objets et de tableaux :
Exemple d'objet
person = {
firstName: "John",
lastName: " Doe",
age: 46,
} Exemple de tableau
points = [
1,
5,
10,
25,
40,
100,
]; AVERTISSEMENT
JSON ne permet pas les virgules finales.
Objets JSON :
// Autorisé :
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)
// Non autorisé :
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person) Tableaux JSON :
// Autorisé :
points = [40, 100, 1, 5, 25, 10]
// Non autorisé :
points = [40, 100, 1, 5, 25, 10,]