Les tableaux sont une représentation de plusieurs variables (cellules) sous forme d’une seule entité (le tableau). Le but de la représentation tabulaire est de manipuler l’ensemble des valeurs représentés d’un seul coup. Vous pouvez à la base déclarer un tableau de tout: entiers, chaines de caractères, etc. Dans ce tutoriel, nous allons vous présenter de façon brève les tableaux en JavaScript.

Déclaration

Pour déclarer un tableau JavaScript, nous avons deux styles:

  • Le contructeur de la classe Array,
  • Le raccourci de déclaration (plus populaire)

Le code source suivant énonce les deux possibilités.

let tableau = new Array();  // Déclaration par le constructeur
let tableau = [];                 // Déclaration par la syntaxe racourcie

Dans les deux cas, vous aurez une réservation d’espace en mémoire pour stocker un ensemble de valeurs.

Certaines fois, vous aurez le besoin de créer un tableau JavaScript avec un ensemble de valeurs à contenir initialement. Dans ce cas, vous pouvez déclarer le tableau comme ce qui suit.

let tableau = [14, 3, 19, 9, 7];  // Déclaration d'un tableau avec valeurs par défaut

Ajout d’éléments à la fin des tableaux

Lorsque q’un tableau JavaScript est défini, vous pouvez lui ajouter des éléments avec la méthode .push() comme dans l’exemple suivant.

let tableau = [10, 3, 5];
tableau.push(9);  //   => [10, 3, 5, 9]
tableau.push(17, 93);  //   => [10, 3, 5, 9, 17, 93]
Ajout de nouvaux éléments au tableau

Dans ce exemple, vous allez constater qu’il est possible d’ajouter en même temps plusieurs valeurs à un tableau par la méthode .push(). Par exemple, vous pouvez faire ce ceci. tableau.push(-1, 40, 36, 56) et c’est toujours valide.

Ajout d’éléments au début des tableaux JavaScript

La fonction .unshift() permet d’ajouter des éléments au début d’un tableau JavaScript. Il fonctionne de façon similaire à la fonction .push()

let tableau = ["deux" , "trois", "quatre'"];
tableau.unshift("un");  //   => ["un", "deux", "trois", "quatre"]

Accès aux éléments des tableaux JavaScript

Les éléments d’un tableau Javascript sont souvant indexé (ou numéroté) à partir de l’index 0. Ainsi le premier élément se trouve à l’index 0 et le deuxième à l’index 1 etc.

Le code suivant permet d’accéder au troisième élément du tableau JavaScript soit encore l’élément à l’index 2

let tableau = [5, 1, 7, 16, -1]; 
console.log(tableau[2]);           // Affiche =>  7 
console.log(tableau[4]);          // Affiche =>  -1
console.log(tableau[5]);          // Affiche undefined

Lorsque vous tentez d’accéder à un index qui n’existe pas dans un tableau JavaScript, vous allez obtenir la valeur undefined. Ce qui voudrait dire que l’index n’existe pas dans le tableau JavaScript.

Enlever le dernier élément des tableaux JavaScript

Lorsque vous voudriez recupérer et enlever le dernier élément d’un tableau JavaSpript, vous pouvez utiliser la fonction .pop()

let tableau = [-5, 2, 7, 1];
console.log(tableau);                 // Affiche [-5, 2, 7, 1]
let fin = tableau.pop();               // Enlève le dernier élément du tableau et le met dans la variable fin
console.log(fin);                        // Affiche 1
console.log(tableau);               // [-5, 2, 7]
       

Dans le code précédent, nous avons crée un tableau et supprimé le dernier élément pour le stocker dans la variable fin pour l’afficher et constater que l’élément à effectivement été enlevé du tableau.

Enlever de premier élément des tableaux JavaScript

La fonction .shift() permet d’enlever le premier élément d’un tableau JavaScript. Il retourne le premier élément(l’élément) à l’index 0 du tableau et le supprime.

let tableau = [-5, 2, 7, 1];
console.log(tableau);                         // Affiche [-5, 2, 7, 1]
let debut = tableau.shift();                // Enlève le premier élément du tableau et le met dans la variable debut
console.log(debut);                        // Affiche -5
console.log(tableau);                   //  [2, 7, 1]

Voilà le tour d’horizon des tableaux JavaScript à la base. Pour approfondir votre connaissance des tableaux, suivez aussi ces liens: