open

Les tableaux en Javascript

#1 Qu'est ce qu'un tableau en Javascript ? open

Un tableau c'est une structure de données ordonnée où l'on accède à un élément du tableau par un index (on dit aussi indice).

Pour essayer de visualiser, on peut voir ça comme une ligne de boîtes numérotées qui contiennent chacune une valeur. Le couple indice et valeur constitue un élément du tableau.

012
valeur_0valeur_1valeur_2

En Javascript un tableau est un objet. Il n'y a pas de type dédié pour cette structure de données. C'est un objet qui est mis à disposition par le langage. On dit qu'il est natif.

Il y a deux manières de créer un tableau. La première c'est d'utiliser ce que l'on peut voir comme un opérateur de création d'un tableau []. La deuxième c'est d'appeler avec new le constructeur de l'objet c'est à dire Array().

Un tableau en Javascript peut contenir des éléments de types différents.

Ici et dans l'ordre on a une chaîne de caractères, un entier, un booléen, une déclaration de fonction anonyme, un opérateur de création d'objet et un opérateur de création de tableau.

#2 La propriété length open

La propriété length nous donne le nombre d'éléments d'un tableau. Si vous voulez créer un élément supplémentaire non seulement vous pouvez le faire, mais vous pouvez le faire sur n'importe quel index disponible.

Ci dessous un nouvel élément est créé sur l'index 5 et vous pouvez constater que length est mis à jour.

Des éléments de type undefined ont été créés pour combler les vides en quelque sorte.

Vous pouvez toujours parcourir le tableau avec une boucle for, les éléments undefined sont affichés en tant que tel.

#3 Les tableaux à plusieurs dimensions open

On a présenté un tableau comme pouvant être vu comme une ligne de boîtes placées côte à côte. On peut imaginer que l'on empile les lignes de boîtes les unes sur les autres. La première étant en haut.

On peut numéroter nos boîtes en ligne et en colonne. Cette façon de numéroter ressemble à celle des matrices mathématiques sauf qu'ici nous allons commencer à 0. Donc ci dessous L0 C0 signifie ligne 0 et colonne 0.

Un tableau de dimension 2
2 lignes et 3 colonnes
L0 C0L0 C1L0 C2
L1 C0L1 C1L1 C2

Il faut quand même préciser que cette façon de présenter n'a rien à voir avec la façon dont sont rangées les informations en mémoire.

Comment parcourir ce tableau et accéder à tous les éléments ?

On commence ci dessous par parcourir les lignes. Pour cela on se sert d'une boucle for avec un indice de boucle que l'on appelle il.

Maintenant pour chaque ligne on veut parcourir ses colonnes. Pour cela on va faire une deuxième boucle for et on va se servir d'un indice de boucle que l'on va appeler ic.

Notez bien ici la façon d'accéder à un élément tab[il][ic].

Quelle est la dimension maximale d'un tableau ?

Théoriquement il n'y a pas de limite. Dans nos applications web le plus souvent on travaille sur des tableaux de dimension 2 ou 3 maximum. Pour information dans des applications de calcul scientifique ce chiffre peut facilement augmenter.

#4 Liste des méthodes de manipulation des tableaux open

Pour manipuler les tableaux l'objet Array() met à votre disposition un jeu complet de méthodes. On va détailler les plus utilisées et simplement expliquer ce que l'on peut faire avec quelques autres que l'on ne détaillera pas.

Liste des méthodes détaillées ici

  • indexOf pour retrouver l'index d'un élément.
  • push, unshift, pop, shift pour ajouter ou supprimer des éléments aux extrémités d'un tableau. On dit aussi empiler et dépiler.
  • splice pour ajouter ou supprimer des éléments à n'importe quel endroit d'un tableau.
  • forEach est une boucle qui permet de parcourir un tableau et éventuellement d'appliquer une fonction à chaque élément.
  • sort pour un tri alphabétique.
  • reverse pour renverser l'ordre d'un tableau. Renverser veut dire ici que le premier élément devient le dernier et ainsi de suite.
  • concat pour concaténer deux tableaux.
  • slice pour copier une partie d'un tableau ou le tableau entier dans un nouveau tableau.
  • join pour concaténer les éléments d'un tableau de chaînes de caractères en une seule chaîne de caractères.

Liste des méthodes dont il faut connaître les possibilités.

  • fill remplit tous les éléments d'un tableau, d'un index de début à un index de fin, avec une valeur statique.
  • filter crée un nouveau tableau avec tous les éléments qui réussissent le test mis en œuvre par la fonction fournie.
  • find retourne la valeur du premier élément du tableau qui satisfait la fonction de test fournie. Sinon undefined est retourné.
  • findIndex retourne l' index du premier élément du tableau qui satisfait la fonction de test fournie . Sinon, il retourne -1, indiquant qu'aucun élément n'a réussi le test.

#5 Ajouter ou supprimer des éléments au début ou à la fin d'un tableau avec push, unshift, pop, shift open

Syntaxe

Ajouter des éléments

  1. nouvelleLongueur = tableau.push(element) ajoute un élément après le plus grand index.
  2. nouvelleLongueur = tableau.unshift(element) ajoute un élément avant le plus petit index.

Supprimer des éléments

  1. nouvelElement = tableau.pop() supprime l'élément qui a le plus grand index.
  2. nouvelElement = tableau.shift() supprime l'élément qui a le plus petit index.

Paramètres

Un nouvel élément pour push et unshift et aucun pour pop et shift

Valeur retournée

La nouvelle longueur du tableau pour push et unshift et l'élément supprimé pour pop et shift.

Exemples

Ci dessous avec push on ajoute un élément à la fin du tableau panier.

Ci dessous avec unshift on ajoute un élément au début du tableau panier

Ci dessous avec pop on supprime un élément à la fin du tableau panier

Ci dessous avec shift on supprime un élément au début du tableau panier

#6 Ajouter ou supprimer des éléments n'importe où dans un tableau avec splice open

Syntaxe

tableau = tableau.splice(debut[, nombreDeSuppression[, element1[, element2[, ...]]]])

Paramètres

debut index où commence le traitement.

nombreDeSuppression nombre d'éléments que l'on veut supprimer. Si on ne veut rien supprimer on peut mettre 0 ou ne pas mettre le paramètre d'appel.

Valeur retournée

tableau Tableau des éléments supprimés. Le tableau peut être vide si aucune suppression n'est demandée.

Exemples

Ci dessous on insère à l'index 1 en supprimant 0 élément. On insère "Sauce Tomate" en décalant les autres.

Ci dessous on insère à l'index 1 en supprimant 2 éléments. On insère "Sauce Tomate" et on supprime "Pomme" et "Huile d'Olive"

Ci dessous à l'index 1 on supprime 2 éléments. On supprime "Huile d'Olive" et "Liquide Vaisselle".

#7 Parcourir le tableau et appliquer une fonction avec forEach open

Syntaxe

tableau.forEach(function (valeur[, index[, tableau]]) { })

Paramètres

valeur la valeur de chaque élément.

index l'index de chaque élément.

tableau le tableau en cours de traitement.

Exemples

Ci dessous pour chaque valeur passée en paramètre d'appel on appelle la méthode toUpperCase de l'objet String.

Il faut noter que l'on ne peut pas utiliser break ou continue dans ce type de boucle.

#8 Tri alphabétique des éléments d'un tableau avec sort open

Syntaxe

tableau = tableau.sort( [fonction_pour_comparaison] )

Tri les éléments d'un tableau suivant l'ordre alphabétique de leur première lettre. L'ordre est celui du code UTF-16 à savoir chiffres puis majuscules puis minuscules. Le tableau passé en argument d'appel est trié. Le même tableau trié est également retourné par la méthode. Les éléments du tableau qui ne sont pas des chaînes de caractères sont convertis en chaîne de caractères.

La complexité du tri n'est pas spécifiée

Paramètres

fonction_pour_comparaison une fonction peut être passée en paramètre d'appel pour pouvoir effectuer des tris spécifiques.

Un tableau

Valeur retournée

Un tableau traité

Exemples

Tri alphabétique dans l'ordre UTF

Le tri basé sur la première lettre donne évidemment un résultat erroné pour un tri d'entier.

Cette documentation donne une fonction de comparaison qui permet de faire un tri d'entier.

#9 Inverser l'ordre d'un tableau avec reverse open

Syntaxe

tableau_retour = tableau.reverse()

Inverse l'ordre des éléments de tableau.

Valeur retournée

tableau_retour retourne le tableau inversé.

Exemples

#10 Concaténer deux tableaux avec concat open

Syntaxe

nouveauTableau = tableau.concat([ valeur1 [, tableau1 [, ... [,valeur2 ]]]])

Paramètres

Vous pouvez mettre en paramètres d'appel soit des valeurs soit des tableaux. Vous obtenez toujours en sortie un tableau à une dimension.

Valeur retournée

Un nouveau tableau dans lequel les paramètres d'appel sont concaténés dans l'ordre. Valeur1 puis tableau1 puis valeur2..Les paramètres d'appel ne sont pas modifiés.

Exemples

#11 Copier une tranche d'un tableau avec slice open

Ici on ne travaille pas sur le tableau mais on en fabrique une copie.

Syntaxe

nouveauTableau = tableau.slice([indexDebut[,indexFin]]);

Paramètres

indexDebut Index dans le tableau à voir signification selon le cas.

indexFin Index dans le tableau à voir signification selon le cas.

Valeur retournée

Un nouveau tableau.

Exemples

Aucun paramètre d'appel

Ci dessous aucun paramètre d'appel est présent c'est une simple recopie du tableau dans un nouvel objet. Notez bien que l'on ne peut pas obtenir cette recopie avec une simple affectation.

Un seul paramètre d'appel

Ci dessous seul l'indexDebut est présent alors la tranche copiée démarre sur cet index et va jusqu'à la fin du tableau.

On copie de l'élément d'index 3 jusqu'à la fin
Exemple Array.slice(3)

Un seul paramètre d'appel négatif

Ci dessous indexDebut est négatif la copie démarre à la fin du tableau. Et on copie le nombre d'éléments correspondant à la valeur.

Deux paramètres d'appel

Ci dessous les deux index sont présents. On part de l'index 1 c'est à dire de "Dentifrice" et on copie jusqu'à l'index 2 c'est à dire "Pomme". "Sauce Tomate" est à l'index 3 mais on ne le copie pas.

On copie uniquement les éléments d'index 1 et 2
Exemple Array.slice(3)

#12 Fabriquer une chaîne de caractère avec join open

Reconstitue une chaîne de caractères à partir d'un tableau de chaîne. Chaque chaîne du tableau sera séparée par une sous-chaîne.

Syntaxe

nouvelleChaine = tableau.join(sousChaine)

Paramètre

Une sousChaine de type stringd'un ou plusieurs caractères.

Valeur retournée

Une chaîne de caractères de type string.

Exemples