Javascript : Les tableaux et les structures de données

Un des avantages de tous les langages de programmation est la capacité de créer des index, d’ordonner une liste d’élément dans le but de l’utiliser, la trier, la manipuler ou l’afficher. Cette fonctionnalité d’indexer une liste s’appelle un Array. Le langage JavaScript met à notre disposition deux types de tableaux : itératif ou associatif. Nous allons voir comment les utiliser et pourquoi. Les tableaux peuvent contenir des données de n’importe quelle type, d’autres tableaux, des entiers, des chaînes de caractère, etc. L’indice premier d’un élément est 0. Bon trêve de plaisanterie, maintenant que nous avons fait un petit tour d’horizon passons aux choses sérieuses.

Les Objects

Voici la structure de base pour déclarer une structure de donnée.

var unObjet = {}; // Un objet vide
var un Objet2 = new Object(); // Un objet vide également

Cette structure est considéré comme un tableau associatif, on peut venir associer des données à autre chose qu’un indice entier croissant. Par exemple on va écrire un objet calcul qui nous permettra d’effectuer les opérations basiques.

var Calcul = {
     add : function(a, b) { return a + b; },
     sub : function(a, b) { return a - b; },
     mul : function(a, b) { return a * b; },
     div : function(a, b) { return a / b; }
};
Calcul.add(3, 2); // Affiche 5
Calcul['sub'](3, 2); // Affiche 1
// etc ...

Comme vous pouvez le voir, on peut appeler les méthodes de cette objet de différentes manières.  En Javascript, tout est considéré comme un objet. Les tableaux, les chaines de caractère, les fonctions et même les nombre. Je reviendrai dans un autre article sur la programmation Objet en Javascript, pour le moment, je vais vous parler de l’objet natif Array.

Les Array

Les tableaux de type Array (non associatif) se déclare de la manière suivante en Javascript :

var unTableau = []; // Un raccourci pour var unTableau = new Array();
unTableau[0] = "Un chiffre 0";
unTableau[1] = "Un chiffre 1";
// équivalent à
var unAutreTableau = ["Un chiffre 0", "Un chiffre 1"];
// équivalent à
var encoreUnAutreTableau = new Array("Un chiffre 0", "Un chiffre 1");

La syntaxe est sensiblement similaire à la déclaration des objets. Il est également possible de mélanger les types de données dans le tableau, pour comparer avec l’exemple précédent, voici le même résultat mais en utilisant l’objet Array.

var Calcul = [
     function(a, b) { return a + b; },
     function(a, b) { return a - b; },
     function(a, b) { return a * b; },
     function(a, b) { return a / b; }
];
Calcul[0](3, 2); // Affiche 5
Calcul[1](3, 2); // Affiche 1
// etc ...

Bon ok pour cet exemple, on préfère largement l’Objet à l’Array. Donc on se pose maintenant la question suivante : Qu’est ce qui fait que l’on utilise quand même l’Array dans certains cas. Tous simplement car c’est un objet natif à javascript au même titre que l’objet String, Date, etc … Vous pouvez consulter la doc sur ce site : http://fr.selfhtml.org/javascript/objets/array.htm. Il met à disposition sans développement supplémentaire une suite de fonctionnalités assez intéressante comme la gestion de pile en FIFO ou FILO avec les méthode pop(), push() et shift(). Ou encore des méthodes de d’extraction d’une partie du tableau, de taille, de trie, etc. Une attention particulière à l’attribut length() qui retourne toujours 1 de plus que le nombre maximum de l’indice (ce qui est logique vu que l’on part de 0 … [:D]). Mais il faut se méfier également de cet attribut comme le montre l’exemple suivant:

var monTableau = [];
monTableau.length; // Affiche 0
monTableau.push("Toto est présent!");
monTableau.length; // Affiche 1
monTableau[100] = "Tarte au centième";
monTableau.length; // Affiche 101 !!!

Allez plus loin avec les Objets javascript

Si vous souhaitez en savoir plus sur les Objets javascript, je vous invite à visiter ce site http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/ qui est vraiment bien fait et pose de bonnes bases pour la POO en Javascript.

Bon dév’

Geekos.fr vous recommande les articles suivants

• jQuery : Astuces et conseils pour améliorer les performances
• jQuery: Utiliser une autre version sans écraser celle existante
• SVG + CSS + Javascript = amour parfait ?
• Timer en Javascript
• JavaScript : Chosen, un plugin jQuery et mooTools pour les balises SELECT