JavaScript/Les tableaux

Une page de Wikiversité.

Les Tableaux

Chapitre 4
Leçon : JavaScript
Chap. préc. :	Structures de contrôle
Chap. suiv. :	Boîtes de dialogues

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Les Tableaux
JavaScript/Les tableaux », n'a pu être restituée correctement ci-dessus.

Les tableaux (array en anglais) sont des tableurs virtuels où peuvent être stockées des centaines d'informations à la fois. À la base, un tableau n'est qu'une simple variable. Il existe deux sortes de tableaux :

• les tableaux à indices numériques ;
• les tableaux associatifs.

Les valeurs d'un tableau peuvent être de tout type (booléen, nombre, chaîne de caractères, array...). JavaScript propose l'objet Array avec plusieurs méthodes permettant de manipuler les tableaux sans problème.

[modifier] Tableaux à indices numériques

Ce sont des tableaux où chaque valeur est associée à un indice (nombre entier positif).

[modifier] Déclaration

Voici comment déclarer un tableau à indices numériques en JavaScript et lui donner des valeurs initiales :

var mon_tableau = new Array('Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine'); // première méthode
var mon_tableau = ['Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine']; // seconde méthode

[modifier] Accès aux valeurs

Pour accéder aux valeurs d'un tableau à indices numériques, la seule possibilité est de passer par l'indice de chacune des valeurs contenues dans ce tableau. La numérotation des indices commence par 0 (zéro).

document.write(mon_tableau[0]); // Affiche "Christophe"
document.write(mon_tableau[4]); // Affiche "Nicolas"

[modifier] Listage des valeurs

Pour lister l'intégralité du tableau, il nous faut utiliser une boucle. Il va nous être utile de connaître la "longueur" du tableau (le nombre d'indice qu'il possède). Pour cela, on fait appel à la méthode length de l'objet Array. Ainsi, on accède aux valeurs de notre tableau grâce à ses indices comme ceci :

for (i = 0; i <= mon_tableau.length-1; i++)
{
  document.write(i+" => "+mon_tableau[i]); // On affiche chaque couples indice => valeur
}

[modifier] Affection de valeurs

Pour remplir un tableau avec une seule valeur (13 par exemple), on utilise une boucle.

var a = 13;
var long_tableau = 10;
var mon_tableau = new Array();
 
for (i = 0; i <= long_tableau; i++)
{
  mon_tableau[i] = a;
}

Il existe des tableaux de tableaux de tableau... (ce sont des tableaux multidimensionnels). Ainsi, ceci est tout à fait faisable :

var mon_tableau = new Array('Christophe', new Array('Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine'));
document.write(mon_tableau[1][0]); // Affiche "Sarah"

[modifier] Des outils pratiques

Même si nous n'avons pas encore vu comment marchaient les fonctions en JavaScript; il est à savoir que celui-ci met à disposition des fonctions pour la gestion des tableaux. En voici la liste des principale :

• concat (Tableau1, Tableau2[, Tableau3, ...]) : cette méthode permet de concaténer (coller) plusieurs tableaux pour n'en former plus qu'un seul.
• join (Tableau) ou Tableau.join() : cette méthode renvoie tous les éléments (valeurs) de Tableau sous forme d'une chaîne de caractères.
• Tableau.push (valeur1[, valeur2, ...]) : cette méthode permet d'ajouter des éléments à la fin de Tableau.
• Tableau.unshift (valeur1[, valeur2, ...]) : cette méthode permet d'ajouter des éléments au début de Tableau.
• pop (Tableau) ou Tableau.pop() : cette méthode supprime le dernier élément de Tableau après avoir retourné sa valeur.
• Tableau.reverse() : cette méthode inverse l'ordre des éléments de Tableau.
• Tableau.sort() : cette méthode permet de trier tous les éléments de Tableau.
• Tableau.splice() : cette méthode ajoute ou retire des éléments dans Tableau.

[modifier] Objets

Les objets, omniprésents dans le JavaScript, peuvent être créés afin d'obtenir l'équivalent d'un tableau associatif, c'est à dire lorsque chacune de ses valeurs est associée à un nom.

[modifier] Déclaration

Pour créer un objet, on peut utiliser les deux syntaxes :

var mon_objet = new Object();
 
// ou :
 
var mon_objet = {};

Pour attacher le nom à sa valeur, on utilise le signe mathématique égal comme ceci :

mon_objet['prenom_0'] = 'Christophe';
mon_objet['prenom_1'] = 'Sarah';
mon_objet['prenom_2'] = 'Carole';
mon_objet['prenom_3'] = 'Alex';
mon_objet['prenom_4'] = 'Nicolas';
mon_objet['prenom_5'] = 'Sandrine';

Ou on peut les attacher à la création de l'objet :

var mon object = {
	"prenom_0": 'Christophe',
	'prenom_1': 'Sarah',
	prenom_2: 'Carole
};

[modifier] Accès aux valeurs

Comme précédemment sauf qu'on utilise le nom associé à la variable au lieu de son indice :

document.write(mon_objet['prenom_3']); // Affiche "Alex"
 
// Ou bien, si la clé respecte la règle concernant la nomination des variables :
document.write(mon_objet.prenom_1); // Affiche "Sarah"

[modifier] Listage des valeurs

Pour lister les valeurs de l'objet mon_objet ci-dessus, on procède ainsi :

for (var nom_indice in mon_object){
	document.write(mon_object[nom_indice]);
}

En effet, la boucle for(...in...) attribue à la variable nom_indice le nom de l'indice et passe au suivant à chaque itération. Il est à noter que cette méthode permet aussi de lister les noms d'indices si nécessaire.

[modifier] Affectation de valeurs

Soit directement en utilisant le nom de l'indice:

mon_objet['prenom_3'] = "Alex"
 
// Ou comme précédemment :
mon_objet.prenom_3 = "Alex"

Soit via la boucle for(...in...) (ici remise à 0 de toutes les valeurs de l'objet)

for (var nom_indice in mon_objet){
	mon_objet[nom_indice] = 0;
}

À présent, vous en savez assez sur la tableaux en JavaScript pour pouvoir continuer le cours tranquillement.

JavaScript

Structures de contrôle

Boîtes de dialogues