Facebook
Twitter
LinkedIn

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.

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »