Explication détaillée de l'application de la fonction intégrée de réduction en Javascript

Avant-propos

De manière générale, la logique qui peut être implémentée via la méthode de réduction peut être implémentée de manière déguisée via la méthode forEach, bien qu'il ne soit pas clair comment le moteur js du navigateur implémente ces deux méthodes en C++. Mais ce qui est certain, c'est que la méthode de réduction doit également parcourir le tableau. On ne sait pas si une optimisation a été effectuée pour le fonctionnement et le stockage des éléments du tableau en termes de détails d'implémentation spécifiques.

Application de la méthode de réduction du tableau

La méthode de réduction a deux paramètres. Le premier paramètre est un rappel, qui est utilisé pour opérer sur les éléments du tableau. valeur, cette valeur initiale est utilisée pour les opérations sur les éléments individuels du tableau. Il convient de noter que la valeur de retour de la méthode de réduction n'est pas un tableau, mais une opération après traitement de superposition sous la forme de la valeur initiale.

Le scénario le plus courant pour la méthode de réduction est la superposition.

var items = [10, 120, 1000];
 
// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };
 
// do the job
var total = items.reduce(reducer, 0);
 
console.log(total); // 1130

On peut voir que la fonction de réduction se superpose continuellement en fonction de la valeur initiale 0 pour compléter l'implémentation de somme la plus simple.

Comme mentionné dans l'article précédent, le type de résultat renvoyé par la fonction de réduction est le même que la valeur initiale transmise. Dans l'exemple précédent, la valeur initiale était de type nombre. De même, la valeur initiale peut. être également de type objet.

var items = [10, 120, 1000];
 
// our reducer function
var reducer = function add(sumSoFar, item) {
 sumSoFar.sum = sumSoFar.sum + item;
 return sumSoFar;
};
 
// do the job
var total = items.reduce(reducer, {sum: 0});
 
console.log(total); // {sum:1130}

Superposition multiple

En utilisant la méthode de réduction, une superposition de données multidimensionnelles peut être réalisée. Comme le montre l'exemple ci-dessus, la valeur initiale {sum : 0} n'est qu'une opération unidimensionnelle si elle implique la superposition de plusieurs attributs, tels que {sum : 0, totalInEuros : 0, totalInYen : 0}, logique correspondante. est nécessaire.

Dans la méthode suivante, la méthode diviser pour mieux régner est adoptée, c'est-à-dire que le rappel, le premier paramètre de la fonction de réduction, est encapsulé dans un tableau, et chaque fonction du tableau est superposée et complétée indépendamment l’opération de réduction. Tout est géré via une fonction de gestionnaire et les paramètres initiaux sont transmis.

var manageReducers = function(reducers) {
 return function(state, item) {
 return Object.keys(reducers).reduce(
  function(nextState, key) {
  reducers[key](state, item);
  return state;
  },
  {}
 );
 }
};

Ce qui précède est l'implémentation de la fonction de gestionnaire. Il nécessite des objets réducteurs comme paramètres et renvoie une fonction de type rappel comme premier paramètre de réduction. Au sein de cette fonction, un travail de superposition multidimensionnelle est effectué (Object.keys()).

Grâce à cette idée diviser pour régner, la superposition simultanée de plusieurs attributs de l'objet cible peut être complétée. Le code complet est le suivant :

var reducers = { 
 totalInEuros : function(state, item) {
 return state.euros += item.price * 0.897424392;
 },
 totalInYen : function(state, item) {
 return state.yens += item.price * 113.852;
 }
};
 
var manageReducers = function(reducers) {
 return function(state, item) {
 return Object.keys(reducers).reduce(
  function(nextState, key) {
  reducers[key](state, item);
  return state;
  },
  {}
 );
 }
};
 
var bigTotalPriceReducer = manageReducers(reducers);
 
var initialState = {euros:0, yens: 0};
 
var items = [{price: 10}, {price: 120}, {price: 1000}];
 
var totals = items.reduce(bigTotalPriceReducer, initialState);
 
console.log(totals);

Résumé