Tableaux (Arrays)

Les tableaux sont des collections ordonnées d'éléments. En React, vous les utiliserez constamment !

Création et accès

javascript

const fruits = ['pomme', 'banane', 'orange'];

// Accès par index (commence à 0)
console.log(fruits[0]); // 'pomme'
console.log(fruits[1]); // 'banane'

// Taille du tableau
console.log(fruits.length); // 3

Méthodes de base

javascript

const numbers = [1, 2, 3];

// Ajouter à la fin
numbers.push(4); // [1, 2, 3, 4]

// Retirer le dernier
numbers.pop(); // [1, 2, 3]

// Vérifier la présence
numbers.includes(2); // true

// Trouver l'index
numbers.indexOf(2); // 1

// Vérifier si c'est un tableau
Array.isArray(numbers); // true

Méthodes essentielles pour React ⭐

Ces méthodes sont cruciales pour React car elles créent de nouveaux tableaux sans modifier l'original (immutabilité).

.map() - Transformer

Transforme chaque élément et retourne un nouveau tableau.

javascript

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(numbers); // [1, 2, 3] (inchangé)

En React

.map() est partout en React pour afficher des listes !

javascript

const users = ['Alice', 'Bob', 'Charlie'];

return (
  <ul>
    {users.map(user => (
      <li key={user}>{user}</li>
    ))}
  </ul>
);

.filter() - Filtrer

Garde seulement les éléments qui passent le test.

javascript

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

.find() - Premier match

Retourne le premier élément qui correspond.

javascript

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const bob = users.find(user => user.id === 2);
console.log(bob); // { id: 2, name: 'Bob' }

.some() / .every()

javascript

const numbers = [1, 2, 3, 4];

// Au moins un élément > 2 ?
numbers.some(n => n > 2); // true

// Tous les éléments > 0 ?
numbers.every(n => n > 0); // true

.reduce() - Accumuler

javascript

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Exercice : Pratique : Méthodes de tableaux

Facile

Avec ce tableau de produits :

javascript

const products = [
{ name: 'Laptop', price: 1000 },
{ name: 'Mouse', price: 25 },
{ name: 'Keyboard', price: 75 }
];

Extraire tous les noms dans un tableau
Filtrer les produits à moins de 100€
Calculer le prix total

Astuce : Utilisez .map(), .filter() et .reduce()

Tableau de syntaxe

| Méthode | Usage | Retourne | Mutable ? | |---------|-------|----------|-----------| | .map() | Transformer chaque élément | Nouveau tableau | ❌ Non | | .filter() | Filtrer des éléments | Nouveau tableau | ❌ Non | | .find() | Trouver un élément | Élément ou undefined | ❌ Non | | .some() | Tester au moins un | boolean | ❌ Non | | .every() | Tester tous | boolean | ❌ Non | | .reduce() | Accumuler/réduire | Une valeur | ❌ Non | | .push() | Ajouter à la fin | Nouvelle longueur | ✅ Oui | | .pop() | Retirer le dernier | Élément retiré | ✅ Oui |

Attention

En React, privilégiez les méthodes immutables (.map(), .filter(), etc.) au lieu de .push() ou .pop() qui modifient le tableau original.