Manipuler les tableaux avec les méthodes de tableaux JavaScript

Introduction

Dans ce laboratoire, les étudiants exploreront les techniques essentielles de manipulation des tableaux JavaScript grâce à une expérience d'apprentissage pratique complète. Le laboratoire couvre les méthodes clés des tableaux telles que slice(), unshift(), shift(), le tri et la transformation des tableaux, fournissant des compétences pratiques pour gérer et modifier les structures de données de tableau.

Les participants apprendront à extraire des éléments de tableau à l'aide de slice(), à ajouter des éléments au début d'un tableau avec unshift(), à supprimer le premier élément à l'aide de shift() et à effectuer le tri et l'inversion d'un tableau. En travaillant sur des exemples de codage pratiques, les apprenants acqueront une compréhension solide de la manière d'utiliser efficacement les tableaux en JavaScript, améliorant leurs capacités de programmation et de résolution de problèmes.

Extraire des éléments d'un tableau

Dans cette étape, vous allez apprendre à utiliser la méthode slice() pour extraire une partie d'un tableau en JavaScript. La méthode slice() vous permet de créer un nouveau tableau en sélectionnant des éléments d'un tableau existant sans modifier le tableau d'origine.

Commençons par créer un tableau d'échantillonnage et pratiquons l'extraction de ses éléments. Ouvrez le WebIDE et créez un nouveau fichier appelé array-slice.js dans le répertoire ~/project.

// Créer un tableau de fruits
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];

// Extraire les trois premiers éléments
const slicedFruits1 = fruits.slice(0, 3);
console.log("Les trois premiers fruits :", slicedFruits1);

// Extraire les éléments à partir de l'index 2 jusqu'à la fin
const slicedFruits2 = fruits.slice(2);
console.log("Fruits à partir de l'index 2 :", slicedFruits2);

// Extraire les deux derniers éléments en utilisant un index négatif
const slicedFruits3 = fruits.slice(-2);
console.log("Les deux derniers fruits :", slicedFruits3);

Maintenant, exécutez le script pour voir les résultats :

node ~/project/array-slice.js

Sortie d'exemple :

Les trois premiers fruits : [ 'apple', 'banana', 'cherry' ]
Fruits à partir de l'index 2 : [ 'cherry', 'date', 'elderberry' ]
Les deux derniers fruits : [ 'date', 'elderberry' ]

Points clés sur slice() :

Le premier argument est l'index de début (inclusif)
Le second argument est l'index de fin (exclusif)
Si aucun index de fin n'est fourni, il extrait jusqu'à la fin du tableau
Les indices négatifs sont comptés à partir de la fin du tableau
Le tableau d'origine reste inchangé

Ajouter des éléments au début d'un tableau avec unshift()

Dans cette étape, vous allez apprendre à utiliser la méthode unshift() pour ajouter un ou plusieurs éléments au début d'un tableau en JavaScript. La méthode unshift() modifie le tableau d'origine en insérant des éléments au début et renvoie la nouvelle longueur du tableau.

Créez un nouveau fichier appelé array-unshift.js dans le répertoire ~/project et ajoutez le code suivant :

// Créer un tableau initial de fruits
let fruits = ["banana", "cherry", "date"];
console.log("Tableau original :", fruits);

// Ajouter un seul élément au début du tableau
fruits.unshift("apple");
console.log("Après avoir ajouté un élément :", fruits);

// Ajouter plusieurs éléments au début du tableau
fruits.unshift("grape", "kiwi");
console.log("Après avoir ajouté plusieurs éléments :", fruits);

// Stockez la nouvelle longueur du tableau
let newLength = fruits.unshift("orange");
console.log("Nouvelle longueur du tableau :", newLength);
console.log("Tableau final :", fruits);

Maintenant, exécutez le script pour voir les résultats :

node ~/project/array-unshift.js

Sortie d'exemple :

Tableau original : [ 'banana', 'cherry', 'date' ]
Après avoir ajouté un élément : [ 'apple', 'banana', 'cherry', 'date' ]
Après avoir ajouté plusieurs éléments : [ 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
Nouvelle longueur du tableau : 7
Tableau final : [ 'orange', 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]

Points clés sur unshift() :

Ajoute un ou plusieurs éléments au début d'un tableau
Modifie le tableau d'origine
Renvoie la nouvelle longueur du tableau
Peut ajouter plusieurs éléments dans un seul appel
Décale les éléments existants vers des indices plus élevés

Supprimer le premier élément avec shift()

Dans cette étape, vous allez apprendre à utiliser la méthode shift() pour supprimer le premier élément d'un tableau en JavaScript. La méthode shift() modifie le tableau d'origine en supprimant le premier élément et renvoie cet élément supprimé.

Créez un nouveau fichier appelé array-shift.js dans le répertoire ~/project et ajoutez le code suivant :

// Créer un tableau initial de langages de programmation
let languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
console.log("Tableau original :", languages);

// Supprimer et stocker le premier élément
let removedLanguage = languages.shift();
console.log("Langage supprimé :", removedLanguage);
console.log("Tableau après le décalage :", languages);

// Supprimer plusieurs éléments en appelant shift() plusieurs fois
let secondRemovedLanguage = languages.shift();
console.log("Second langage supprimé :", secondRemovedLanguage);
console.log("Tableau après le second décalage :", languages);

// Montrer ce qui se passe avec un tableau vide
let emptyArray = [];
let result = emptyArray.shift();
console.log("Décalage d'un tableau vide :", result);
console.log("Tableau vide restant :", emptyArray);

Maintenant, exécutez le script pour voir les résultats :

node ~/project/array-shift.js

Sortie d'exemple :

Tableau original : [ 'JavaScript', 'Python', 'Java', 'C++', 'Ruby' ]
Langage supprimé : JavaScript
Tableau après le décalage : [ 'Python', 'Java', 'C++', 'Ruby' ]
Second langage supprimé : Python
Tableau après le second décalage : [ 'Java', 'C++', 'Ruby' ]
Décalage d'un tableau vide : undefined
Tableau vide restant : []

Points clés sur shift() :

Supprime le premier élément d'un tableau
Modifie le tableau d'origine
Renvoie l'élément supprimé
Renvoie undefined si le tableau est vide
Diminue la longueur du tableau de 1

Trier et inverser les éléments d'un tableau

Dans cette étape, vous allez apprendre à utiliser les méthodes sort() et reverse() pour manipuler les éléments d'un tableau en JavaScript. Ces méthodes offrent des façons simples d'organiser et de réordonner le contenu d'un tableau.

Créez un nouveau fichier appelé array-sort-reverse.js dans le répertoire ~/project et ajoutez le code suivant :

// Créer des tableaux pour la démonstration du tri
let numbers = [5, 2, 9, 1, 7];
let fruits = ["banana", "apple", "cherry", "date"];

// Tri par défaut (lexicographique pour les chaînes, croissant pour les nombres)
console.log("Nombres originaux :", numbers);
numbers.sort();
console.log("Tri par défaut :", numbers);

// Tri numérique nécessite une fonction de comparaison
numbers = [5, 2, 9, 1, 7];
numbers.sort((a, b) => a - b);
console.log("Tri numérique :", numbers);

// Tri inverse
console.log("\nFruits originaux :", fruits);
fruits.sort().reverse();
console.log("Trié et inversé :", fruits);

// Inverser un tableau sans le trier
let colors = ["red", "green", "blue", "yellow"];
console.log("\nCouleurs originelles :", colors);
colors.reverse();
console.log("Couleurs inversées :", colors);

Maintenant, exécutez le script pour voir les résultats :

node ~/project/array-sort-reverse.js

Sortie d'exemple :

Nombres originaux : [ 5, 2, 9, 1, 7 ]
Tri par défaut : [ 1, 2, 5, 7, 9 ]
Tri numérique : [ 1, 2, 5, 7, 9 ]

Fruits originaux : [ 'banana', 'apple', 'cherry', 'date' ]
Trié et inversé : [ 'date', 'cherry', 'banana', 'apple' ]

Couleurs originelles : [ 'red', 'green', 'blue', 'yellow' ]
Couleurs inversées : [ 'yellow', 'blue', 'green','red' ]

Points clés sur sort() et reverse() :

sort() modifie le tableau d'origine
sort() par défaut convertit les éléments en chaînes et trie lexicographiquement
Utilisez une fonction de comparaison pour le tri numérique ou personnalisé
reverse() inverse l'ordre des éléments dans le tableau
Les deux méthodes fonctionnent in-place, modifiant le tableau d'origine

Transformer et analyser des tableaux

Dans cette étape, vous allez explorer des méthodes puissantes de tableaux telles que map(), filter() et reduce() pour transformer et analyser les éléments d'un tableau en JavaScript. Ces méthodes offrent des façons élégantes de manipuler et d'extraire des informations à partir de tableaux.

Créez un nouveau fichier appelé array-transform.js dans le répertoire ~/project et ajoutez le code suivant :

// Tableau d'échantillonnage de notes d'étudiants
const scores = [85, 92, 78, 65, 90, 55, 88];

// Utiliser map() pour créer un nouveau tableau avec des valeurs modifiées
const adjustedScores = scores.map((score) => score + 5);
console.log("Notes originales :", scores);
console.log("Notes ajustées :", adjustedScores);

// Utiliser filter() pour créer un tableau de notes validantes (au-dessus de 70)
const passingScores = scores.filter((score) => score >= 70);
console.log("Notes validantes :", passingScores);

// Utiliser reduce() pour calculer la somme totale des notes
const totalScore = scores.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / scores.length;
console.log("Score total :", totalScore);
console.log("Score moyen :", averageScore.toFixed(2));

// Combiner les méthodes : trouver la moyenne des notes validantes
const averagePassingScore =
  passingScores.reduce((sum, score) => sum + score, 0) / passingScores.length;
console.log("Score moyen validant :", averagePassingScore.toFixed(2));

// Transformer un tableau de noms
const names = ["alice", "bob", "charlie"];
const capitalizedNames = names.map(
  (name) => name.charAt(0).toUpperCase() + name.slice(1)
);
console.log("Noms originaux :", names);
console.log("Noms en majuscules :", capitalizedNames);

Maintenant, exécutez le script pour voir les résultats :

node ~/project/array-transform.js

Sortie d'exemple :

Notes originales : [ 85, 92, 78, 65, 90, 55, 88 ]
Notes ajustées : [ 90, 97, 83, 70, 95, 60, 93 ]
Notes validantes : [ 85, 92, 78, 90, 88 ]
Score total : 553
Score moyen : 79.00
Score moyen validant : 86.60
Noms originaux : [ 'alice', 'bob', 'charlie' ]
Noms en majuscules : [ 'Alice', 'Bob', 'Charlie' ]

Points clés sur les méthodes de transformation de tableaux :

map() : Crée un nouveau tableau en transformant chaque élément
filter() : Crée un nouveau tableau avec les éléments qui passent un test
reduce() : Récupère un tableau en une seule valeur grâce à une fonction de rappel
Ces méthodes ne modifient pas le tableau d'origine
Peuvent être chaînées pour des transformations complexes

Sommaire

Dans ce laboratoire, les participants ont exploré diverses techniques de manipulation de tableaux JavaScript utilisant des méthodes intégrées. Le laboratoire s'est concentré sur l'apprentissage de la façon de découper des éléments de tableau à l'aide de la méthode slice(), qui permet d'extraire des parties spécifiques d'un tableau sans modifier le tableau d'origine. Les participants ont pratiqué la création de nouveaux tableaux en sélectionnant des éléments à l'aide de plages d'indices différentes, y compris des indices positifs et négatifs.

Le laboratoire a également présenté des méthodes telles que unshift() pour ajouter des éléments au début d'un tableau, shift() pour supprimer le premier élément, et des techniques de tri et d'inversion des éléments de tableau. Grâce à des exercices de codage pratiques, les apprenants ont acquis une expérience pratique dans la transformation et l'analyse de tableaux, en comprenant comment ces méthodes peuvent modifier et extraire efficacement des données des structures de tableau en JavaScript.