Dans le développement Web moderne, la manipulation des données est cruciale pour garantir des applications fluides et réactives. Que vous filtriez des produits, recherchiez des éléments spécifiques ou transformiez des données pour les afficher, une manipulation efficace des données garantit le bon fonctionnement de votre application et offre une expérience utilisateur exceptionnelle.

JavaScript fournit plusieurs méthodes intégrées telles que rechercher, mapper et filtrer pour les tâches courantes. Cependant, la méthode polyvalente de réduction se distingue par sa capacité à effectuer toutes ces opérations et bien plus encore. Avec réduire, vous pouvez accumuler des valeurs, transformer des tableaux, aplatir des structures imbriquées et créer des transformations de données complexes de manière concise.

Bien que réduire puisse répliquer d'autres méthodes de tableau, ce n'est pas toujours le choix le plus efficace pour des tâches simples. Les méthodes telles que map et filter sont optimisées pour des objectifs spécifiques et peuvent être plus rapides pour des opérations simples. Cependant, comprendre comment utiliser la réduction peut vous aider à trouver de nombreuses façons d'améliorer votre code et de le rendre plus facile à comprendre.

Dans cet article, nous approfondirons la méthode de réduction, explorerons divers cas d'utilisation et discuterons des meilleures pratiques pour maximiser son potentiel.

Aperçu de l'article

• Comprendre la méthode de réduction

• JavaScript réduire la syntaxe

• Exemple de réduction Javascript

• Divers cas d'utilisation de la méthode de réduction

• Remplacement de la carte, du filtre et de la recherche JavaScript par réduire

• conclusion

Comprendre la méthode de réduction

La méthode Javascript réduire applique une fonction à un accumulateur et à chaque élément du tableau (de gauche à droite) pour le réduire à une valeur unique. Cette valeur unique peut être une chaîne, un nombre, un objet ou un tableau.

Fondamentalement, la méthode de réduction prend un tableau et le condense en une seule valeur en appliquant à plusieurs reprises une fonction qui combine le résultat accumulé avec l'élément actuel du tableau.

JavaScript réduit la syntaxe

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

Paramètres:

callback : La fonction à exécuter sur chaque élément, qui prend les arguments suivants :

accumulateur : la valeur accumulée précédemment renvoyée lors du dernier appel du rappel, ou initialValue, si elle est fournie.

currentValue : l'élément actuel en cours de traitement dans le tableau.

index (facultatif) : l'index de l'élément actuel en cours de traitement dans le tableau.

array (facultatif) : la réduction du tableau a été appelée.

initialValue : une valeur à utiliser comme premier argument du premier appel du rappel. Si aucune valeur initiale n'est fournie, le premier élément (array[0]) du tableau sera utilisé comme valeur initiale de l'accumulateur et le rappel ne sera pas exécuté sur le premier élément.

Exemple de réduction Javascript

Voici un exemple de base d'utilisation de la méthode de réduction javascript

Utiliser JavaScript réduire à Sum

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

Dans cet exemple, réduire ajoute chaque nombre du tableau à l'accumulateur (acc). En commençant par une valeur initiale de 0, il se déroule comme suit :

• (0 1) -> 1

• (1 2) -> 3

• (3 3) -> 6

• (6 4) -> 10

Divers cas d'utilisation de la méthode réduire

La méthode de réduction est très polyvalente et peut être appliquée à un large éventail de scénarios. Voici quelques cas d'utilisation courants avec des explications et des extraits de code.

Réduire un tableau d'objets

Supposons que vous disposiez d'un tableau d'objets et que vous souhaitiez résumer une propriété particulière.

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 750 }
];


const totalPrice = products.reduce((acc, curr) => acc   curr.price, 0);
console.log(totalPrice); // Output: 2250

Dans cet exemple, réduisez les itérations sur chaque objet produit, en ajoutant la propriété price à l'accumulateur (acc), qui commence à 0.

Réduire un tableau en objet

Vous pouvez utiliser réduire pour transformer un tableau en objet. Cela peut s'avérer utile lorsque vous souhaitez regrouper un tableau en utilisant sa propriété

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' },
  { name: 'Banana', category: 'Fruit' }
];

const groupedItems = items.reduce((acc, curr) => {
  if (!acc[curr.category]) {
    acc[curr.category] = [];
  }
  acc[curr.category].push(curr.name);
  return acc;
}, {});

console.log(groupedItems);
// Output: { Fruit: ['Apple', 'Banana'], Vegetable: ['Carrot'] }

Cet exemple regroupe les éléments par catégorie. Pour chaque élément, il vérifie si la catégorie existe déjà dans l'accumulateur (acc). Sinon, il initialise un tableau pour cette catégorie, puis ajoute le nom de l'élément au tableau.

Aplatir un tableau de tableaux

La méthode de réduction peut aplatir un tableau de tableaux en un seul tableau, comme indiqué ci-dessous

const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flatArray = nestedArrays.reduce((acc, curr) => acc.concat(curr), []);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Ici, réduire concatène chaque tableau imbriqué (curr) à l'accumulateur (acc), qui commence comme un tableau vide.

Suppression des doublons d'un tableau

La méthode de réduction peut également être utilisée pour supprimer les doublons d'un tableau

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

const uniqueNumbers = numbers.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

Remplacement de la carte, du filtre et de la recherche JavaScript par réduire

La méthode de réduction est incroyablement polyvalente et peut reproduire les fonctionnalités d'autres méthodes de tableau telles que map, filter et find. Même si ce n’est pas toujours l’option la plus performante, il est utile de comprendre comment réduire peut être utilisé dans ces scénarios. Voici des exemples montrant comment réduire peut remplacer ces méthodes.

Utilisation de réduire pour remplacer la carte

La méthode map crée un nouveau tableau en appliquant une fonction à chaque élément du tableau d'origine. Cela peut être reproduit avec réduire.

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

const doubled = numbers.reduce((acc, curr) => {
  acc.push(curr * 2);
  return acc;
}, []);

console.log(doubled); // Output: [2, 4, 6, 8]

Dans cet exemple, la réduction parcourt chaque nombre, le double et place le résultat dans le tableau accumulateur (acc).

Utilisation de la réduction pour remplacer le filtre

La méthode filter crée un nouveau tableau avec des éléments qui réussissent un test implémenté par une fonction fournie. Ceci peut également être réalisé avec réduire.

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

const evens = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(evens); // Output: [2, 4, 6]

Ici, réduisez les vérifications si le nombre actuel (curr) est pair. Si c'est le cas, le numéro est ajouté au tableau d'accumulateurs (acc).

Utilisation de la réduction pour remplacer la recherche

La méthode find renvoie le premier élément d'un tableau qui satisfait une fonction de test fournie. réduire peut également être utilisé à cette fin. Cela peut s'avérer utile pour trouver le premier nombre pair d'un tableau

const numbers = [1, 3, 5, 6, 7, 8];

const firstEven = numbers.reduce((acc, curr) => {
  if (acc !== undefined) return acc;
  return curr % 2 === 0 ? curr : undefined;
}, undefined);

console.log(firstEven); // Output: 6

Conclusion

La méthode de réduction en JavaScript est un outil polyvalent capable de gérer un large éventail de tâches de manipulation de données, dépassant les capacités de cartographie, de filtrage et de recherche. Même si ce n'est pas toujours le plus efficace pour des tâches simples, la maîtrise de la réduction ouvre de nouvelles possibilités d'optimisation et de simplification de votre code. Comprendre et utiliser efficacement la réduction peut grandement améliorer votre capacité à gérer des transformations de données complexes, ce qui en fait un élément crucial de votre boîte à outils JavaScript.