Manipuler les objets en javascript
En javascript vous pouvez manipuler vos objets, comme parcourir ses propriétés, créer des références ou encore dupliquer les objets.
Parcourir les objets
Lorsqu’un objet est créé vous pouvez parcourir ses propriétés et donc récupérer ses valeurs? Vous pouvez utiliser la boucle for in :
for ( prop in monObjet ) {
}
Ici prop est le nom que vous donnez (nom libre) à la variable qui récupère, dans la boucle for chaque propriété de votre objet monObjet.
Voici un exemple concrêt :
let monObjet = {couleur : 'rouge', hauteur: 170, largeur: 80};
for (prop in monObjet) {
document.write( prop + '<br>' );
}
Affichage
couleur
hauteur
largeur
Pour récupérer les valeurs des propriétés, vous pouvez utiliser la méthode des crochets (accesseurs de propriétés) : monObjet[prop] . En effet, avec la boucle for in , les propriétés sont retournées sous forme de chaîne de caractères, vous ne pouvez donc pas utiliser la syntaxe pointée : monObjet.prop
let monObjet = {couleur : 'rouge', hauteur: 170, largeur: 80};
for (prop in monObjet) {
document.write( prop + " : " + monObjet[prop] + '<br>' );
}
Affichage
couleur : rouge
hauteur : 170
largeur : 80
Créer une référence d’objet
Il ne faut pas confondre une référence (on dit aussi ‘shallow copy’) et une copie d’objet ( ou ‘deep copy’). Une copie est un clonage d’objet, c’est à dire un autre objet mais qui est identique à l’original.
Par contre une référence (ou pointeur), est une autre variable, nommée différemment, mais qui pointe le même objet. Par exemple, on peut identifier une personne par son pseudo ou par son nom. Dans cet exemple la variable pseudo est une référence de la variable nom.
En javascript, lorsque vous affecter une variable par une autre variable qui n’est pas d’un type primitif (booléen, nombre ou chaîne de caractère), vous créer automatiquement une référence.
let obj = new Object();
copy = obj; // on créé une référence et non pas une copie
let copy.nom="copy";
obj.nom = "original";
document.write(copy.nom);
Affichage
original
Vous remarquez que la propriété nom de copy est original et nom pas copy (ligne 3). En effet, comme la propriété nom de obj est modifiée après (ligne 4) et que copy pointe obj, tout changement au niveau obj se répercute au niveau de copy.
Créer une copie d’objet
Si vous souhaitez copier un objet c’est à dire le clonez (entièrement identique) mais indépendant de l’original, il faut sérialiser la variable avec une méthode de l’objet JSON
JSON.stringify()
puis la déserialiser avec
JSON.parse()
let obj = new Object();
let copy = JSON.parse(JSON.stringify(obj)); // copie
copy.nom="copy";
obj.nom = "original";
document.write(copy.nom);
Affichage
copy
Vous remarquez, contrairement à l’exemple plus haut sur la référence, que la propriété nom de copy est bien copy. L’objet copy est bien indépendant de l’objet obj.
