Les fonctions pour manipuler les tableaux d'objets en JavaScript

Le par Anthony Domps.
Fonction Retour Utilisation
filter() Un tableau avec les éléments filtrés Une collection d'éléments correspondant à un critère.
some() true ou false Vérifier l'existence de conditions dans le tableau.
find() Le premier élément qui correspond ou undefined Pour trouver un seul élément correspondant.
map() Un tableau des éléments modifiés Pour transformer les éléments du tableau.
every() true ou false Vérifier si tous les éléments satisfont une condition.
reduce() Une valeur unique Pour réduire le tableau à une seule valeur (comme un total).

Fonction filter()

  • But : Créer un nouveau tableau avec tous les éléments qui passent un test (fournis dans une fonction callback).
  • Retour : Un tableau contenant tous les éléments qui satisfont la condition. Si aucun élément ne correspond, un tableau vide est retourné.
  • Usage : Idéal pour filtrer des objets ou des tableaux en fonction de conditions précises.
const budget = [
  { id: 1, category: 'Food', amount: 50 },
  { id: 2, category: 'Transport', amount: 30 },
  { id: 3, category: 'Food', amount: 20 },
  { id: 4, category: 'Entertainment', amount: 100 },
];

const foodExpenses = budget.filter(expense => expense.category === 'Food');
console.log(foodExpenses);
// Output: [{ id: 1, category: 'Food', amount: 50 }, { id: 3, category: 'Food', amount: 20 }]

Fonction some()

  • But : Vérifie si au moins un élément d'un tableau satisfait une condition.
  • Retour : true si au moins un élément correspond à la condition, sinon false.
  • Usage : Idéal pour vérifier l'existence d'une condition sans avoir besoin de récupérer tous les éléments.
const hasFoodExpenses = budget.some(expense => expense.category === 'Food');
console.log(hasFoodExpenses); 
// Output: true

Fonction find()

  • But : Retourne le premier élément qui satisfait une condition.
  • Retour : L'élément trouvé ou undefined si aucun élément ne correspond.
  • Usage : Idéal pour obtenir un seul objet qui correspond à un ou plusieurs critères.
const foodExpense = budget.find(expense => expense.category === 'Food' && expense.amount > 10);
console.log(foodExpense);
// Output: { id: 1, category: 'Food', amount: 50 }

Fonction map()

  • But : Crée un nouveau tableau avec les résultats de l'appel d'une fonction sur chaque élément du tableau.
  • Retour : Un tableau des éléments transformés par la fonction callback.
  • Usage : Idéal pour transformer ou manipuler des objets/valeurs dans un tableau.
const expenseNames = budget.map(expense => expense.category);
console.log(expenseNames);
// Output: ["Food", "Transport", "Food", "Entertainment"]

Fonction every()

  • But : Vérifie si tous les éléments d'un tableau satisfont une condition.
  • Retour : true si tous les éléments satisfont la condition, sinon false.
  • Usage : Idéal pour vérifier une condition globale sur tous les éléments d'un tableau.
const allFoodExpenses = budget.every(expense => expense.category === 'Food');
console.log(allFoodExpenses);
// Output: false

Fonction reduce()

  • But : Applique une fonction de réduction sur chaque élément d'un tableau pour obtenir une valeur unique.
  • Retour : Une valeur qui résulte de la réduction des éléments du tableau.
  • Usage : Idéal pour effectuer des calculs comme le total.
const totalBudget = budget.reduce((sum, expense) => sum + expense.amount, 0);
console.log(totalBudget);
// Output: 200