Créer et manipuler des tableaux en JavaScript

Introduction

Dans ce laboratoire, les étudiants exploreront les concepts fondamentaux de la création et de la manipulation d' tableaux en JavaScript. Le laboratoire offre une introduction complète à l'initialisation des tableaux, à l'accès aux éléments des tableaux et à la réalisation d'opérations de base sur les tableaux grâce à des exercices de codage pratiques. Les participants apprendront à créer des tableaux en utilisant différentes méthodes, y compris la notation entre crochets carrées et le constructeur Array, et comprendront comment travailler avec des tableaux contenant différents types de données.

Le laboratoire couvre des compétences clés telles que la définition de tableaux avec des nombres, des chaînes de caractères et des éléments mixtes, l'accès à des éléments individuels de tableau à l'aide d'index et la démonstration de techniques de manipulation de base des tableaux. En travaillant sur des exemples pratiques, les apprenants acquerront une expérience pratique dans la création, l'accès et l'interaction avec des tableaux, qui sont des structures de données essentielles en programmation JavaScript.

Comprendre la définition et l'initialisation des tableaux

Dans cette étape, vous allez découvrir les tableaux en JavaScript, qui sont des structures de données fondamentales utilisées pour stocker plusieurs valeurs dans une seule variable. Les tableaux vous permettent de collecter et d'organiser efficacement des données liées.

Commençons par créer un tableau simple en JavaScript. Ouvrez le WebIDE et créez un nouveau fichier appelé arrays.js dans le répertoire ~/project.

// Création d'un tableau de nombres
let numbers = [1, 2, 3, 4, 5];

// Création d'un tableau de chaînes de caractères
let fruits = ["apple", "banana", "orange"];

// Création d'un tableau vide
let emptyArray = [];

// Création d'un tableau avec des types de données mixtes
let mixedArray = [42, "hello", true, null];

console.log("Tableau de nombres :", numbers);
console.log("Tableau de fruits :", fruits);
console.log("Tableau vide :", emptyArray);
console.log("Tableau mixte :", mixedArray);

Lorsque vous exécutez ce code, vous verrez la sortie d'exemple suivante :

Tableau de nombres : [1, 2, 3, 4, 5]
Tableau de fruits : ['apple', 'banana', 'orange']
Tableau vide : []
Tableau mixte : [42, 'hello', true, null]

Points clés sur l'initialisation des tableaux :

Les tableaux sont créés en utilisant des crochets carrés []
Les tableaux peuvent contenir des éléments de différents types
Les tableaux peuvent être vides ou pré-remplis
Le premier élément d'un tableau se trouve toujours à l'index 0

Vous pouvez également créer des tableaux en utilisant le constructeur Array :

// Utilisation du constructeur Array
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log("Tableau utilisant le constructeur :", numbersConstructor);

Accéder aux éléments d'un tableau à l'aide d'index

Dans cette étape, vous allez apprendre à accéder à des éléments individuels dans un tableau à l'aide de leur index. En JavaScript, les index de tableau commencent à 0, ce qui signifie que le premier élément se trouve à l'index 0, le second à l'index 1, et ainsi de suite.

Ouvrez le fichier arrays.js dans le répertoire ~/project et ajoutez le code suivant :

// Création d'un tableau de couleurs
let colors = ["red", "green", "blue", "yellow", "purple"];

// Accès aux éléments du tableau par index
console.log("Première couleur :", colors[0]); // Premier élément
console.log("Troisième couleur :", colors[2]); // Troisième élément
console.log("Dernière couleur :", colors[colors.length - 1]); // Dernier élément

// Modification des éléments du tableau
colors[1] = "orange"; // Changer le deuxième élément
console.log("Tableau de couleurs modifié :", colors);

// Démo de plage d'index
console.log("Longueur du tableau :", colors.length);

Lorsque vous exécutez ce code, vous verrez la sortie d'exemple suivante :

Première couleur : red
Troisième couleur : blue
Dernière couleur : purple
Tableau de couleurs modifié : ['red', 'orange', 'blue', 'yellow', 'purple']
Longueur du tableau : 5

Points clés sur l'indexation des tableaux :

Les index commencent à 0
Utilisez des crochets carrés [] pour accéder aux éléments
array.length donne le nombre total d'éléments
Vous pouvez modifier les éléments en assignant une nouvelle valeur à un index spécifique
Pour accéder au dernier élément, utilisez array[array.length - 1]

Essayez d'accéder à des éléments en dehors de la plage du tableau pour voir ce qui se passe :

console.log("Accès à un index en dehors de la plage :", colors[10]); // Retourne undefined

Créer un tableau de fruits

Dans cette étape, vous allez créer un tableau de fruits et apprendre à travailler avec celui-ci. Ouvrez le fichier arrays.js dans le répertoire ~/project et ajoutez le code suivant :

// Création d'un tableau de fruits
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];

// Afficher le tableau de fruits complet
console.log("Tableau de fruits :", fruits);

// Ajouter un nouveau fruit à la fin du tableau
fruits.push("grape");
console.log("Fruits après avoir ajouté la grappe :", fruits);

// Créer un tableau avec différents types de fruits
let tropicalFruits = ["pineapple", "coconut", "papaya"];

// Combiner deux tableaux de fruits
let allFruits = fruits.concat(tropicalFruits);
console.log("Tous les fruits :", allFruits);

// Vérifier le nombre de fruits
console.log("Nombre total de fruits :", allFruits.length);

Lorsque vous exécutez ce code, vous verrez la sortie d'exemple suivante :

Tableau de fruits : ['apple', 'banana', 'orange','mango','strawberry']
Fruits après avoir ajouté la grappe : ['apple', 'banana', 'orange','mango','strawberry', 'grape']
Tous les fruits : ['apple', 'banana', 'orange','mango','strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Nombre total de fruits : 9

Points clés sur la création et la manipulation des tableaux de fruits :

Les tableaux peuvent être créés avec plusieurs éléments
Vous pouvez ajouter de nouveaux éléments en utilisant push()
Les tableaux peuvent être combinés en utilisant concat()
La propriété length montre le nombre total d'éléments

Afficher les éléments d'un tableau sur une page web

Dans cette étape, vous allez apprendre à afficher les éléments d'un tableau sur une page web à l'aide de HTML et de JavaScript. Tout d'abord, créez un fichier HTML appelé fruits.html dans le répertoire ~/project :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Affichage du tableau de fruits</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #fruits-list {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Ma collection de fruits</h1>
    <div id="fruits-list"></div>

    <script>
      // Création d'un tableau de fruits
      let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];

      // Récupérer le conteneur de la liste de fruits
      let fruitsList = document.getElementById("fruits-list");

      // Créer une liste non ordonnée pour afficher les fruits
      let ul = document.createElement("ul");

      // Parcourir le tableau de fruits et créer des éléments de liste
      fruits.forEach(function (fruit) {
        let li = document.createElement("li");
        li.textContent = fruit;
        ul.appendChild(li);
      });

      // Ajouter la liste à la page
      fruitsList.appendChild(ul);
    </script>
  </body>
</html>

Cet exemple illustre plusieurs concepts clés :

Création d'une structure HTML
Utilisation de JavaScript pour manipuler le DOM
Affichage des éléments d'un tableau sur une page web
Utilisation de forEach() pour itérer sur les éléments d'un tableau

Lorsque vous ouvrez ce fichier HTML dans un navigateur web, vous verrez une liste de fruits affichée sur la page.

Méthode alternative utilisant innerHTML :

// Méthode alternative pour afficher les fruits
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");

Explorer les opérations de base sur les tableaux

Dans cette étape, vous allez découvrir les opérations courantes sur les tableaux en JavaScript. Ouvrez le fichier arrays.js dans le répertoire ~/project et ajoutez le code suivant :

// Création d'un tableau de nombres
let numbers = [5, 2, 8, 1, 9, 3];

// Ajout d'éléments
numbers.push(10); // Ajoute un élément à la fin
numbers.unshift(0); // Ajoute un élément au début
console.log("Après avoir ajouté des éléments :", numbers);

// Suppression d'éléments
let lastNumber = numbers.pop(); // Supprime le dernier élément
let firstNumber = numbers.shift(); // Supprime le premier élément
console.log("Après avoir supprimé des éléments :", numbers);

// Tri du tableau
numbers.sort((a, b) => a - b); // Tri par ordre croissant
console.log("Tableau trié :", numbers);

// Inversion du tableau
numbers.reverse();
console.log("Tableau inversé :", numbers);

// Recherche d'éléments
let index = numbers.indexOf(8);
console.log("Index de 8 :", index);

// Découpage du tableau
let slicedNumbers = numbers.slice(1, 4);
console.log("Tableau découpé :", slicedNumbers);

// Filtrer le tableau
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("Nombres pairs :", evenNumbers);

// Mappage du tableau
let squaredNumbers = numbers.map((num) => num * num);
console.log("Nombres carrés :", squaredNumbers);

Lorsque vous exécutez ce code, vous verrez la sortie d'exemple suivante :

Après avoir ajouté des éléments : [0, 5, 2, 8, 1, 9, 3, 10]
Après avoir supprimé des éléments : [5, 2, 8, 1, 9, 3, 10]
Tableau trié : [1, 2, 3, 5, 8, 9, 10]
Tableau inversé : [10, 9, 8, 5, 3, 2, 1]
Index de 8 : 2
Tableau découpé : [9, 8, 5]
Nombres pairs : [10, 8, 2]
Nombres carrés : [100, 81, 64, 25, 9, 4, 1]

Opérations clés sur les tableaux démontrées :

push() et unshift() pour ajouter des éléments
pop() et shift() pour supprimer des éléments
sort() pour ordonner les éléments
reverse() pour inverser l'ordre du tableau
indexOf() pour trouver la position d'un élément
slice() pour extraire une partie d'un tableau
filter() pour créer un nouveau tableau avec des éléments spécifiques
map() pour transformer les éléments d'un tableau

Sommaire

Dans ce laboratoire, les participants ont exploré les bases du travail avec les tableaux en JavaScript, apprenant à créer, initialiser et manipuler des structures de données de tableau. Le laboratoire a couvert des concepts clés tels que la définition de tableaux en utilisant des crochets et le constructeur Array, démontrant la capacité de créer des tableaux avec différents types d'éléments, y compris des nombres, des chaînes de caractères et des types de données mixtes.

Les participants ont acquis des compétences pratiques dans l'accès aux éléments d'un tableau par indexation, comprenant que les index de tableau commencent à 0, et ont appris à effectuer des opérations de base sur les tableaux. L'approche pratique a permis aux apprenants de pratiquer la création de tableaux, de consigner leur contenu et d'explorer la flexibilité des tableaux JavaScript dans le stockage et l'organisation des données de manière efficace.