Tutoriel pour apprendre la programmation en JavaScript

VI. TP 6 : Objets▲

Objectifs :

Savoir développer un répertoire téléphonique
Utilisation d'objets

VI-A. Objets JavaScript▲

Dans la première moitié de ce chapitre, nous avons vu que les tableaux permettaient de stocker une liste ordonnée d'éléments (ayant chacun une valeur de n'importe quel type). Et que ces éléments étaient indexés par des numéros.

Exemple :

Sélectionnez

1.
2.
3.
4.
5.

var tableau = ['a', 'b', 4];
// => Correspondance entre numéros d'éléments et leur valeur
//    0 : 'a'
//    1 : 'b'
//    2 : 4

Les objets permettent aussi de stocker des valeurs.

Alors que chaque valeur d'un tableau est stockée dans un élément, chaque valeur d'un objet est stockée dans ce qu'on appelle une propriété.

Alors que chaque élément d'un tableau est indexé par un numéro (indice), chaque propriété d'un objet est indexée par une chaine de caractères.

VI-A-1. Définition d'objet▲

Contrairement à la manière de définir un tableau, chaque valeur de propriété stockée dans un objet doit être précédée du nom de cette propriété (aussi appelé clé, ou key en anglais), et suivi par : (deux-points).

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

var objet = {
  prop1 : 'a',
  prop2 : 'b',
  prop3 : 4,
};
// => Correspondance entre noms de propriétés et leur valeur
//    'prop1' : 'a'
//    'prop2' : 'b'
//    'prop3' : 4

À noter que chaque définition de propriété doit être ponctuée d'une virgule.

Les règles d'indentation s'appliquent aussi à la définition d'objets sur plusieurs lignes, car les propriétés sont définies entre accolades.

Le format JSON (JavaScript Object Notation, utilisé très couramment par les API de sites web, et exports structurés de données depuis le web) correspond à cette manière de définir des objets. Nous allons y revenir plus tard dans ce chapitre.

VI-A-2. Accès aux propriétés d'un objet▲

Il existe deux manières d'accéder à la valeur d'une propriété d'objet :

La notation pointée, ex. : objet.prop
L'usage des crochets, ex. : objet[prop]

Comme pour les tableaux, l'adressage par crochets a un avantage intéressant : il permet d'accéder à un élément dont la clé est stockée dans une variable.

Exemple :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

var objet = {
  prop1 : 'a',
  prop2 : 'b',
  prop3 : 4,
};
// adressage littéral par notation pointée :
objet.prop2;        // => 'b'
// adressage littéral par crochets :
objet['prop2'];     // => 'b'
// adressage symbolique par crochets :
var cle = 'prop2';
objet[cle];         // => 'b'

La notation pointée est plus concise et lisible, mais impose de mentionner la clé « en dur » (littéralement) dans le code :

Sélectionnez

1.
2.
3.
4.
5.

// adressage littéral, avec notation pointée :
objet.prop2; // => 'b'
// adressage symbolique, impossible avec notation pointée :
var cle = 'prop2';
objet.cle;   // => undefined, car il n'y a pas de propriété appelée 'cle' dans l'objet

VI-A-3. Modification de propriétés▲

La modification d'une propriété d'objet fonctionne similairement à la modification d'un élément de tableau : il suffit d'effectuer une affectation après avoir adressé la valeur à modifier.

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.

var tableau = ['a', 'b', 4];
tableau[1] = 3; // => tableau = ['a', 3, 4]
var objet = {
  prop1 : 'a',
  prop2 : 'b',
  prop3 : 4,
};
objet.prop2 = 3; // => objet : { prop1 : 'a', prop2 : 3, prop3 : 4 }

Il est bien sûr possible d'utiliser indifféremment l'adressage par notation pointée ou par crochets, pour une affectation.

VI-A-4. Clés riches▲

Contrairement aux restrictions imposées pour nommer les variables en JavaScript, il est possible d'inclure des espaces et des caractères spéciaux dans les noms de propriétés.

Par contre, il faut dans ce cas utiliser des apostrophes (ou guillemets) pour définir et adresser ces propriétés :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.

var mesAmis = {
  'Luke Skywalker' : true,
  'Dark Vador' : false,
};
mesAmis.LukeSkywalker;     // => undefined
mesAmis.Luke Skywalker;    // => /!\ syntax error
mesAmis['Luke Skywalker']; // => true

VI-A-5. Notes sur les types▲

Comme pour les tableaux, la valeur d'une propriété d'objet peut être de n'importe quel type : string, number, boolean, null, undefined, object ou function.

À noter que, comme les objets, les tableaux sont aussi de type object.

Sélectionnez

1.
2.

typeof { prop : 'a' };  // => "object"
typeof [ 'a', 3, 4 ];  // => "object"

Mais les tableaux ont des caractéristiques particulières que n'ont pas les objets. Notamment l'indexation numérique, des fonctions spécifiques comme slice, etc.

VI-A-6. Mise en pratique : annuaire téléphonique▲

But : développer un programme qui permet d'afficher le numéro de téléphone d'un ami (à l'aide de alert) dont le nom a été saisi par l'utilisateur (à l'aide de prompt).

Afin que l'annuaire soit extensible à l'avenir, aucune condition if ne doit être utilisée. Nous allons donc stocker les noms et numéros de téléphone dans un objet, et utiliser l'adressage par crochets pour trouver un numéro à partir d'un nom.

Sélectionnez

1.
2.
3.
4.

var annuaire = {
  patricia : '06 66 66 66 66',
  david : '07 77 77 77 77',
};

Afficher dans la console le numéro de téléphone de patricia, en utilisant la notation pointée sur l'objet annuaire;
Demander à l'utilisateur de saisir un prénom, puis afficher le numéro de téléphone associé à ce prénom.

Solution

Cacher/Afficher le codeSélectionnez

var annuaire = {
  patricia: '06 66 66 66 66',
  david: '07 77 77 77 77',
};
// 1. Afficher dans la console le numéro de téléphone de `patricia`, en utilisant la notation pointée sur l'objet `annuaire`;
console.log(annuaire.patricia);
// 2. Demander à l'utilisateur de saisir un prénom, puis afficher le numéro de téléphone associé à ce prénom.
var nom = prompt('donner le nom d\'un ami');
alert('numéro de téléphone de ' + nom + ': ' + annuaire[nom]);

VI-B. Objets, usage avancé▲

VI-B-1. Hiérarchie d'objets▲

Comme il est possible de stocker un objet comme valeur d'une propriété d'objet, cela veut dire que nous pouvons définir des hiérarchies / arbres d'objets.

Exemple :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

var compteFacebook = {
  amis : {
    'Luke Skywalker' : true,
    'Dark Vador' : false,
  },
  groupes : {
    maitresJedi : {
      titre : 'Groupe des maîtres Jedi',
      membres : [ 'Yoda', 'Obi Wan' ],
    },
    lolcats : {
      titre : 'Vive les chats !',
      membres : [ 'Patrick' ],
    },
  },
};

Dans l'exemple ci-dessus, nous avons jusqu'à trois niveaux d'imbrication d'objets (voire quatre, si on compte les tableaux comme des objets) : l'objet compteFacebook contient une propriété groupes (de type objet) contenant une propriété maitresJedi (aussi de type objet) contenant deux propriétés (de type chaine de caractères et tableau).

Cet objet peut être représenté visuellement sous forme d'un arbre.

Pour accéder au premier élément du tableau membres de la sous-propriété maitresJedi, on doit écrire le cheminement à suivre, de propriété à sous-propriétés.

Exemple :

Sélectionnez

1.
2.
3.
4.

// adressage par notation pointée :
compteFacebook.groupes.maitresJedi.membres[0]; // => 'Yoda'
// adressage par crochets :
compteFacebook['groupes']['maitresJedi']['membres'][0]; // (idem)

Dans cet exemple aussi, on peut utiliser indifféremment la notation pointée ou les crochets, pour accéder à la propriété d'un objet.

VI-B-2. Énumérer les propriétés d'un objet▲

Il existe deux manières d'énumérer les propriétés d'un objet :

Utiliser une boucle for-in ;
Itérer sur le tableau des clés de l'objet, à l'aide de la fonction Object.keys().

Une boucle for-in s'utilise de cette façon :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

var mesAmis = {
  'Luke Skywalker' : true,
  'Dark Vador' : false,
};
for (var cle in mesAmis) {
  console.log(cle, '->', mesAmis[cle]);
}
// => lignes affichées dans la console :
//    Luke Skywalker -> true
//    Dark Vador -> false

Contrairement à une boucle for classique (dans laquelle on définit une instruction d'initialisation, une expression conditionnelle et une instruction d'incrémentation, séparés par des points-virgules, pour rappel), la boucle for-in va répéter la liste d'instructions entre accolades pour chaque clé de l'objet.

Dans notre exemple de code ci-dessus, la variable cle prendra donc la valeur d'une clé de l'objet mesAmis, pour chacune de ses propriétés.

À noter que cela fonctionne aussi sur les tableaux, sauf que l'indice de chaque élément du tableau sera fourni (au lieu de la clé de chaque propriété de l'objet).

VI-B-3. Énumérer les propriétés d'un objet, une autre manière▲

Lorsqu'elle est appelée en passant un objet en paramètre, la fonction Object.keys() retourne un tableau contenant les clés/noms de chaque propriété de cet objet.

Sélectionnez

1.
2.
3.
4.
5.

var mesAmis = {
  'Luke Skywalker' : true,
  'Dark Vador' : false,
};
var cles = Object.keys(mesAmis); // => [ 'Luke Skywalker', 'Dark Vador' ]

On peut alors utiliser une boucle for plus classique pour itérer sur les valeurs de ce tableau :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.

for (var i = 0; i < cles.length; i++) {
  var cle = cles[i];
  console.log(i, ' :', cle, '->', mesAmis[cle]);
}
// => lignes affichées dans la console :
//    0, Luke Skywalker -> true
//    1, Dark Vador -> false

VI-B-4. Suppression d'une propriété▲

Pour supprimer une propriété d'un objet, il faut utiliser le mot-clé delete de la manière suivante :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.

var objet = {
  prop1 : 'a',
  prop2 : 'b',
  prop3 : 4,
};
delete objet.prop2;
// => objet === { prop1 : 'a', prop3 : 4 }

VI-B-5. Exercice : Répertoire téléphonique▲

Sur la base de l'annuaire téléphonique réalisé plus haut, développer un programme qui propose les fonctionnalités suivantes :

recherche et affichage d'un numéro de téléphone en saisissant un nom ;
liste des contacts de l'annuaire (nom + numéro de téléphone, à afficher dans la console à l'aide d'une boucle for..in) ;
ajout d'un contact (nom + numéro de téléphone) dans l'annuaire ;
suppression d'un contact.

Pour permettre à l'utilisateur de choisir la fonctionnalité qu'il souhaite utiliser, lui demander de saisir la première lettre de la fonction :

'r' pour rechercher,
'l' pour afficher la liste,
'a' pour ajouter,
et 's' pour supprimer.

Afin que l'utilisateur puisse utiliser plusieurs fonctionnalités d'affilée, placer le code du programme dans une boucle qui ne s'arrêtera que lorsque l'utilisateur aura tapé q au lieu de choisir une fonctionnalité.

Solution

Cacher/Afficher le codeSélectionnez

var repertoire = {
  'luke' : '0666666666',
  'yoda' : '0688888888',
};
// non demandé dans l'énoncé, juste pour vérifier le bon fonctionnement dans la console:
console.log('[debug] repertoire:', repertoire);
// l'utilisateur peut effectuer plusieurs opération, jusqu'à ce qu'il presse `q`
for (var choix; choix != 'q';) {
  choix = prompt('fonction: (r)echerche, (l)iste, (a)jout, (s)uppression, ou (q)uitter ?');
  if (choix === 'r') {
    var nom = prompt('donner le nom d\'un ami');
    alert('numéro associé: ' + repertoire[nom]);
  } else if (choix === 'l') {
    for (var nom in repertoire) {
      console.log(nom, ':', repertoire[nom]);
    }
  } else if (choix === 'a') {
    var nom = prompt('donner le nom de l\'ami à ajouter');
    var num = prompt('donner son numéro de téléphone');
    repertoire[nom] = num;
  } else if (choix === 's') {
    var nom = prompt('donner le nom de l\'ami à supprimer du répertoire');
    delete repertoire[nom];
  }
  // non demandé dans l'énoncé, juste pour vérifier le bon fonctionnement dans la console:
  console.log('[debug] repertoire:', repertoire);
}

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Adrien Joly. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.