Tableaux JS

Qu'est-ce qu'un tableau

Les tableaux sont des variables complexes qui nous permettent de stocker plus d'une valeur ou un groupe de valeurs sous un seul nom de variable. Les tableaux JavaScript peuvent stocker n'importe quelle valeur valide, y compris des chaînes, des nombres, des objets, des fonctions et même d'autres tableaux, permettant ainsi de créer des structures de données plus complexes telles qu'un tableau d'objets ou un tableau de tableaux.

Supposons que vous souhaitiez stocker le nom des couleurs dans votre code JavaScript. Stocker les noms de couleurs un par un dans une variable pourrait ressembler à ceci :

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

Mais que se passe-t-il si vous avez besoin de stocker les noms d'état ou de ville d'un pays dans des variables et cette fois ce n'est pas seulement trois peut être cent. Il est assez difficile et ennuyeux de stocker chacun d'eux dans une variable distincte. De plus, utiliser autant de variables simultanément et en garder une trace sera une tâche très difficile. Et ici, le tableau entre en jeu. Les tableaux résolvent ce problème en fournissant une structure ordonnée pour stocker plusieurs valeurs ou un groupe de valeurs.

Création d'un tableau

Le moyen le plus simple de créer un tableau en JavaScript consiste à placer une liste de valeurs séparées par des virgules entre crochets ( []), comme indiqué dans la syntaxe suivante :

var monTableau = [ élément0 , élément1 , ..., élémentN ];

Un tableau peut également être créé à l'aide du constructeur Array(), comme indiqué dans la syntaxe suivante. Cependant, pour des raisons de simplicité, la syntaxe précédente est recommandée.

var monTableau = new Array( élément0 , élément1 , ..., élémentN );

Voici quelques exemples de tableaux créés à l'aide de la syntaxe littérale de tableau :

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];

Remarque : Un tableau est une collection ordonnée de valeurs. Chaque valeur d'un tableau est appelée un élément, et chaque élément a une position numérique dans un tableau, appelée son index.

 

Accéder aux éléments d'un tableau

Les éléments du tableau sont accessibles par leur index en utilisant la notation entre crochets. Un index est un nombre qui représente la position d'un élément dans un tableau.

Les index de tableau sont basés sur zéro. Cela signifie que le premier élément d'un tableau est stocké à l'index 0, et non 1, le deuxième élément est stocké à l'index 1, et ainsi de suite. Les index de tableau commencent à 0 et augmentent jusqu'au nombre d'éléments moins 1. Ainsi, un tableau de cinq éléments aurait des index de 0 à 4.

L'exemple suivant vous montrera comment obtenir des éléments de tableau individuels par leur index.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits[0]); // Affiche: Apple
document.write(fruits[1]); // Affiche: Banana
document.write(fruits[2]); // Affiche: Mango
document.write(fruits[fruits.length - 1]); // Affiche: Papaya

Remarque : En JavaScript, les tableaux ne sont en fait qu'un type spécial d'objets qui ont des index numériques comme clés. L'opérateur typeof renverra "object" pour les tableaux.

Obtenir la longueur d'un tableau

La propriété length renvoie la longueur d'un tableau, qui est le nombre total d'éléments contenus dans le tableau. La longueur du tableau est toujours supérieure à l'indice de l'un de ses éléments.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Affiche: 5

Boucle à travers les éléments du tableau

Vous pouvez utiliser la boucle for pour accéder à chaque élément d'un tableau dans un ordre séquentiel, comme ceci :

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// parcourir les éléments du tableau
for(var i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "<br>"); // Print array element
}

ECMAScript 6 a introduit un moyen plus simple d'itérer sur un élément de tableau, qui est une boucle for-of. Dans cette boucle, vous n'avez pas besoin d'initialiser et de suivre la variable du compteur de boucle ( i).

Voici le même exemple réécrit en utilisant la for-ofboucle :

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
for(var fruit of fruits) {    
    document.write(fruit + "<br>"); 
}

Vous pouvez également parcourir les éléments du tableau à l'aide de la boucle for-in, comme ceci :

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

for(var i in fruits) {  
    document.write(fruits[i] + "<br>");
}

Remarque : La boucle for-in ne doit pas être utilisée pour itérer sur un tableau où l'ordre de l'index est important. La boucle for-in est optimisée pour itérer sur les propriétés de l'objet , vous devriez mieux utiliser une boucle for avec un index numérique ou une boucle for-of.

 

Ajout de nouveaux éléments à un tableau

Pour ajouter un nouvel élément à la fin d'un tableau, utilisez simplement la méthode  push(), comme ceci :

var colors = ["Red", "Green", "Blue"]; 
colors.push("Yellow");
document.write(colors); // Affiche: Red,Green,Blue,Yellow
document.write(colors.length); // Affiche: 4

De même, pour ajouter un nouvel élément au début d'un tableau, utilisez la méthode unshift(), comme ceci :

var colors = ["Red", "Green", "Blue"]; 
colors.unshift("Yellow");
document.write(colors); // Affiche: Yellow,Red,Green,Blue
document.write(colors.length); // Affiche: 4

Vous pouvez également ajouter plusieurs éléments à la fois en utilisant les méthodes push() et unshift(), comme ceci :

var colors = ["Red", "Green", "Blue"];
colors.push("Pink", "Voilet");
colors.unshift("Yellow", "Grey");
document.write(colors); // Affiche: Yellow,Grey,Red,Green,Blue,Pink,Voilet
document.write(colors.length); // Affiche: 7

Supprimer des éléments d'un tableau

Pour supprimer le dernier élément d'un tableau, vous pouvez utiliser la méthode pop(). Cette méthode renvoie la valeur qui a été extraite. Voici un exemple :

var colors = ["Red", "Green", "Blue"];
var last = colors.pop();
document.write(last); // Affiche: Blue
document.write(colors.length); // Affiche: 2

De même, vous pouvez supprimer le premier élément d'un tableau à l'aide de la méthode shift(). Cette méthode renvoie également la valeur qui a été décalée. Voici un exemple :

var colors = ["Red", "Green", "Blue"];
var first = colors.shift();
document.write(first); // Affiche: Red
document.write(colors.length); // Affiche: 2

Conseil : Les méthodes push() et pop() s'exécutent plus rapidement que unshift() et shift(). Parce que les méthodes push() et pop() ajoutent et suppriment simplement des éléments à la fin d'un tableau, les éléments ne bougent donc pas, tandis que unshift() et shift() ajoutent et suppriment des éléments au début du tableau qui nécessitent une réindexation du tableau entier.

Ajout ou suppression d'éléments à n'importe quelle position

La méthode splice() est une méthode de tableau très polyvalente qui vous permet d'ajouter ou de supprimer des éléments de n'importe quel index, en utilisant la syntaxe arr.splice(startIndex, deleteCount, elem1, ..., elemN).

Cette méthode prend trois paramètres : le premier paramètre est l'indice auquel commencer à épisser le tableau, il est obligatoire ; le deuxième paramètre est le nombre d'éléments à supprimer (à utiliser 0 si vous ne souhaitez supprimer aucun élément), il est facultatif ; et le troisième paramètre est un ensemble d'éléments de remplacement, il est également facultatif. L'exemple suivant montre comment cela fonctionne :

var colors = ["Red", "Green", "Blue"];
var removed = colors.splice(0,1); /* Supprime le premier élément */
document.write(colors); // Affiche: Green,Blue
document.write(removed); // Affiche: Red (one item array)
document.write(removed.length); // Affiche: 1
removed = colors.splice(1, 0, "Pink", "Yellow"); // Inserer deux élement en premier position
document.write(colors); // Affiche: Green,Pink,Yellow,Blue
document.write(removed); // tableau vide
document.write(removed.length); // affiche: 0
removed = colors.splice(1, 1, "Purple", "Voilet"); // Inserer deux valeurs, supprimer une
document.write(colors); //Affiche: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Affiche: Pink 
document.write(removed.length); // Affiche: 1

La méthode splice() renvoie un tableau des éléments supprimés, ou un tableau vide si aucun élément n'a été supprimé, comme vous pouvez le voir dans l'exemple ci-dessus. Si le deuxième argument est omis, tous les éléments du début à la fin du tableau sont supprimés. Contrairement aux méthodes slice(), concat() et splice(), la méthode modifie le tableau sur lequel elle est appelée.

Création d'une chaîne à partir d'un tableau

Il peut arriver que vous vouliez simplement créer une chaîne en joignant les éléments d'un tableau. Pour ce faire, vous pouvez utiliser la méthode join(). Cette méthode prend un paramètre facultatif qui est une chaîne de séparation ajoutée entre chaque élément. Si vous omettez le séparateur, JavaScript utilisera la virgule ( ,) par défaut. L'exemple suivant montre comment cela fonctionne :

var colors = ["Red", "Green", "Blue"];
document.write(colors.join()); // Affiche: Red,Green,Blue
document.write(colors.join("")); // Affiche: RedGreenBlue
document.write(colors.join("-")); // Affiche: Red-Green-Blue
document.write(colors.join(", ")); // Affiche: Red, Green, Blue

Vous pouvez également convertir un tableau en une chaîne séparée par des virgules à l'aide de toString(). Cette méthode n'accepte pas le paramètre séparateur comme join(). Voici un exemple :

var colors = ["Red", "Green", "Blue"];
document.write(colors.toString()); // Affiche: Red,Green,Blue

Extraction d'une partie d'un tableau

Si vous souhaitez extraire une partie d'un tableau (c'est-à-dire un sous-tableau) mais conserver le tableau d'origine intact, vous pouvez utiliser la méthode slice(). Cette méthode prend 2 paramètres : index de début (index auquel commencer l'extraction) et un index de fin facultatif (index avant lequel terminer l'extraction), comme arr.slice(startIndex, endIndex). Voici un exemple :

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Affiche: Banana,Mango

Si le paramètre endIndex est omis, tous les éléments jusqu'à la fin du tableau sont extraits. Vous pouvez également spécifier des index ou des décalages négatifs - dans ce cas, la méthode slice() extrait les éléments de la fin d'un tableau, plutôt que du début. Par exemple:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.slice(2)); // Affiche: Mango,Orange,Papaya
document.write(fruits.slice(-2)); // Affiche: Orange,Papaya
document.write(fruits.slice(2, -1)); // Affiche: Mango,Orange

Fusion de deux tableaux ou plus

La méthode concat() peut être utilisée pour fusionner ou combiner deux tableaux ou plus. Cette méthode ne modifie pas les tableaux existants, mais renvoie un nouveau tableau. Par exemple:

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
var animals = pets.concat(wilds); 
document.write(animals); // Affiche: Cat,Dog,Parrot,Tiger,Wolf,Zebra

La méthode concat() peut prendre n'importe quel nombre d'arguments de tableau, vous pouvez donc créer un tableau à partir de n'importe quel nombre d'autres tableaux, comme illustré dans l'exemple suivant :

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
var bugs = ["Ant", "Bee"];
var animals = pets.concat(wilds, bugs); 
document.write(animals); // Affiche: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

Recherche dans un tableau

Si vous souhaitez rechercher une valeur spécifique dans un tableau, vous pouvez simplement utiliser indexOf() et lastIndexOf(). Si la valeur est trouvée, les deux méthodes renvoient un index représentant l'élément du tableau. Si la valeur n'est pas trouvée, -1 est retourné. La méthode indexOf() renvoie le premier trouvé, tandis que lastIndexOf() renvoie le dernier trouvé.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.indexOf("Apple")); // Affiche: 0
document.write(fruits.indexOf("Banana")); // Affiche: 1
document.write(fruits.indexOf("Pineapple")); // Affiche: -1

Les deux méthodes acceptent également un paramètre entier facultatif de index qui spécifie l'index dans le tableau à partir duquel commencer la recherche. Voici un exemple :

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
document.write(arr.indexOf(1, 2)); // Affiche: 3
document.write(arr.lastIndexOf(1, 2)); // Affiche: 0

Vous pouvez également utiliser la méthode includes() pour savoir si un tableau comprend un certain élément ou non. Cette méthode prend les mêmes paramètres que les méthodes indexOf() et lastIndexOf(), mais elle renvoie true ou false à la place du numéro d'index. Par exemple:

 

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
document.write(arr.includes(1)); // Affiche: true
document.write(arr.includes(6)); // Affiche: false
document.write(arr.includes(1, 2)); // Affiche: true
document.write(arr.includes(3, 4)); // Affiche: false

Si vous souhaitez rechercher un tableau en fonction de certaines conditions, vous pouvez utiliser la méthode find() de JavaScript qui vient d'être introduite dans ES6. Cette méthode renvoie la valeur du premier élément du tableau qui satisfait la fonction de test fournie. Sinon ça revient undefined.

 

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Affiche: 5

Il existe une autre méthode similaire à find(), c'est la méthode findIndex(), qui renvoie l'index d'un élément trouvé dans le tableau au lieu de sa valeur. Par exemple:

 

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
var result = arr.findIndex(function(element) {
  return element > 6;
});
document.write(result); // Affiche: 8

La méthode find() ne recherche que le premier élément qui satisfait la fonction de test fournie. Cependant, si vous souhaitez connaître tous les éléments correspondants, vous pouvez utiliser la méthode filter().

La méthode filter() crée un nouveau tableau avec tous les éléments qui réussissent le test donné. L'exemple suivant vous montrera comment cela fonctionne réellement :

 

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Affiche: 5,7
document.write(result.length); // Affiche: 2