Array methods en JavaScript

Pourquoi Array methods en JavaScript ?

Les array methods sont des méthodes intégrées à JavaScript qui permettent d'effectuer diverses opérations sur les tableaux de données. Ils offrent une façon concise et efficace de manipuler et transformer les données stockées dans un tableau.

Un cas d'usage concret serait de filtrer une liste de produits pour trouver ceux qui sont en promotion, ou de calculer le total des prix des articles dans un panier.

Prerequis

• Connaissances de base de JavaScript
• Compréhension des structures de contrôle (if/else, for, while)
• Connaissance des fonctions et des callbacks

Pour suivre ce tutoriel, il n'y a pas besoin d'outils supplémentaires à installer.

Concepts fondamentaux

1. forEach()

La méthode forEach() permet d'exécuter une fonction pour chaque élément du tableau.

// Exemple de code
const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});

2. map()

La méthode map() crée un nouveau tableau en appliquant une fonction à chaque élément du tableau original.

// Exemple de code
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6]

3. filter()

La méthode filter() crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction.

// Exemple de code
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

4. reduce()

La méthode reduce() applique une fonction à un accumulateur et chaque élément du tableau (de gauche à droite) pour réduire le tableau à une seule valeur.

// Exemple de code
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 10

5. find()

La méthode find() renvoie le premier élément du tableau qui satisfait une condition spécifiée.

// Exemple de code
const numbers = [1, 2, 3, 4];
const foundNumber = numbers.find(function(number) {
  return number > 2;
});
console.log(foundNumber); // 3

6. every()

La méthode every() teste si tous les éléments du tableau passent le test implémenté par la fonction.

// Exemple de code
const numbers = [1, 2, 3, 4];
const allPositive = numbers.every(function(number) {
  return number > 0;
});
console.log(allPositive); // true

7. some()

La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction.

// Exemple de code
const numbers = [1, 2, -3, 4];
const hasNegative = numbers.some(function(number) {
  return number < 0;
});
console.log(hasNegative); // true

8. sort()

La méthode sort() trie les éléments d'un tableau en place et renvoie le tableau.

// Exemple de code
const fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry']

Mise en pratique : projet fil rouge

Objectif du projet : Un gestionnaire de tâches simple

Nous allons créer un gestionnaire de tâches qui permet d'ajouter, supprimer et afficher des tâches.

Structure des fichiers

task-manager/
├── index.js
└── tasks.json

Étapes pour le projet

1. Initialisation du projet

   Créez un nouveau fichier index.js.

   touch index.js
   

2. Définition des tâches dans tasks.json

   Créez un fichier tasks.json avec quelques tâches initiales.

   {
     "tasks": [
       { "id": 1, "title": "Faire les courses", "completed": false },
       { "id": 2, "title": "Nettoyer la maison", "completed": true }
     ]
   }
   

3. Lecture des tâches depuis tasks.json

   Dans index.js, utilisez Node.js pour lire le contenu du fichier JSON.

   // index.js
   const fs = require('fs');
   
   function loadTasks() {
     const rawData = fs.readFileSync('tasks.json');
     return JSON.parse(rawData).tasks;
   }
   
   const tasks = loadTasks();
   console.log(tasks);
   

4. Ajout d'une tâche

   Ajoutez une fonction pour ajouter une nouvelle tâche.

   // index.js
   function addTask(title) {
     const newTask = { id: tasks.length + 1, title, completed: false };
     tasks.push(newTask);
     saveTasks();
   }
   
   function saveTasks() {
     fs.writeFileSync('tasks.json', JSON.stringify({ tasks }));
   }
   

5. Affichage des tâches

   Ajoutez une fonction pour afficher toutes les tâches.

   // index.js
   function displayTasks() {
     console.log('Tâches :');
     tasks.forEach(task => {
       console.log(`${task.id} - ${task.title} (statut: ${task.completed ? 'terminée' : 'en cours'})`);
     });
   }
   

6. Suppression d'une tâche

   Ajoutez une fonction pour supprimer une tâche par son ID.

   // index.js
   function deleteTask(id) {
     const taskIndex = tasks.findIndex(task => task.id === id);
     if (taskIndex !== -1) {
       tasks.splice(taskIndex, 1);
       saveTasks();
     }
   }
   

7. Menu interactif

   Ajoutez un menu pour permettre aux utilisateurs d'ajouter, afficher et supprimer des tâches.

   // index.js
   function showMenu() {
     console.log('Gestionnaire de Tâches');
     console.log('1. Afficher les tâches');
     console.log('2. Ajouter une tâche');
     console.log('3. Supprimer une tâche');
     console.log('4. Quitter');
   
     const choice = readlineSync.question('Choisissez une option : ');
   
     switch (choice) {
       case '1':
         displayTasks();
         break;
       case '2':
         const title = readlineSync.question('Entrez le titre de la tâche : ');
         addTask(title);
         console.log('Tâche ajoutée avec succès.');
         break;
       case '3':
         const idToDelete = parseInt(readlineSync.question('Entrez l\'ID de la tâche à supprimer : '));
         deleteTask(idToDelete);
         console.log('Tâche supprimée avec succès.');
         break;
       case '4':
         process.exit(0);
         break;
       default:
         console.log('Option invalide. Veuillez choisir une option valide.');
     }
   }
   
   const readlineSync = require('readline-sync');
   while (true) {
     showMenu();
   }
   

Erreurs frequentes et debugging

1. Erreur : Cannot read property 'length' of undefined

// ❌ Mauvais
const tasks = loadTasks();
console.log(tasks.length); // Si loadTasks() retourne undefined, ca plante ici

// ✅ Correct
const tasks = loadTasks() || [];
console.log(tasks.length);

2. Erreur : TypeError: Cannot read property 'forEach' of null

// ❌ Mauvais
const tasks = loadTasks();
tasks.forEach(task => { /* ... */ }); // Si loadTasks() retourne null, ca plante ici

// ✅ Correct
const tasks = loadTasks() || [];
tasks.forEach(task => { /* ... */ });

3. Erreur : SyntaxError: Unexpected token '}'

// ❌ Mauvais
const rawData = fs.readFileSync('tasks.json');
const tasks = JSON.parse(rawData).tasks; // Si le format du fichier est invalide, ca plante ici

// ✅ Correct
try {
  const rawData = fs.readFileSync('tasks.json');
  const data = JSON.parse(rawData);
  if (data && Array.isArray(data.tasks)) {
    const tasks = data.tasks;
    console.log(tasks);
  } else {
    console.error('Le format du fichier est invalide.');
  }
} catch (error) {
  console.error('Erreur lors de la lecture du fichier :', error);
}

Pour aller plus loin

1. Utilisation de l'API Fetch pour lire des tâches depuis un serveur

Vous pouvez utiliser l'API Fetch pour lire les tâches à partir d'un serveur distant.

// index.js
async function loadTasks() {
  try {
    const response = await fetch('https://api.example.com/tasks');
    const data = await response.json();
    return data.tasks;
  } catch (error) {
    console.error('Erreur lors de la récupération des tâches :', error);
    return [];
  }
}

2. Utilisation du module lodash pour simplifier les opérations sur les tableaux

Le module lodash offre de nombreuses fonctions utilitaires pour manipuler les tableaux.

npm install lodash
javascript
// index.js
const _ = require('lodash');

function displayTasks() {
  console.log('Tâches :');
  _.forEach(tasks, task => {
    console.log(`${task.id} - ${task.title} (statut: ${task.completed ? 'terminée' : 'en cours'})`);
  });
}

3. Création d'une application web avec React pour afficher les tâches

Vous pouvez utiliser React pour créer une interface utilisateur graphique.

npx create-react-app task-manager
cd task-manager

Ajoutez un composant pour afficher les tâches.

// src/App.js
import React, { useEffect, useState } from 'react';

function App() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    async function fetchTasks() {
      try {
        const response = await fetch('https://api.example.com/tasks');
        const data = await response.json();
        setTasks(data.tasks);
      } catch (error) {
        console.error('Erreur lors de la récupération des tâches :', error);
      }
    }

    fetchTasks();
  }, []);

  return (
    <div>
      <h1>Gestionnaire de Tâches</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            {task.title} - {task.completed ? 'Terminée' : 'En cours'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Défi pratique

Implémentez une fonction filterTasks qui permet de filtrer les tâches en fonction d'un terme de recherche.

// index.js
function filterTasks(query) {
  return tasks.filter(task => task.title.toLowerCase().includes(query.toLowerCase()));
}

Utilisez cette fonction dans le menu pour permettre aux utilisateurs de rechercher des tâches.

// index.js
case '1':
  const query = readlineSync.question('Entrez un terme de recherche : ');
  const filteredTasks = filterTasks(query);
  displayTasks(filteredTasks);
  break;

Ce tutoriel a couvert les principaux array methods en JavaScript et a montré comment les utiliser pour créer une application simple de gestion de tâches. Les étapes sont détaillées, avec des exemples de code fonctionnels et des conseils sur le debogage commun. N'oubliez pas de pratiquer régulièrement pour renforcer votre compréhension et votre maîtrise des concepts.