Utilisation et astuces de la fonction array Reduction() en JavaScript

reduce exécute la fonction de rappel séquentiellement pour chaque élément du tableau, à l'exclusion des éléments qui sont supprimés ou qui n'ont jamais reçu de valeur dans le tableau. Ensuite, je partagerai avec vous l'explication détaillée et les techniques avancées de la méthode JS array Reduction() à travers cet article. Jetons-y un coup d'œil

Concepts de base

reduce() accepte une fonction comme accumulateur, et chaque valeur du tableau (de gauche à droite) est réduite à une valeur.

reduce exécute la fonction de rappel en séquence pour chaque élément du tableau, à l'exclusion des éléments qui sont supprimés ou qui n'ont jamais reçu de valeur dans le tableau, et accepte quatre paramètres : la valeur initiale (ou la valeur de retour du dernier rappel function) , la valeur actuelle de l'élément, l'index actuel, le tableau dans lequel la réduction est appelée.

Syntaxe :

arr.reduce(callback,[initialValue])

• rappel (exécuter chaque appel dans la fonction de valeur du tableau A, contenant quatre paramètres)

• previousValue (la valeur renvoyée par le dernier appel de rappel, ou la valeur initiale fournie (initialValue))

• currentValue (l'élément actuellement traité dans le tableau)

• index (l'index de l'élément actuel dans le tableau)

• array (Array à appeler réduire)

• initialValue (comme premier paramètre du premier appel de rappel.)

Application simple

Exemple 1 :

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 constate que la fonction de réduction est superposée en continu en fonction de la fonction initiale valeur 0 , terminez la mise en œuvre de la somme la plus simple.

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 numéro. De même, la valeur initiale peut également être de type objet.

Exemple 2 :

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}

Application avancée

Utiliser réduire ceci La méthode peut compléter la superposition de données multidimensionnelles. 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 (Object.keys()) est effectué.

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 :

<. 🎜>Voici un exemple :

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);

La note finale d'un certain élève est exprimée comme suit

Comment trouver la note totale de l'élève ?

var result = [
  {
    subject: 'math',
    score: 88
  },
  {
    subject: 'chinese',
    score: 95
  },
  {
    subject: 'english',
    score: 80
  }
];

En supposant que l'élève soit puni pour violation de la discipline et qu'il ait une déduction totale de 10 points sur le score total, il vous suffit de définir la valeur initiale sur - 10.

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, 0);

Rendons cet exemple un peu plus difficile. Si chaque matière a un poids différent dans la note totale de l'élève, à savoir 50 %, 30 % et 20 %, comment doit-on trouver le résultat final de la pondération ?

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, -10);

La solution est la suivante :

Regardez un autre exemple, comment savoir une chaîne de caractères Combien de fois chaque lettre apparaît-elle dans la chaîne ?

var dis = {
  math: 0.5,
  chinese: 0.3,
  english: 0.2
}
var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, -10);
var qsum = result.reduce(function(prev, cur) {
  return cur.score * dis[cur.subject] + pre;
}, 0)
console.log(sum, qsum);

Puisque la valeur initiale du type du résultat de superposition peut être définie via le deuxième paramètre, la réduction à ce moment n'est plus seulement un ajout, nous pouvons être flexibles Utilisez-le pour effectuer diverses conversions de types, telles que la conversion de tableaux en objets selon certaines règles ou la conversion d'une forme de tableau en une autre forme de tableau. Vous pouvez l'essayer vous-même.

var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
  res[cur] ? res[cur] ++ : res[cur] = 1
  return res;
}, {})

Dans le code source de koa, il y a un seul module. Le module entier est un objet simple qui renvoie l'opération de la méthode de réduction :

[1, 2].reduce(function(res, cur) { 
  res.push(cur + 1); 
  return res; 
}, [])

<🎜. >

Grâce à la compréhension du concept de réduction, ce module souhaite principalement créer et renvoyer un objet objet des clés existant dans l'objet obj.

var only = function(obj, keys){
 obj = obj || {};
 if ('string' == typeof keys) keys = keys.split(/ +/);
 return keys.reduce(function(ret, key){
  if (null == obj[key]) return ret;
  ret[key] = obj[key];
  return ret;
 }, {});
};

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!