Les objets et les tableaux – Premier site en local sur wordpress

Le JavaScript met à notre disposition des objets natifs, c’est-à-dire des objets directement utilisables. Vous avez déjà manipulé de tels objets sans le savoir : un nombre, une chaîne de caractères ou même un booléen.

Que contiennent les objets ?

Les objets contiennent trois choses distinctes :

un constructeur ;
des propriétés ;
des méthodes.

Les propriétés

Toute valeur va être placée dans une variable au sein de l’objet : c’est ce que l’on appelle une propriété. Une propriété est une variable contenue dans l’objet, elle contient des informations nécessaires au fonctionnement de l’objet.

Les méthodes

Enfin, il est possible de modifier l’objet. Cela se fait par l’intermédiaire des méthodes. Les méthodes sont des fonctions contenues dans l’objet, et qui permettent de réaliser des opérations sur le contenu de l’objet. Par exemple, dans le cas d’une chaîne de caractères, il existe une méthode qui permet de mettre la chaîne de caractères en majuscules.

Exemple d’utilisation

Ici on attribue a la variable stagiaire01 les propriétés: prenom et nom auxquelles on attribue une valeur.

var stagiaire01 = {prenom:"truc",nom:"muche"};

Affiche muche 45 ans

Affiche le prénom, le nom et l’age renseignés:

Méthode:

(La fonction est la méthode).

Afficher l’identité et le lieu renseigner.

Affiche l’identité d’un stagiaire et l’ajoute dans la cible:

Nous allons créer une chaîne de caractères, pour ensuite afficher son nombre de caractères et la transformer en majuscules. Soit la mise en pratique de la partie théorique que nous venons de voir.

var myString = 'Ceci est une chaîne de caractères'; // On crée un objet String

alert(myString.length); // On affiche le nombre de caractères, au moyen de la propriété « length »

alert(myString.toUpperCase()); // On récupère la chaîne en majuscules, avec la méthode toUpperCase()

On remarque la présence d’un point. Ce dernier permet d’accéder aux propriétés et aux méthodes d’un objet. Ainsi, quand nous écrivons myString.length, nous demandons au JavaScript de fournir le nombre de caractères contenus dans myString.

Avec myString.toUpperCase(), je demande au JavaScript de changer la casse de la chaîne, ici, tout mettre en majuscules. À l’inverse, la méthode toLowerCase()permet de tout mettre en minuscules.

Nous en avons déjà rencontré trois :

Number: l’objet qui gère les nombres ;
Boolean: l’objet qui gère les booléens ;
String: l’objet qui gère les chaînes de caractères.

Les tableaux (l’objetArray)

Un tableau, ou plutôt un array en anglais, est une variable qui contient plusieurs valeurs, appelées items. Chaque item est accessible au moyen d’un indice (index en anglais) et dont la numérotation commence à partir de 0. Voici un schéma représentant un tableau, qui stocke cinq items :

Indice	0	1	2	3	4
Donnée	Valeur 1	Valeur 2	Valeur 3	Valeur 4	Valeur 5

Déclarer un tableau

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

L’index numéro0contient « Sébastien », tandis que le2contient « Ludovic ».

aussi:

var myArray_a = [42, 12, 6, 3];
var myArray_b = [42, 'Sébastien', 12, 'Laurence'];

Récupérer et modifier des valeurs

Pour récupérer la valeur de l’index 1 de mon tableau ?Il suffit de spécifier l’index voulu, entre crochets :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

myArray[1] = 'Clarisse';

alert(myArray[1]); // Affiche : « Clarisse »

Notre exemple :

Idem mais avec une fonction:

Additionner le total d’un tableau:

Calculer la moyen:

Opérations sur les tableaux

Ajouter et supprimer des items

La méthode push()permet d’ajouter un ou plusieurs items à un tableau :

var myArray = ['Sébastien', 'Laurence'];

myArray.push('Ludovic'); // Ajoute « Ludovic » à la fin du tableau
myArray.push('Pauline', 'Guillaume'); // Ajoute « Pauline » et « Guillaume » à la fin du tableau

push()peut recevoir un nombre illimité de paramètres, et chaque paramètre représente un item à ajouter à la fin du tableau.

La méthode unshift()fonctionne comme push(), excepté que les items sont ajoutés au début du tableau. Cette méthode n’est pas très fréquente mais peut être utile.

Les méthodes shift()et pop()retirent respectivement le premier et le dernier élément du tableau:

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

myArray.shift(); // Retire « Sébastien »
myArray.pop(); // Retire « Guillaume »

alert(myArray); // Affiche « Laurence,Ludovic,Pauline »

Chaînes de caractères et tableaux

var cousinsString = 'Pauline Guillaume Clarisse',
cousinsArray = cousinsString.split(' ');

alert(cousinsString);
alert(cousinsArray);

La méthode split()va couper la chaîne de caractères à chaque fois qu'elle va rencontrer une espace. Les portions ainsi découpées sont placées dans un tableau, ici cousinsArray.

L’inverse de split(), c’est-à-dire créer une chaîne de caractères depuis un tableau, se nomme join():

var cousinsString_2 = cousinsArray.join('-');

alert(cousinsString_2);

Parcourir un tableau

Parcourir avec `for`

Le nombre d’items d’un tableau se récupère avec la propriété length, exactement comme pour le nombre de caractères d’une chaîne de caractères. À chaque itération, on va avancer d’un item dans le tableau, en utilisant la variable de boucle i: à chaque itération, elle s’incrémente, ce qui permet d’avancer dans le tableau item par item. Voici un exemple :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

for (var i = 0; i < myArray.length; i++) {

alert(myArray[i]);

}

On commence par définir la variable de boucle i. Ensuite, on règle la condition pour que la boucle s’exécute tant que l’on n’a pas atteint le nombre d’items. myArray.length représente le nombre d’items du tableau, c’est-à-dire cinq, à chaque itération, on incrémente.

Les objets littéraux

S’il est possible d’accéder aux items d’un tableau via leur indice, il peut être pratique d’y accéder au moyen d’un identifiant.

Par exemple

var family = {
self: 'Sébastien',
sister: 'Laurence',
brother: 'Ludovic',
cousin_1: 'Pauline',
cousin_2: 'Guillaume'
};

Identifiant	self	sister	brother	cousin_1	cousin_2
Donnée	Sébastien	Laurence	Ludovic	Pauline	Guillaume

La syntaxe d’un objet

Pour définir dès l’initialisation les items à ajouter à l’objet, il suffit d’écrire :

var myObject = {
item1: 'Texte 1',
item2: 'Texte 2'
};

Accès aux items

Revenons à notre objet littéral : ce que nous avons créé est un objet, et les identifiants sont en réalité des propriétés, exactement comme la propriété length d’un tableau ou d’une chaîne de caractères. Donc, pour récupérer le nom de la sœur, il suffit de faire :

family.sister;

family['sister'];

Exemple :

var id = 'sister';

alert(family[id]); // Affiche : « Laurence »

Ajouter des items

il est possible d’ajouter un item en spécifiant un identifiant qui n’est pas encore présent. Par exemple, si nous voulons ajouter un oncle dans le tableau :

family['uncle'] = 'Didier'; // « Didier » est ajouté et est accessible via l'identifiant « uncle »

ou

family.uncle = 'Didier'; // Même opération mais d'une autre manière

Parcourir un objet avecfor in

Il n’est pas possible de parcourir un objet littéral avec une bouclefor. Normal, puisqu’une boucleforest surtout capable d’incrémenter une variable numérique, ce qui ne nous est d’aucune utilité dans le cas d’un objet littéral puisque nous devons posséder un identifiant. En revanche, la boucle for in se révèle très intéressante !

La boucle for in est l’équivalent de la boucle foreach du PHP : elle est très simple et ne sert qu’à une seule chose : parcourir un objet.

Le fonctionnement est quasiment le même que pour un tableau, excepté qu’ici il suffit de fournir une « variable clé » qui reçoit un identifiant (au lieu d’un index) et de spécifier l’objet à parcourir :

var family = {
    self:     'Sébastien',
    sister:   'Laurence',
    brother:  'Ludovic',
    cousin_1: 'Pauline',
    cousin_2: 'Guillaume'
};

for (var id in family) { // On stocke l'identifiant dans "id" pour parcourir l'objet "family".
	
    alert(family[id]);
		
}

Parcourir un objet avec `for in`

Il n’est pas possible de parcourir un objet littéral avec une boucle for. Normal, puisqu’une boucle for est surtout capable d’incrémenter une variable numérique, ce qui ne nous est d’aucune utilité dans le cas d’un objet littéral puisque nous devons posséder un identifiant. En revanche, la boucle for in se révèle très intéressante !

La boucle for in est l’équivalent de la boucle foreach du PHP : elle est très simple et ne sert qu’à une seule chose : parcourir un objet.

var family = {
    self:     'Sébastien',
    sister:   'Laurence',
    brother:  'Ludovic',
    cousin_1: 'Pauline',
    cousin_2: 'Guillaume'
};

for (var id in family) { // On stocke l'identifiant dans "id" pour parcourir l'objet "family".
	
    alert(family[id]);
		
}

Utilisation des objets littéraux

Les objets littéraux ne sont pas souvent utilisés mais peuvent se révéler très utiles pour ordonner un code. On les utilise aussi dans les fonctions : les fonctions, avec return, ne savent retourner qu’une seule variable. Si on veut retourner plusieurs variables, il faut les placer dans un tableau et retourner ce dernier. Mais il est plus commode d’utiliser un objet littéral.

L’exemple classique est la fonction qui calcule des coordonnées d’un élément HTML sur une page Web. Il faut ici retourner les coordonnées x et y.

function getCoords() {
/* Script incomplet, juste pour l'exemple */

return {
x: 12,
y: 21
};
}

var coords = getCoords();

alert(coords.x); // 12
alert(coords.y); // 21

Exercices: