29/02/2016
Les objets en JS sont des concepts relativement simple. Un objet vous permettra de stocker des pair clé valeur ainsi que des méthodes (des functions).
Un petit exemple pour que vous voyiez bien de quoi je parle ici
var bookArray = ["Big Brother", "1984", "Peter Pan"];
var myBox = {
height: 6,
width: 10,
length: 730,
meterial : "cardboard",
content : bookArray
};
Accéder à une propriété / de l'objet
Pour accéder à une propriété de l’objet, c’est très simple. Imaginons que nous voulons afficher la hauteur de notre boite.
Il suffit de faire
console.log(myBox.height);
Mais nous pourrions aussi faire légèrement différemment
console.log(myBox["height"]);
Les deux notations fonctionneront parfaitement, je vous conseille cependant de privilégier la notation pointée (la première) qui est plus répandue.
Créer / une propriété
Nous pouvons ajouter une propriété à notre objet pour ce faire nous pouvons utiliser la notation pointée. Mais si la clé de notre propriété contient des espaces, il faudra absolument utiliser la notation entre crochets.
myBox.nbStops = 2;
// avec des espaces dans le nom de la propriété
myBox["# of stops"] = 2;
Construire dynamiquement / des propriétés
for (var i = 1; i <= myBox["# of stops"]; i++){
console.log(myBox["destination"+i] = "Orlando");
}
Va rajouter les propriétés suivantes à l’objet :
destination1: "Orlando-1"
destination2: "Orlando-1"
Supprimer / une propriété et son contenu
Il existe une méthode pour supprimer une propriété et son contenu dans un objet. C’est la méthode delete.
Si par exemple nous voulons supprimer la propriété contents de l’objet.
delete myBox.contents;
La méthode delete supprimera la propriété dans son ensemble pas seulement son contenu, mais sa clé et sa valeur.
Attention à la valeur de retour de delete
il est important de faire attention à la valeur de retour de delete en effet celle si retournera true si une suppression s’est effectuée sur une propriété existante dans l’objet ,mais aussi sur une propriété qui n’existait pas
Si j’effectue une suppression d’une propriété non existante
delete myBox.proprioeteInconnue
// retourne true
Ajouter dynamiquement une propriété / avec comme valeur un objet
Pour ce faire nous allons créer une fonction
var myBox = {
'# of books' : 2,
height: 6,
width: 10,
length: 730,
meterial : "cardboard"
};
function addBook(box,name,writer){
box["# of books"]++; // on incrémente de 1e nb de livre
box["book" + box["# of books"]] = {title : name, author: writer}; // ajoute une propriété bookN avec comme paramètre un objet contenant le title et le writer
}
addBook(myBox,"Le title du livre","Good Writer");
Accéder à une valeur / contenue dans un sous objet
var myBox = {
book1 : {
title : "Le title du livre",
writer : "Good Writer"
}
}
Pour accéder à la valeur title il suffit de faire :
myBox.book1.title;
// retourne "Le title du livre"
Il est aussi possible d’utilise la notation entre crochet pour obtenir le même résultat
myBox['book1']['title'];
// retourne "Le title du livre"
Les functions / dans les objets
Les objets JavaScript peuvent contenir des valeurs (string, interger, bloeen) rattachées à une clé.,Mais les objets peuvent aussi contenir des functions plus exactement des functions anonymes rattachées à une clé.
Petit exemple
var aquarium = {
Nemo : {type : "fish", species : "clownfish", length: 3.7},
Marlin : {type : "fish", species : "clownfish", lenght: 4.2},
addCritter : function (name, type,species,lenght){
this[name] = {type: type, species: species, lenght: lenght};
}
}
Ici nous avons un objet avec une function addCriter permettant d’ajouter une nouvelle propriété à l’objet.
Il est important de remarquer que nous utilisons le mot clé ‘this’ qui fait référence à l’objet à l’intérieur de celui-ci.
Appeler une function contenue dans un objet
aquarium.addCritter('Bubbles','fish','yellow tang',5.6);
supprimer une propriété d’un objet
Pour supprimer une propriété d’un objet nous pouvons utiliser un fonction anonyme.
exemple
aquarium.takeOut = function(name){
var temp = this[name];
delete this[name];
return temp
}
var fishOutofWater = aquarium.takeOut("Marlin");
console.log(fishOutofWater); // retourne l'objet supprimé (temp)
Cependant l’objet supprimé de contient pas la clé (le nom de notre valeur).
Comment pouvons-nous donc faire pour récupérer le nom ?
Voilà comment
aquarium.takeOut = function(name){
this[name].name = name; // On rajoute une valeur name dans la valeure
var temp = this[name];
delete this[name];
return temp
}
Itérer / un objet
Lorsque l’on souhaite connaitre le nombre de valeurs d’un array il est très simple d’utiliser length.
var monArray = ["Hello","Wor","ld"];
monArray.length; // retourne 2
Mais length ne marche pas sur les objet, pas de chance… Nous pourrions par contre faire une boucle sur l’objet.
Mais si nous voulions connaitre le nombre de propriété avec une valeur précise ?
C’est là que rentre en jeux la loop for-in ! Petite démonstration :
var aquarium = {
Nemo : {type : "fish", species : "clownfish", length: 3.7},
Marlin : {type : "fish", species : "clownfish", lenght: 4.2},
addCritter : function (name, type,species,lenght){
this[name] = {type: type, species: species, lenght: lenght};
}
}
for (key in aquarium){
console.log(key);
}
la boucle for in va ittérer notre objet en transposant chaque propriété dans la variable key.
A noté que la variable key peut changer de nm pour n’importe quoi.
Donc si nous voulions savoir exactement le nombre de propriétés avec une valeur particulières c’est assez simple.
Par exemple si nous voulons connaitre le nombre de propriété de type « fish » il nous suffit de mettre en place cette loop.
var numFish = 0;
for (key in aquarium){
if(aquarium[key].type == "fish"){
numFish++
}
}
console.log('Le Nombre de poissons dans l\'objet est : '+numFish);
Nous pourrions aussi améliorer notre objet en intégrant une fonction qui permettrait de comptabiliser le nombre de poissons dans notre objet.
aquarium.countFish = function(){ // on rajoute une function à l'objet
var numFish = 0;
for (key in this){
if(this[key].type == "fish"){
numFish++
}
}
return numFish;
}
Ensuite nous pouvons appeler cette function de l’objet
aquarium.countFish();
