Tableaux JavaScript

Introduction

Dans ce laboratoire, vous allez explorer l'une des structures de données les plus fondamentales en JavaScript : le tableau (array). Un tableau est une variable spéciale qui peut contenir plusieurs valeurs à la fois. Les tableaux sont utilisés pour stocker des collections ordonnées de données, telles qu'une liste d'éléments, de nombres ou de chaînes de caractères.

Vous apprendrez à :

• Créer un tableau.
• Accéder et modifier les éléments d'un tableau.
• Ajouter et supprimer des éléments à l'aide de méthodes de tableau courantes.
• Parcourir un tableau pour traiter ses éléments.

Tout au long de ce laboratoire, vous travaillerez dans l'environnement WebIDE. Vous écrirez votre code JavaScript dans le fichier script.js. Pour voir les résultats de votre code, vous utiliserez la console de développement du navigateur, accessible dans l'onglet "Web 8080".

Créer un littéral de tableau avec des crochets

Dans cette étape, vous apprendrez la manière la plus courante de créer un tableau JavaScript : en utilisant un littéral de tableau (array literal). Un littéral de tableau est une liste de zéro ou plusieurs expressions, chacune représentant un élément du tableau, entourée de crochets ([]).

Tout d'abord, localisez le fichier script.js dans l'explorateur de fichiers sur le côté gauche du WebIDE. Cliquez dessus pour l'ouvrir dans l'éditeur.

Maintenant, ajoutez le code suivant à script.js pour créer un tableau de fruits et l'afficher dans la console.

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);

Après avoir ajouté le code, enregistrez le fichier (vous pouvez utiliser Ctrl+S ou Cmd+S). Pour voir la sortie, basculez vers l'onglet "Web 8080" en haut de l'écran. Vous devrez peut-être ouvrir la console de développement de votre navigateur (généralement en appuyant sur F12 ou en faisant un clic droit sur la page et en sélectionnant "Inspecter", puis en naviguant vers l'onglet "Console"). Vous devriez voir le tableau imprimé dans la console.

["Apple", "Banana", "Cherry"];

Accéder à un élément du tableau par son index

Dans cette étape, vous apprendrez comment accéder aux éléments individuels d'un tableau. Les tableaux JavaScript sont indexés à partir de zéro, ce qui signifie que le premier élément se trouve à l'index 0, le deuxième à l'index 1, et ainsi de suite. Vous pouvez accéder à un élément en faisant référence à son numéro d'index entre crochets.

Continuons à modifier le fichier script.js. Ajoutez les lignes suivantes sous votre code existant pour accéder au premier élément du tableau fruits et l'afficher.

// Accéder au premier élément (index 0)
const firstFruit = fruits[0];
console.log("The first fruit is:", firstFruit);

// Accéder au troisième élément (index 2)
console.log("The third fruit is:", fruits[2]);

Enregistrez le fichier script.js et actualisez l'onglet "Web 8080". Vérifiez la console du développeur. Vous verrez la nouvelle sortie en plus de celle de l'étape précédente.

The first fruit is: Apple
The third fruit is: Cherry

Ajouter un élément avec la méthode push

Dans cette étape, vous apprendrez comment ajouter un nouvel élément à la fin d'un tableau existant. La manière la plus simple de le faire est d'utiliser la méthode push(). Cette méthode ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau.

Ajoutez le code suivant à la fin de votre fichier script.js pour ajouter "Orange" à votre tableau fruits.

// Ajouter un nouvel élément à la fin du tableau
fruits.push("Orange");

console.log("Array after push:", fruits);

Enregistrez le fichier et vérifiez la console dans l'onglet "Web 8080". Vous verrez que le tableau fruits contient maintenant quatre éléments.

Array after push: [ "Apple", "Banana", "Cherry", "Orange" ]

Supprimer le dernier élément avec la méthode pop

Dans cette étape, vous apprendrez comment supprimer le dernier élément d'un tableau en utilisant la méthode pop(). Cette méthode supprime le dernier élément d'un tableau et renvoie cet élément. Cette action modifie la longueur du tableau.

Ajoutez le code suivant à la fin de votre fichier script.js. Cela supprimera le dernier élément que vous venez d'ajouter et affichera l'élément supprimé ainsi que le tableau mis à jour.

// Supprimer le dernier élément du tableau
const removedFruit = fruits.pop();

console.log("Removed fruit:", removedFruit);
console.log("Array after pop:", fruits);

Enregistrez le fichier et observez la sortie de la console dans l'onglet "Web 8080". Vous verrez que "Orange" a été supprimé et que le tableau est revenu à ses trois éléments d'origine.

Removed fruit: Orange
Array after pop: [ "Apple", "Banana", "Cherry" ]

Itérer sur un tableau avec une boucle for

Dans cette étape, vous apprendrez comment parcourir tous les éléments d'un tableau. Une façon courante de le faire est d'utiliser une boucle for. Vous pouvez utiliser la propriété length du tableau pour déterminer combien de fois la boucle doit s'exécuter.

Ajoutez la boucle for suivante à la fin de script.js pour imprimer chaque fruit du tableau dans la console sur une nouvelle ligne.

console.log("Iterating through the array with a for loop:");

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

La boucle commence avec i = 0 et continue tant que i est inférieur à la longueur du tableau fruits. À chaque itération, elle imprime l'élément à l'index courant i.

Enregistrez le fichier et vérifiez la console dans l'onglet "Web 8080". Vous verrez chaque fruit listé individuellement.

Iterating through the array with a for loop:
Apple
Banana
Cherry

Résumé

Félicitations pour avoir terminé le laboratoire sur les tableaux JavaScript !

Dans ce laboratoire, vous avez appris les opérations essentielles pour travailler avec des tableaux en JavaScript. Vous avez pratiqué :

• La création d'un tableau en utilisant la syntaxe littérale [].
• L'accès aux éléments par leur index basé sur zéro, comme array[0].
• L'ajout d'un élément à la fin d'un tableau avec la méthode push().
• La suppression du dernier élément d'un tableau avec la méthode pop().
• L'itération sur chaque élément d'un tableau en utilisant une boucle for et la propriété length.

Les tableaux sont une pierre angulaire de la programmation JavaScript. Il existe de nombreuses autres méthodes puissantes à explorer, telles que forEach(), map() et filter(), qui peuvent rendre votre code encore plus concis et expressif. Continuez à pratiquer pour maîtriser cette structure de données fondamentale.