Maison > interface Web > js tutoriel > le corps du texte

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

高洛峰
Libérer: 2016-12-28 09:40:51
original
1200 Les gens l'ont consulté

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
Copier après la connexion

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}
Copier après la connexion

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;
  },
  {}
 );
 }
};
Copier après la connexion

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);
Copier après la connexion

Résumé

<.>Ce qui précède est le contenu en Javascript. Tout le contenu de la création d'une application de réduction de fonctions. J'espère que le contenu de cet article pourra être utile à l'étude ou au travail de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer.

Pour des explications plus détaillées sur l'application de la fonction intégrée réduire en Javascript, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
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