Maison > Article > interface Web > 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])
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); // 1130On 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 :
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
var result = [ { subject: 'math', score: 88 }, { subject: 'chinese', score: 95 }, { subject: 'english', score: 80 } ];
var sum = result.reduce(function(prev, cur) { return cur.score + prev; }, 0);
var sum = result.reduce(function(prev, cur) { return cur.score + prev; }, -10);
La solution est la suivante :
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);
var arrString = 'abcdaabc'; arrString.split('').reduce(function(res, cur) { res[cur] ? res[cur] ++ : res[cur] = 1 return res; }, {})
[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!