Javascript ES5
ECMAScript 2009, également connu sous le nom d'ES5, a été la première révision majeure de JavaScript.
Ce chapitre décrit les fonctionnalités les plus importantes de ES5.
Fonctionnalités ES5
- "utiliser strictement"
- Accès chaîne[ nombre ]
- Chaînes multilignes
- String.trim()
- Tableau.estArray()
- Tableau pour chaque()
- Carte de tableau()
- Filtre de tableau()
- Réduire le tableau()
- Tableau réduireRight()
- Tableau chaque()
- Tableau certains()
- Tableau indexOf()
- Tableau lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Date.maintenant()
- Date àISOString()
- Date toJSON()
- Getters et setters de propriété
- Mots réservés comme noms de propriété
- Méthodes objet
- Objet defineProperty()
- Fonction.bind()
- Virgules de fin
Prise en charge du navigateur
ES5est entièrement pris en charge dans tous les navigateurs modernes :
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9.0 | Yes | Yes | Yes | Yes |
La directive "usage strict"
"use strict"définit que le code JavaScript doit être exécuté en "mode strict".
Avec le mode strict, vous pouvez, par exemple, ne pas utiliser de variables non déclarées.
Vous pouvez utiliser le mode strict dans tous vos programmes. Cela vous aide à écrire du code plus propre, comme vous empêcher d'utiliser des variables non déclarées.
"use strict"est juste une expression de chaîne. Les anciens navigateurs ne lanceront pas d'erreur s'ils ne le comprennent pas.
En savoir plus en mode JS Strict .
Accès aux propriétés sur les chaînes
La charAt()méthode renvoie le caractère à un index (position) spécifié dans une chaîne :
Exemple
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 autorise l'accès aux propriétés sur les chaînes :
Exemple
var str = "HELLO WORLD";
str[0]; // returns H
L'accès à la propriété sur la chaîne peut être un peu imprévisible.
En savoir plus dans les méthodes de chaîne JS .
Chaînes sur plusieurs lignes
ES5 autorise les littéraux de chaîne sur plusieurs lignes s'ils sont échappés avec une barre oblique inverse :Exemple
"Hello \
Dolly!";
La méthode \ peut ne pas avoir de support universel.
Les navigateurs plus anciens peuvent traiter différemment les espaces autour de la barre oblique inverse.
Certains navigateurs plus anciens n'autorisent pas les espaces derrière le caractère \.
Un moyen plus sûr de décomposer un littéral de chaîne consiste à utiliser l'ajout de chaîne :
Exemple
"Hello " +
"Dolly!";
Mots réservés comme noms de propriété
ES5 autorise les mots réservés comme noms de propriété :
Exemple d'objet
var obj = {name: "John", new: "yes"}
Couper la chaîne()
La trim()méthode supprime les espaces des deux côtés d'une chaîne.
Exemple
var str = " Hello World! ";
alert(str.trim());
En savoir plus dans les méthodes de chaîne JS .
Tableau.estArray()
La isArray()méthode vérifie si un objet est un tableau.
Exemple
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
En savoir plus sur les tableaux JS .
Tableau pour chaque()
La forEach()méthode appelle une fonction une fois pour chaque élément du tableau.
Exemple
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
En savoir plus sur les méthodes d'itération de tableau JS .
Carte de tableau()
Cet exemple multiplie chaque valeur de tableau par 2 :
Exemple
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
En savoir plus sur les méthodes d'itération de tableau JS .
Filtre de tableau()
Cet exemple crée un nouveau tableau à partir d'éléments dont la valeur est supérieure à 18 :
Exemple
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
En savoir plus sur les méthodes d'itération de tableau JS .
Réduire le tableau()
Cet exemple trouve la somme de tous les nombres dans un tableau :
Exemple
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
En savoir plus sur les méthodes d'itération de tableau JS .
Tableau réduireRight()
Cet exemple trouve également la somme de tous les nombres d'un tableau :
Exemple
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
En savoir plus sur les méthodes d'itération de tableau JS .
Tableau chaque()
Cet exemple vérifie si toutes les valeurs sont supérieures à 18 :
Exemple
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
En savoir plus sur les méthodes d'itération de tableau JS .
Tableau certains()
Cet exemple vérifie si certaines valeurs sont supérieures à 18 :
Exemple
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
En savoir plus sur les méthodes d'itération de tableau JS .
Tableau indexOf()
Recherche dans un tableau une valeur d'élément et renvoie sa position.
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
En savoir plus sur les méthodes d'itération de tableau JS .
Tableau lastIndexOf()
lastIndexOf()est identique à indexOf(), mais recherche à partir de la fin du tableau.
Exemple
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
En savoir plus sur les méthodes d'itération de tableau JS .
JSON.parse()
Une utilisation courante de JSON consiste à recevoir des données d'un serveur Web.
Imaginez que vous receviez 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 objet JavaScript :
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Pour en savoir plus, consultez notre didacticiel JSON .
JSON.stringify()
Une utilisation courante de JSON consiste à 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 ayons cet objet en JavaScript :
var obj = {name:"John", age:30, city:"New York"};
Utilisez la fonction JavaScript JSON.stringify()pour le convertir en chaîne.
var myJSON = JSON.stringify(obj);
Le résultat sera une chaîne suivant la notation JSON.
myJSON est maintenant une chaîne, et prêt à être envoyé à un serveur :
Exemple
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Pour en savoir plus, consultez notre didacticiel JSON .
Date.maintenant()
Date.now() returns the number of milliseconds since zero date (January 1.
1970 00:00:00 UTC).
Example
var timInMSs = Date.now();
Date.now() returns the same as getTime() performed on a Date object.
Learn more in JS Dates.
Date toISOString()
The toISOString() method converts a Date object to a string, using the ISO standard format:
Example
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
Date toJSON()
toJSON() converts a Date object into a string, formatted as a JSON date.
JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:
Example
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
Property Getters and Setters
ES5 lets you define object methods with a syntax that looks like getting or setting a property.
This example creates a getter for a property called fullName:
Example
// Create an object:
var person = {
firstName:
"John",
lastName : "Doe",
get
fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.fullName;
This example creates a setter and a getter for the language property:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.lang;
This example uses a setter to secure upper case updates of language:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object:
document.getElementById("demo").innerHTML =
person.language;
Learn more about Gettes and Setters in JS Object Accessors
Object.defineProperty()
Object.defineProperty() is a new Object method in ES5.
It lets you define an object property and/or change a property's value and/or metadata.
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
Next example is the same code, except it hides the language property from enumeration:
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
This example creates a setter and a getter to secure upper case updates of language:
Example
/// Create an Object:
var person = {
firstName: "John",
lastName :
"Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return
language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";
// Display Language
document.getElementById("demo").innerHTML = person.language;
E5 Object Methods
ES5 added a lot of new Object Methods to JavaScript:
Managing Objects
// Create object with an existing object as prototype
Object.create(parent, donor)
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)
// Returns enumerable properties as an array
Object.keys(object)
Protecting Objects
// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)
// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)
// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)
Learn more in Object ECMAScript5.
Trailing Commas
ES5 allows trailing commas in object and array definitions:
Object Example
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
Array Example
points = [
1,
5,
10,
25,
40,
100,
];
WARNING !!!
JSON does not allow trailing commas.
JSON Objects:
//
Allowed:
var person = '{"firstName":"John", "lastName":"Doe",
"age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John",
"lastName":"Doe", "age":46,}'
JSON.parse(person)
JSON Arrays:
//
Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points =
[40, 100, 1, 5, 25, 10,]