In der modernen Webentwicklung ist die Datenmanipulation entscheidend für die Gewährleistung reibungsloser und reaktionsfähiger Anwendungen. Unabhängig davon, ob Sie Produkte filtern, bestimmte Artikel finden oder Daten für die Anzeige umwandeln, sorgt eine effektive Datenmanipulation dafür, dass Ihre Anwendung reibungslos läuft und ein hervorragendes Benutzererlebnis bietet.

JavaScript bietet mehrere integrierte Methoden wie Suchen, Zuordnen und Filtern für allgemeine Aufgaben. Die vielseitige Reduce-Methode zeichnet sich jedoch dadurch aus, dass sie all diese Vorgänge und noch mehr ausführen kann. Mit Reduzieren können Sie Werte akkumulieren, Arrays transformieren, verschachtelte Strukturen reduzieren und komplexe Datentransformationen präzise erstellen.

Auch wenn Reduce andere Array-Methoden replizieren kann, ist es für einfache Aufgaben möglicherweise nicht immer die effizienteste Wahl. Methoden wie Karte und Filter sind für bestimmte Zwecke optimiert und können bei einfachen Vorgängen schneller sein. Wenn Sie jedoch wissen, wie man Reduce verwendet, können Sie viele Möglichkeiten finden, Ihren Code besser und verständlicher zu machen.

In diesem Artikel werden wir uns mit der Reduzierungsmethode befassen, verschiedene Anwendungsfälle untersuchen und Best Practices diskutieren, um ihr Potenzial zu maximieren.

Übersicht über den Artikel

• Die Reduzierungsmethode verstehen

• JavaScript-Syntax reduzieren

• Beispiel zur Javascript-Reduzierung

• Verschiedene Anwendungsfälle der Reduce-Methode

• JavaScript-Zuordnung, -Filter und -Suche durch Reduzieren ersetzen

• Abschluss

Die Reduce-Methode verstehen

Die Javascript-Reduzierungsmethode wendet eine Funktion auf einen Akkumulator und jedes Element im Array (von links nach rechts) an, um es auf einen einzelnen Wert zu reduzieren. Dieser einzelne Wert kann eine Zeichenfolge, eine Zahl, ein Objekt oder ein Array sein.

Grundsätzlich nimmt die Reduce-Methode ein Array und verdichtet es zu einem Wert, indem sie wiederholt eine Funktion anwendet, die das akkumulierte Ergebnis mit dem aktuellen Array-Element kombiniert.

JavaScript reduziert die Syntax

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

Parameter:

Rückruf: Die für jedes Element auszuführende Funktion, die die folgenden Argumente annimmt:

accumulator: Der akkumulierte Wert, der zuvor beim letzten Aufruf des Rückrufs zurückgegeben wurde, oder initialValue, falls angegeben.

currentValue: Das aktuelle Element, das im Array verarbeitet wird.

index (optional): Der Index des aktuellen Elements, das im Array verarbeitet wird.

array (optional): Die Array-Reduzierung wurde aufgerufen.

initialValue: Ein Wert, der als erstes Argument für den ersten Aufruf des Rückrufs verwendet werden soll. Wenn kein Anfangswert angegeben wird, wird das erste Element (Array[0]) im Array als anfänglicher Akkumulatorwert verwendet und der Rückruf wird nicht für das erste Element ausgeführt.

Beispiel für eine Javascript-Reduzierung

Hier ist ein einfaches Beispiel, wie die Javascript-Reduzierungsmethode verwendet werden kann

Mit JavaScript auf Summe reduzieren

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

In diesem Beispiel fügt Reduce jede Zahl im Array zum Akkumulator (acc) hinzu. Beginnend mit einem Anfangswert von 0 wird wie folgt verarbeitet:

• (0 1) -> 1

• (1 2) -> 3

• (3 3) -> 6

• (6 4) -> 10

Verschiedene Anwendungsfälle der Reduce-Methode

Die Reduce-Methode ist äußerst vielseitig und kann auf eine Vielzahl von Szenarien angewendet werden. Hier sind einige häufige Anwendungsfälle mit Erklärungen und Codeausschnitten.

Reduzieren eines Arrays von Objekten

Angenommen, Sie haben ein Array von Objekten und möchten eine bestimmte Eigenschaft zusammenfassen.

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 750 }
];


const totalPrice = products.reduce((acc, curr) => acc   curr.price, 0);
console.log(totalPrice); // Output: 2250

In diesem Beispiel iteriert Reduzieren über jedes Produktobjekt und fügt die Preiseigenschaft dem Akkumulator (acc) hinzu, der bei 0 beginnt.

Reduzieren Sie ein Array auf ein Objekt

Sie können Reduzieren verwenden, um ein Array in ein Objekt umzuwandeln. Dies kann nützlich sein, wenn Sie ein Array anhand seiner Eigenschaft
gruppieren möchten.

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' },
  { name: 'Banana', category: 'Fruit' }
];

const groupedItems = items.reduce((acc, curr) => {
  if (!acc[curr.category]) {
    acc[curr.category] = [];
  }
  acc[curr.category].push(curr.name);
  return acc;
}, {});

console.log(groupedItems);
// Output: { Fruit: ['Apple', 'Banana'], Vegetable: ['Carrot'] }

In diesem Beispiel werden Elemente nach ihrer Kategorie gruppiert. Für jedes Element wird geprüft, ob die Kategorie bereits im Akkumulator (acc) vorhanden ist. Wenn nicht, wird ein Array für diese Kategorie initialisiert und dann der Elementname zum Array hinzugefügt.

Ein Array von Arrays reduzieren

Die Reduce-Methode kann ein Array von Arrays zu einem einzigen Array zusammenfassen, wie unten gezeigt

const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flatArray = nestedArrays.reduce((acc, curr) => acc.concat(curr), []);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Hier verkettet Reduzieren jedes verschachtelte Array (curr) mit dem Akkumulator (acc), der als leeres Array beginnt.

Duplikate aus einem Array entfernen

Die Reduce-Methode kann auch verwendet werden, um Duplikate aus einem Array zu entfernen

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = numbers.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

Ersetzen Sie JavaScript Map, Filter und Find durch Reduce

Die Reduce-Methode ist unglaublich vielseitig und kann die Funktionalität anderer Array-Methoden wie Map, Filter und Find replizieren. Auch wenn dies möglicherweise nicht immer die leistungsstärkste Option ist, ist es hilfreich zu verstehen, wie Reduce in diesen Szenarien verwendet werden kann. Hier sind Beispiele, die zeigen, wie Reduce diese Methoden ersetzen kann.

Verwenden von Reduzieren zum Ersetzen der Karte

Die Map-Methode erstellt ein neues Array, indem sie eine Funktion auf jedes Element des ursprünglichen Arrays anwendet. Dies kann mit Reduce repliziert werden.

const numbers = [1, 2, 3, 4];

const doubled = numbers.reduce((acc, curr) => {
  acc.push(curr * 2);
  return acc;
}, []);

console.log(doubled); // Output: [2, 4, 6, 8]

In diesem Beispiel iteriert Reduce über jede Zahl, verdoppelt sie und schiebt das Ergebnis in das Akkumulator-Array (acc).

Verwenden Sie „Reduzieren“, um den Filter zu ersetzen

Die Filtermethode erstellt ein neues Array mit Elementen, die einen von einer bereitgestellten Funktion implementierten Test bestehen. Dies kann auch mit Reduce erreicht werden.

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(evens); // Output: [2, 4, 6]

Hier reduzieren Sie die Prüfungen, ob die aktuelle Zahl (curr) gerade ist. Wenn dies der Fall ist, wird die Zahl zum Akkumulator-Array (acc) hinzugefügt.

Verwenden von Reduzieren zum Ersetzen von Suchen

Die Suchmethode gibt das erste Element in einem Array zurück, das eine bereitgestellte Testfunktion erfüllt. Zu diesem Zweck kann auch Reduce verwendet werden. Dies kann nützlich sein, wenn Sie die erste gerade Zahl in einem Array finden

const numbers = [1, 3, 5, 6, 7, 8];

const firstEven = numbers.reduce((acc, curr) => {
  if (acc !== undefined) return acc;
  return curr % 2 === 0 ? curr : undefined;
}, undefined);

console.log(firstEven); // Output: 6

Abschluss

Die Reduce-Methode in JavaScript ist ein vielseitiges Tool, das eine Vielzahl von Datenmanipulationsaufgaben bewältigen kann und die Funktionen von Map, Filter und Find übertrifft. Auch wenn es für einfache Aufgaben nicht immer die effizienteste Methode ist, eröffnet die Beherrschung von Reduce neue Möglichkeiten zur Optimierung und Vereinfachung Ihres Codes. Das Verstehen und effektive Verwenden von Reduce kann Ihre Fähigkeit, komplexe Datentransformationen zu verwalten, erheblich verbessern und es zu einem entscheidenden Bestandteil Ihres JavaScript-Toolkits machen.