Maison > interface Web > Questions et réponses frontales > Explication détaillée du principe et de l'utilisation de la fonction de réduction javascript

Explication détaillée du principe et de l'utilisation de la fonction de réduction javascript

PHPz
Libérer: 2023-04-24 10:20:50
original
1738 Les gens l'ont consulté

La fonction réduire est une fonction très couramment utilisée en Javascript, qui peut grandement simplifier nos opérations sur les tableaux. Dans cet article, nous expliquerons en détail comment fonctionne la fonction de réduction et comment la mettre en œuvre.

1. Le concept de fonction de réduction

La fonction de réduction est une fonction très importante en Javascript. Elle est souvent utilisée pour traiter des tableaux. Son rôle est de résumer tous les éléments du tableau en une seule valeur via une fonction spécifiée. La syntaxe de la fonction de réduction est la suivante :

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Copier après la connexion

où :

  • total est la valeur de l'accumulateur que nous voulons renvoyer.
  • currentValue, la valeur actuelle.
  • currentIndex, l'index actuel.
  • arr, le tableau lui-même.
  • initialValue, la valeur initiale.

L'idée centrale de la fonction de réduction est « l'induction », c'est-à-dire la « fusion » de tous les éléments ensemble d'une manière ou d'une autre. Généralement, nous pouvons l'utiliser pour calculer la somme, le produit, la moyenne, etc. des éléments du tableau.

2. Implémentation de la fonction réduire

En Javascript, nous pouvons simuler l'implémentation de la fonction réduire à travers des boucles. Plus précisément, nous pouvons utiliser la méthode suivante :

  1. Définir la variable accumulateur total

Tout d'abord, nous devons définir une variable accumulateur total, qui stockera le résultat final renvoyé par la fonction de réduction.

  1. Traverser les éléments du tableau

Ensuite, nous devons parcourir les éléments du tableau et opérer sur chaque élément. Pendant le processus de parcours, nous devons retirer l'élément actuel et la valeur d'index actuelle pour les utiliser dans les opérations ultérieures.

  1. Appelez la fonction de rappel

Lors de chaque parcours, nous devons appeler la fonction de rappel. La fonction de rappel accepte 4 paramètres : le total de la variable accumulateur, l'élément actuel currentValue, la valeur d'index actuelle currentIndex et l'ensemble du tableau arr. La logique de base de la fonction de rappel est de mettre à jour la valeur du total de la variable accumulateur.

  1. Renvoyer la variable accumulateur

Après avoir parcouru tous les éléments, nous devons renvoyer le total de la variable accumulateur.

Sur la base des idées ci-dessus, nous pouvons écrire la fonction de réduction suivante :

Array.prototype.myReduce = function(callback, initialValue) {
  let total = initialValue ? initialValue : this[0]; // 如果有初始值,使用初始值,否则使用数组的第一个元素
  for (let i = initialValue ? 0 : 1; i < this.length; i++) { // 如果有初始值,从0开始遍历,否则从1开始遍历
    total = callback(total, this[i], i, this); // 调用回调函数更新累加器变量的值
  }
  return total; // 返回累加器变量
}
Copier après la connexion

3. Utilisation de la fonction de réduction

Maintenant que nous avons implémenté la fonction de réduction, comment devrions-nous l'utiliser ? Ensuite, nous démontrerons l’utilisation courante de la fonction de réduction.

  1. Calculer la somme des éléments du tableau

Nous pouvons calculer la somme des éléments du tableau grâce à la fonction de réduction. Comme indiqué ci-dessous :

const arr = [1, 2, 3, 4, 5];
const sum = arr.myReduce((total, currentValue) => total + currentValue); // 15
Copier après la connexion
  1. Calculez le produit des éléments du tableau

Nous pouvons également calculer le produit des éléments du tableau via la fonction de réduction. Comme indiqué ci-dessous :

const arr = [1, 2, 3, 4, 5];
const product = arr.myReduce((total, currentValue) => total * currentValue); // 120
Copier après la connexion
  1. Calculez la moyenne des éléments du tableau

Nous pouvons également calculer la moyenne des éléments du tableau grâce à la fonction de réduction. Comme indiqué ci-dessous :

const arr = [1, 2, 3, 4, 5];
const avg = arr.myReduce((total, currentValue, i, arr) => {
  total += currentValue;
  if (i === arr.length - 1) {
    return total / arr.length;
  } else {
    return total;
  }
}); // 3
Copier après la connexion

IV. Résumé

À ce stade, nous avons implémenté la fonction de réduction en Javascript. La fonction de réduction est une fonction très importante qui peut grandement simplifier nos opérations sur les tableaux. Tant que nous nous souvenons du principe de la fonction de réduction, nous pouvons facilement implémenter notre propre fonction de réduction et l'utiliser pour accélérer la vitesse d'écriture du code. Bien entendu, pour les scénarios de traitement de tableau complexes, la fonction de réduction peut nécessiter une extension et une amélioration supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal