Ausführliche Erläuterung der Anwendung der integrierten Funktion Reduce in Javascript

Vorwort

Im Allgemeinen kann die Logik, die durch die Reduce-Methode implementiert werden kann, verdeckt durch die forEach-Methode implementiert werden. Es ist jedoch nicht klar, wie die JS-Engine des Browsers diese beiden Methoden in C++ implementiert Sicher ist jedoch, dass die Reduktionsmethode auch das Array durchlaufen muss. Es ist nicht bekannt, ob für den Betrieb und die Speicherung von Array-Elementen eine Optimierung vorgenommen wurde.

Anwendung der Reduce-Methode des Arrays

Die Reduce-Methode verfügt über zwei Parameter. Der erste Parameter ist ein Rückruf, der für die Bearbeitung der Array-Elemente verwendet wird Wert, dieser Anfangswert wird für Operationen an einzelnen Array-Elementen verwendet. Es ist zu beachten, dass der Rückgabewert der Reduzierungsmethode kein Array ist, sondern eine Operation nach der Überlagerungsverarbeitung in Form des Anfangswerts.

Das häufigste Szenario für die Reduzierungsmethode ist die Überlagerung.

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

Es ist ersichtlich, dass die Reduzierungsfunktion basierend auf dem Anfangswert 0 kontinuierlich überlagert, um die Implementierung der einfachsten Summe abzuschließen.

Wie im vorherigen Artikel erwähnt, ist der Rückgabeergebnistyp der Reduzierungsfunktion derselbe wie der übergebene Anfangswert. Im vorherigen Beispiel war der Anfangswert vom Typ Zahl. Ebenso kann der Anfangswert sein auch vom Typ Objekt sein.

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}

Mehrfachüberlagerung

Verwenden Sie die Reduzierungsmethode, um die mehrdimensionale Datenüberlagerung abzuschließen. Wie im obigen Beispiel gezeigt, ist der Anfangswert {sum: 0} nur eine eindimensionale Operation. Wenn es sich um die Überlagerung mehrerer Attribute handelt, z. B. {sum: 0, totalInEuros: 0, totalInYen: 0}, entspricht dies der Logik ist erforderlich.

In der folgenden Methode wird die Divide-and-Conquer-Methode übernommen, dh der Rückruf, der erste Parameter der Reduzierfunktion, wird in ein Array gekapselt und jede Funktion im Array wird unabhängig überlagert und abgeschlossen der Reduzierungsvorgang. Alles wird über eine Managerfunktion verwaltet und es werden Anfangsparameter übergeben.

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

Das Obige ist die Implementierung der Manager-Funktion. Sie erfordert Reduzierobjekte als Parameter und gibt eine Funktion vom Typ Callback als ersten Parameter von Reduce zurück. . Innerhalb dieser Funktion wird mehrdimensionale Überlagerungsarbeit durchgeführt (Object.keys()).

Durch diese Divide-and-Conquer-Idee kann die gleichzeitige Überlagerung mehrerer Attribute des Zielobjekts vervollständigt werden. Der vollständige Code lautet wie folgt:

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