Maîtriser la fonction reduce en JavaScript : Une puissance souvent sous-estimée-js tutoriel-php.cn

Maîtriser la fonction reduce en JavaScript : Une puissance souvent sous-estimée

Linda Hamilton

Libérer： 2025-01-29 04:30:09

original

526 Les gens l'ont consulté

Maîtriser la fonction reduce en JavaScript : Une puissance souvent sous-estimée

Cet article traite de la fonction

de JavaScript en profondeur, qui est une méthode de compréhension puissante mais souvent malentente. Nous expliquerons pourquoi c'est mieux que reduce ou map et d'autres méthodes dans certains cas, ainsi que la façon dont il effectue des opérations complexes efficacement. Pour illustrer sa fonction, nous avons appliqué à un cas pratique: filter gérer la liste des médecins reduce. comprendre fonction

La méthode peut simplifier le tableau dans un format unique ou plus compliqué. Sa grammaire est la suivante: `reduce`

Les paramètres de

reduce

Accumulateur

<code class="language-javascript">array.reduce((accumulator, currentValue, index, array) => {
    // 逻辑
    return accumulator;
}, initialValue);</code>

Copier après la connexion

: La valeur accumulée à chaque étape.

`reduce` currentValue

: Les éléments sont actuellement traités dans le tableau.

index : index (facultatif) de l'élément actuel.

Array

: L'ensemble du tableau (facultatif). initialValue

:: la valeur initiale de: accumulateur.

pourquoi peut être meilleur que

Bien que et

soient très utiles pour les tableaux de conversion ou de filtre, ils ne sont pas aussi fonctionnels que

. Voici quelques-unes des scènes plus supérieures:

combinant l'opération

: utilisez

, vous pouvez terminer la conversion et le filtrage en une étape pour éviter plusieurs itérations du tableau. `reduce` `map` Aggrégats complexes `filter`:

Permet de créer des objets ou des structures complexes basées sur le tableau.

map Optimisation des performances filter: Moins le nombre d'itérations est élevé, plus l'efficacité du grand tableau. reduce reduce

Entraînez-vous à comparer

pour transmettre reduce Exemple 2: Utilisez
Cas réel: traitement de la liste des médecins reduce
Doctor List

Opération 1: Selon le nombre de médecins dans les statistiques du collège

map Opération 2: Créez le dictionnaire de trouver un médecin dans l'ordre

<code class="language-javascript">const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]</code>

Copier après la connexion

reduce Opération 3: Créez la liste complète des noms de la mise en forme

<code class="language-javascript">const numbers = [1, 2, 3, 4];
const result = numbers.reduce((acc, n) => {
    if (n % 2 === 0) acc.push(n * 2); // 一步完成过滤和转换
    return acc;
}, []);
console.log(result); // [4, 8]</code>

Copier après la connexion

<code class="language-javascript">array.reduce((accumulator, currentValue, index, array) => {
    // 逻辑
    return accumulator;
}, initialValue);</code>

Copier après la connexion

la meilleure pratique de `reduce`

: fournit toujours pour éviter les erreurs dans le tableau d'air. initialValue Gardez la lisibilité
une utilisation puissante et excessive puisse rendre le code compliqué. Utilisez-le uniquement lorsque d'autres méthodes ne suffisent pas. Enregistrez votre logique reduce: Expliquez chaque étape clairement dans le commentaire pour faciliter la compréhension.
Conclusion La fonction n'est pas seulement un simple outil de réduction. Il peut être transformé, filtrer et réorganiser les données en une seule étape, et fournit des fonctions uniques dans les opérations du tableau. Grâce à certains exercices, vous pouvez effectuer des opérations complexes dans une optimisation et une élégance. Comment utilisez-vous dans le projet? Veuillez partager vos idées et vos expériences dans les commentaires, nous voulons connaître vos compétences!

Essayez d'utiliser