Introduction aux tableaux (Array)

· Niveau : INTERMÉDIAIRE
· Compatibilité : Navigateur 4+

Un tableau ou "Array" est un objet ou structure qui permet de garder, manipuler et ordonner une collection de données. En plus de pouvoir accéder individuellement aux données plusieurs méthodes permettent aussi de trier, "concater", joindre, extraire, inverser, convertir un tableau. Les nombreux avantages sont quasiment indispensables, je ne connais pas un programmeur ni de programme qui puisse se passer des tableaux.

Des tableaux partout
Pour vous mettre au parfum, sachez que la plupart des objets, de la "programmation orientée-objet" comme le Javascript, sont construits sur le principe des tableaux. Vous avez probablement déjà manipuler un tableau, que ce soit les éléments d’un formulaire, les liens de l’objet "history" ou tous autres "objets" de l’architecture d’un document HTML. ATTENTION, nous ne parlons pas ici d’un tableau ou "table" HTML bien qu’un tableau soit une liste de lignes avec un nombre x de colonnes, exactement comme une feuille de chiffrier Excel par exemple.

Structure de données
Avant de pouvoir créer et utiliser un tableau il faut savoir qu’il est constituer de données classées par un "index" numérique. Chacune des données ayant une position x dans le tableau. Ce nombre est très important car il est la seule référence pour accéder aux données. Une donnée à son numéro ou index qui lui est propre et UNIQUE. Donc, les données se suivent par ordre croissant de l’Index" numérique. L’index numérique commence toujours à zéro.

Basé à zéro (attention)
Un index basé à zéro. L’erreur la plus fréquente est d’oublier ce petit détail qui fait en sorte que la première donnée (index = 0) soit perdue. Perdre une donnée est une chose mais imaginer faire une boucle sur le tableau de 1 à longueur du tableau ( length ), lorsque la boucle arrivera au dernier, l’index sera dépassé de 1 ce qui entraînera inévitablement une erreur d’exécution. Donc le plus important à ce stade-ci est de bien saisir l’ordre des données et l’index basé à zéro, soit:

monTableau[0]
monTableau[1]
monTableau[2]
monTableau[3]

Ce tableau est de longueur 4 bien que l’index se termine à 3. Noter les crochets qui indiquent le numéro de l’index, ces crochets obligatoires indique au moteur Javascript qu’il a affaire à un tableau. Vous ne pourrez jamais afficher une donnée du tableau sans donner l’index entre crochets.

Exemple de création

var aVilles = ["Montréal", "Paris", "New York"]; 
var aVilles = new Array("Montréal", "Paris", "New York");
alert(aVilles[1]);          // Récupérer la deuxième ville
aVilles[0] = "Rimouski";    // Changer la valeur

Créer un tableau et la propriété " length "
Contrairement à plusieurs langages de programmation, un tableau Javascript est entièrement dynamique, vous pouvez à tout moment ajouter une donnée. Il existe plusieurs techniques pour créer un tableau.

// Création d’un objet Array
monTableau = new Array();

// Création d’un objet Array et réserver le nombre de données du tableau
monTableau = new Array (NombreDeDonnées);

// Création d’un objet Array en spécifiant les données
// Noter que les caractères doivent être entre guillemets
monTableau = new Array(Données0, Données1, ..., DonnéesN);

Créer un tableau et réserver l’espace qu’occupera les données.

monTableau = new Array(7);
document.write(monTableau.length); // Résultat = 7

monTableau, vide pour l’instant, est prêt à recevoir 7 données (de 0 à 6). La propriété " length " s’ajuste toujours à la quantité de données du tableau. Cette propriété utilisée en exemple ici est utile pour connaître le nombre de données ou encore pour faire une boucle de toutes les données d’un tableau.

Entrer les données dans le tableau
Si je reprends l’exemple précédent, je peux ajouter manuellement les données. Je vais ajouter les 7 jours de la semaine. Vous verrez très bien que le tableau contient 7 données bien que le dernier index soit 6.

Ajoutons une donnée, la propriété " length " augmentera de 1.

Récupérer les données de notre tableau
Récupérer les données est un jeu d’enfant, il suffit de spécifier l’index et le tour est joué. Vous pouvez aussi utiliser la propriété " length " du tableau créé pour afficher toutes les données dans une boucle de programmation ou encore utiliser la méthode join() qui extrait toutes les données dans une chaîne de caractères en séparent les données par un délimitateur.

<html>
<script type="text/javascript" language="javascript">

</script>
</html>

Deuxième technique de créer un tableau
Vous pouvez créer un tableau en passant en paramètre une chaîne de données séparées par des virgules.

Encore plus simple, rappelez-vous que les crochets indiquent qu’il s’agit d’un tableau, alors, en spécifiant la chaîne entre crochets, vous n’avez même pas à créer un tableau, le brillant moteur Javascript saura quoi faire.

Plus compacte, cette technique dite "dense array" est très pratique, si vous avez par exemple une chaîne de mots dynamique qui contient un nombre x de mots séparé par un délimitateur commun. Vous pouvez la transférer dans un tableau avec la méthode "string.split" pour ensuite connaître le nombre de mots ou encore accéder a un mot spécifique.

Méthodes et propriétés
En sachant comment intégrer des données dans un tableau et comment les récupérer vous avez en main un des plus puissants outils de programmation. Avec cette base vous pouvez faire pratiquement n’importe quoi. Mais le Javascript nous simplifie encore plus la tâche avec les méthodes. Les méthodes peuvent manipuler un tableau en quelques mots. Voici la liste des méthodes et des propriétés de l’objet Array, cliquez sur une méthode ou une propriété pour en savoir d’avantage.

Méthodes
Array	concat() (push)
join() (toString)	pop()
reverse()	shift()
slice()	sort()
splice()	toSource
unshift()	valueOf()
Propriétés
length	prototype

Exemples

aVilles.toString(); // conversion en une chaine de caractère : résultat "Montréal,Paris,New York"
aVilles.join(" * "); // Joindre: "Montréal * Paris * New York"
aVilles.pop(); // supprimer un élément
aVilles.push("Rimouski"); // ajouter un nouvel élément
aVilles[aVilles.length] = "Rimouski"; // ajouter un nouvel élément, comme « push »
aVilles.shift(); // supprimer le premier élément
aVilles.unshift("Rimouski"); // ajouter un nouvel élément au début
delete aVilles[0]; // changer l’élément pour indéfini (non recommandé)
aVilles.splice(2, 0, "Le Bic", "Rivière-du-Loup"); // ajouter un élément (où, combien en enlever, liste d’éléments)
var aTout = aVilles.concat(aPays,aContinents); // joindre deux matrices (aVilles suivit par pays et continents)
aVilles.slice(1,4); // éléments de [1] à [4-1]
aVilles.sort(); // tri alphabétique
aVilles.reverse(); // tri alphabétique descendant
x.sort(function(a, b){return a - b}); // tri numérique
x.sort(function(a, b){return b - a}); // tri numérique descendant
plusgrand = x[0]; // le premier élément de la matrice trié est la valeur la plus basse (ou la plus élevée)
x.sort(function(a, b){return 0.5 - Math.random(}); // ordre aléatoire