---

Retour d'un niveau
Retour à l'accueil

---

array
C'est un constructeur pour tableaux qui sont des objets de hauts niveaux et qui sont semblables à des listes.

element0, element1, …,
Un tableau est initialisé avec les éléments donnés.

Les tableaux sont des objets semblables à une liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modifications. Ni la taille d'un tableau ni les types de ses éléments n'est fixé.

Les indices
Comme vous le voyez dans le tableau, la numérotation des items commence à 0 ! C'est très important, car il y aura toujours un décalage d'une unité : l'item numéro 1 porte l'indice 0, et donc le cinquième item porte l'indice 4. Vous devrez donc faire très attention à ne pas vous emmêler les pinceaux, et à toujours garder cela en tête, sinon ça vous posera problème.

Déclarer un tableau
On utilise bien évidemment var pour déclarer un tableau, mais la syntaxe pour définir les valeurs est spécifique :

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

Le contenu du tableau se définit entre crochets, et chaque valeur est séparée par une virgule. Les valeurs sont introduites comme pour des variables simples, c'est-à-dire qu'il faut des guillemets ou des apostrophes pour définir les chaînes de caractères :

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

On peut schématiser le contenu du tableau myArray ainsi :

L'index numéro 0 contient « Sébastien », tandis que le 2 contient « Ludovic ».

La déclaration par le biais de crochets est la syntaxe courte. Il se peut que vous rencontriez un jour une syntaxe plus longue qui est vouée à disparaître.
Voici à quoi ressemble cette syntaxe :

var myArray = new Array('Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume', 'Marc');

Le mot-clé new de cette syntaxe demande au JavaScript de définir un nouvel array dont le contenu se trouve en paramètre (un peu comme une fonction). Vous verrez l'utilisation de ce mot-clé plus tard. En attendant il faut que vous sachiez que cette syntaxe est dépréciée et qu'il est conseillé d'utiliser celle avec les crochets.

Récupérer et modifier des valeurs
Comment faire pour récupérer la valeur de l'index 1 de mon tableau ?
Rien de plus simple, il suffit de spécifier l'index voulu, entre crochets, comme ceci :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume', 'Marc'];
 
alert(myArray[1]); // Affiche : « Laurence »

Sachant cela, il est facile de modifier le contenu d'un item du tableau :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume', 'Marc'];
 
myArray[1] = 'Clarisse';
 
alert(myArray[1]); // Affiche : « Clarisse »

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

Comme dit dans la partie théorique sur les objets, les méthodes sont des fonctions, et peuvent donc recevoir des paramètres. Ici, 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', 'Marc'];
 
myArray.shift(); // Retire « Sébastien »
myArray.pop(); // Retire « Guillaume »
 
alert(myArray); // Affiche « Laurence,Ludovic,Pauline »

Chaînes de caractères et tableaux
Les chaînes de caractères possèdent une méthode split() qui permet de les découper en un tableau, en fonction d'un séparateur.
Prenons l'exemple suivant :

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
Soyez attentifs, il s'agit ici d'un gros morceau ! Parcourir un tableau est quelque chose que vous allez faire très fréquemment en JavaScript, surtout plus tard, quand nous verrons comment interagir avec les éléments HTML.

Dans le chapitre sur les boucles nous avons étudié la boucle for. Celle-ci va nous servir à parcourir les tableaux. La boucle while peut aussi être utilisée, mais for est la plus adaptée pour cela. Nous allons voir aussi une variante de for : la boucle for in.

Parcourir avec for
Reprenons le tableau avec les prénoms :

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

Le principe pour parcourir un tableau est simple : il faut faire autant d'itérations qu'il y a d'items. 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 :

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.

Attention à la condition
Nous avons volontairement mal rédigé le code précédent. En effet, dans le chapitre sur les boucles, nous avons dit que le deuxième bloc d'une boucle for, le bloc de condition, était exécuté à chaque itération. Ici ça veut donc dire que myArray.length est utilisé à chaque itération, ce qui, à part ralentir la boucle, n'a que peu d'intérêt puisque le nombre d'items du tableau ne change normalement pas (dans le cas contraire, n'utilisez pas la solution qui suit).

L'astuce est de définir une seconde variable, dans le bloc d'initialisation, qui contiendra la valeur de length. On utilisera cette variable pour la condition :

for (var i = 0, c = myArray.length; i < c; i++) {
    alert(myArray[i]);
}

Nous utilisons c comme nom de variable, qui signifie count (compter), mais vous pouvez utiliser ce que vous voulez.

Tableau dans un tableau

var monTableau = [
                  'zero',    // indice [0] 
                  'un',      // indice [1] 
                  'deux',    // indice [2] 
                  'trois',   // indice [6] 
                  'quatre',  // indice [4] 
                  'cinq',    // indice [5] 
                  ['rouge',  // indice [6][0]
                   'bleu',   // indice [6][1]
                   'vert']   // indice [6][2]
                  ];

On ne sait faire que des tableaux indexés en JavaScript, pour des tableaux associatifs il faut passer par autre chose.

---

Retour d'un niveau
Retour à l'accueil