JavaScript/Objekte/Array/reduce

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode reduce ruft die angegebene Rückruffunktion (Callback) für alle Elemente in einem Array auf, mit dem Ziel, den Array-Inhalt auf einen einzigen Wert zu reduzieren. Einsatzzweck kann zum Beispiel eine Summen- oder Durchschnittsbildung sein.

  • JavaScript 1.8
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel: "Syntax"
arr.reduce(callback[, anfangsWert])
  • callback: Funktion, die für jeden Wert im Array ausgeführt wird und 4 Argumente übergeben bekommt:
    • previousValue: Der vom letzten Aufruf dieser Funktion zurückgegebene Wert, oder ein Anfangswert. Details dazu weiter unten.
    • currentValue: Das aktuelle im Array verarbeitete Element
    • index: Index des aktuellen Elements
    • array: Der mit reduce aufgerufene Array
  • anfangsWert: (optional)

Wird der anfangsWert Parameter nicht übergeben, verwendet reduce() den ersten Wert im Array als Anfangswert und beginnt die Callback-Aufrufe mit dem zweiten Wert im Array. Unter "erstem" und "zweitem" Wert des Arrays ist nicht zwingend der Index 0 und 1 zu verstehen. Arrays können lückenhaft gefüllt sein, und reduce() nutzt nur die tatsächlich belegten Indexpositionen.

Es gibt folgende Sonderfälle:

  • Das Array enthält genau ein Element und der anfangsWert Parameter wurde nicht übergeben. reduce() gibt den Wert des einzigen Array-Elements zurück, die Callback-Funktion wird nicht aufgerufen.
  • Das Array ist leer und der anfangsWert Parameter wurde übergeben. reduce() gibt den Wert des anfangsWert Parameters zurück, die Callback-Funktion wird nicht aufgerufen.
  • Das Array ist leer und der anfangsWert Parameter wurde nicht übergeben. reduce() wirft einen TypeError.
Beispiel: Einsatz von reduce() für eine Summenbildung
var array = [ 5, 9, 12, 7 ], summe = array.reduce(function(prev,akt) { return prev + akt; });
Die Callbackfunktion wird hier dreimal aufgerufen. Der erste Aufruf bekommt die Parameter prev=5 und akt=9
Beispiel: Einsatz von reduce() für eine komplexere Transformation
var columnDefinitions = [ 
      { field: 'Name', type: 'string' },
      { field: 'Vorname', type: 'string' },
      { field: 'Geburtsdatum', type: 'date' }
    ];
var columnIndex = array.reduce(function(prev, akt, index) {
   prev[akt.field] = index;
   return prev;
}, {});
Als Startwert wird ein leeres Objekt übergeben. Die Callbackfunktion wird genutzt, um pro Felddefinition in der Tabelle in diesem Objekt ein Property anzulegen, das den Index des Feldes in der Tabelle angibt. Nützlich, wenn man oft nach Feldpositionen suchen muss.

Die gezeigten Beispiele lassen sich durch Verwendung des for Statements deutlich performanter realisieren. Der Einsatz von reduce() wird dann interessanter, wenn der Inhalt der for-Schleife ohnehin ein Funktionsaufruf ist - oder sein muss, weil man Closures bilden will.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML