JavaScript-Zuordnung, Reduzieren und Filtern - JS-Array-Funktionen, die anhand von Codebeispielen erläutert werden

Zuordnen, Reduzieren und Filtern sind alle Array-Methoden in JavaScript. Jeder iteriert über ein Array und führt eine Transformation oder Berechnung durch. Jeder gibt basierend auf dem Ergebnis der Funktion ein neues Array zurück. In diesem Artikel erfahren Sie, warum und wie Sie die einzelnen Elemente verwenden.

Hier ist eine lustige Zusammenfassung von Steven Luscher:

Map / Filter / Reduce in einem Tweet:

Karte ([?,?,?], Koch)

=> [?,?,?]

Filter ([?,?,?], isVegetarian)

=> [?,?]

reduzieren ([?,?], essen)

=>?

- Steven Luscher (@steveluscher), 10. Juni 2016

Karte

Die map()Methode wird zum Erstellen eines neuen Arrays aus einem vorhandenen Array verwendet, wobei auf jedes der Elemente des ersten Arrays eine Funktion angewendet wird.

Syntax

var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])

Im Rückruf wird nur das Array elementbenötigt. Normalerweise wird eine Aktion für den Wert ausgeführt und dann wird ein neuer Wert zurückgegeben.

Beispiel

Im folgenden Beispiel wird jede Zahl in einem Array verdoppelt.

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]

Filter

Die filter()Methode nimmt jedes Element in einem Array und wendet eine bedingte Anweisung darauf an. Wenn diese Bedingung true zurückgibt, wird das Element in das Ausgabearray verschoben. Wenn die Bedingung false zurückgibt, wird das Element nicht in das Ausgabearray verschoben.

Syntax

var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])

Die Syntax für filterist ähnlich wie map, außer dass die Rückruffunktion zurückkehren sollte true, um das Element beizubehalten, oder auf falseandere Weise. Im Rückruf ist nur das elementerforderlich.

Beispiele

Im folgenden Beispiel werden ungerade Zahlen "herausgefiltert", wobei nur gerade Zahlen übrig bleiben.

const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]

Im nächsten Beispiel werden filter()alle Schüler ermittelt, deren Noten größer oder gleich 90 sind.

const students = [ { name: 'Quincy', grade: 96 }, { name: 'Jason', grade: 84 }, { name: 'Alexis', grade: 100 }, { name: 'Sam', grade: 65 }, { name: 'Katie', grade: 90 } ]; const studentGrades = students.filter(student => student.grade >= 90); return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Reduzieren

Die reduce()Methode reduziert ein Array von Werten auf nur einen Wert. Um den Ausgabewert abzurufen, wird für jedes Element des Arrays eine Reduzierungsfunktion ausgeführt.

Syntax

arr.reduce(callback[, initialValue])

Das callbackArgument ist eine Funktion, die für jedes Element im Array einmal aufgerufen wird. Diese Funktion akzeptiert vier Argumente, aber oft werden nur die ersten beiden verwendet.

  • Akkumulator - Der zurückgegebene Wert der vorherigen Iteration
  • currentValue - das aktuelle Element im Array
  • index - der Index des aktuellen Elements
  • Array - Das ursprüngliche Array, für das Reduce aufgerufen wurde
  • Das initialValueArgument ist optional. Wenn angegeben, wird es beim ersten Aufruf der Rückruffunktion als anfänglicher Akkumulatorwert verwendet.

Beispiele

Im folgenden Beispiel wird jede Zahl in einem Array von Zahlen zusammengefasst.

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10

Im nächsten Beispiel reduce()wird ein Array von Zeichenfolgen in ein einzelnes Objekt umgewandelt, das zeigt, wie oft jede Zeichenfolge im Array angezeigt wird. Beachten Sie, dass dieser Aufruf zum Reduzieren ein leeres Objekt {}als initialValueParameter übergibt . Dies wird als Anfangswert des Akkumulators (das erste Argument) verwendet, der an die Rückruffunktion übergeben wird.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit']; var petCounts = pets.reduce(function(obj, pet){ if (!obj[pet]) { obj[pet] = 1; } else { obj[pet]++; } return obj; }, {}); console.log(petCounts); /* Output: { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Video Erklärung

Schauen Sie sich das Video unten auf dem YouTube-Kanal von freeCodeCamp.org an. Es behandelt die besprochenen Array-Methoden sowie einige weitere.