Verwendung und Tipps der Array-Reduce()-Funktion in JavaScript

reduce führt die Rückruffunktion nacheinander für jedes Element im Array aus, mit Ausnahme von Elementen, die gelöscht werden oder denen im Array nie ein Wert zugewiesen wurde. Als nächstes werde ich Ihnen in diesem Artikel die detaillierte Erklärung und die fortgeschrittenen Techniken der JS-Array-Reduction()-Methode mitteilen. Schauen wir uns das an

Grundlegende Konzepte

reduce( )-Methode akzeptiert eine Funktion als Akkumulator und jeder Wert im Array (von links nach rechts) wird auf einen Wert reduziert.

reduce führt die Rückruffunktion nacheinander für jedes Element im Array aus, mit Ausnahme von Elementen, die gelöscht werden oder denen im Array nie ein Wert zugewiesen wurde, und akzeptiert vier Parameter: Anfangswert (oder den Rückgabewert des letzten Rückrufs). Funktion), der aktuelle Elementwert, der aktuelle Index, das Array, in dem Reduce aufgerufen wird.

Syntax:

arr.reduce(callback,[initialValue])

• Rückruf (jeden Aufruf ausführen das Array Eine Wertfunktion, die vier Parameter enthält)

• previousValue (der vom letzten Rückrufaufruf zurückgegebene Wert oder der bereitgestellte Anfangswert (initialValue))

• aktueller Wert (das aktuell verarbeitete Element im Array)

• Index (der Index des aktuellen Elements im Array)

• array ( Array zum Aufrufen von Reduce)

• initialValue (als erster Parameter des ersten Callback-Aufrufs.)

Einfache Anwendung

Beispiel 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

Es ist zu erkennen, dass die Reduzierungsfunktion basierend auf der Initiale kontinuierlich überlagert wird Wert 0 , Vervollständigen Sie die Implementierung der einfachsten Summe.

Der Rückgabeergebnistyp der Reduktionsfunktion ist derselbe wie der übergebene Anfangswert. Im vorherigen Beispiel war der Anfangswert vom Typ Zahl. Ebenso kann der Anfangswert auch vom Typ Objekt sein.

Beispiel 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}

Erweiterte Anwendung

Verwenden Sie „reduce This“. Die Methode kann eine mehrdimensionale Datenüberlagerung abschließen. Wie im obigen Beispiel gezeigt, ist der Anfangswert {sum: 0} nur eine eindimensionale Operation. Wenn es sich um die Überlagerung mehrerer Attribute handelt, wie 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 (Object.keys()) durchgeführt.

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

Hier kommt ein Beispiel:

Die Abschlussnote eines bestimmten Schülers wird wie folgt ausgedrückt

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

Wie finde ich die Gesamtnote des Schülers?

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

Unter der Annahme, dass der Schüler wegen Verstoßes gegen die Disziplin bestraft wird und einen Gesamtabzug von 10 Punkten von der Gesamtpunktzahl erhält, müssen Sie nur den Anfangswert auf - setzen. 10.

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

Machen wir dieses Beispiel etwas schwieriger. Wenn jedes Fach unterschiedliche Gewichte in der Gesamtpunktzahl des Schülers hat, nämlich 50 %, 30 % und 20 %, wie sollten wir dann das endgültige Gewichtungsergebnis ermitteln?

Die Lösung lautet wie folgt:

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

Schauen Sie sich ein anderes Beispiel an, wie Sie es herausfinden können eine Zeichenfolge. Wie oft kommt jeder Buchstabe in der Zeichenfolge vor?

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

Da der Typanfangswert des Überlagerungsergebnisses über den zweiten Parameter festgelegt werden kann, ist die Reduzierung zu diesem Zeitpunkt nicht mehr nur eine Addition, wir können flexibel sein Verwenden Sie es, um verschiedene Typkonvertierungen durchzuführen, z. B. das Konvertieren von Arrays in Objekte nach bestimmten Regeln oder das Konvertieren einer Array-Form in eine andere Array-Form. Sie können es selbst ausprobieren.

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

Im Quellcode von koa gibt es ein einziges Modul. Das gesamte Modul ist ein einfaches Objekt, das die Reduzierungsmethodenoperation zurückgibt:

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;
 }, {});
};

Durch das Verständnis des Reduktionskonzepts möchte dieses Modul hauptsächlich ein Objektobjekt der im obj-Objekt vorhandenen Schlüssel erstellen und zurückgeben.

var a = {
  env : 'development',
  proxy : false,
  subdomainOffset : 2
}
only(a,['env','proxy'])  // {env:'development',proxy : false}

Das obige ist der detaillierte Inhalt vonVerwendung und Tipps der Array-Reduce()-Funktion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!