RxJS-Aggregat-Operatoren: count, max, min und reduce

CoderStudio, 27.04.2022 00:15
RxJS-Aggregat-Operatoren: count, max, min und reduce

Jeder, der RxJS verwendet hat, weiß, wie sehr es die Arbeit des Programmierers erleichtert. Diese Bibliothek stellt uns eine Menge nützlicher Operatoren zur Verfügung. Dabei kann man leicht durcheinander kommen und nicht wissen, welchen Operator man verwenden soll. Zum Glück gibt es auf der Dokumentationsseite eine klare Einteilung in Kategorien:
- Erstellungs-Operatoren
- Operatoren zur Erzeugung von Verbindungen
- Transformations-Operatoren
- Filterungs-Operatoren
- Join-Operatoren
- Multicasting-Operatoren
- Operatoren zur Fehlerbehandlung
- Dienstprogramm-Operatoren
- Bedingte und boolesche Operatoren
- Mathematische und Aggregat-Operatoren

In diesem Artikel werde ich versuchen, die Verwendung der Operatoren min, max, reduce und count vorzustellen, die zur letzten der oben erwähnten Kategorien gehören.

1. Max()

Zum leichteren Verständnis nehmen wir ein Beispiel. Stellen Sie sich vor, Sie haben eine Firma, die Kleidung verkauft. Wir möchten eine Liste von Kleidungsstücken mit ID, Name und Preis herunterladen und dann prüfen, welcher Artikel der teuerste ist. Um das Beispiel zu vereinfachen, werden wir keine HTTP-Anfrage an die API stellen, sondern ein einfaches Array von Objekten erstellen, das uns als Datenquelle dient.

const products = [
{ id: 1, name: 'Shoes', price: 129},
{ id: 2, name: 'T-shirt', price: 45},
{ id: 3, name: 'Rock', price: 28},
{ id: 4, name: 'Sockets', price: 5},
{ id: 5, name: 'Jeans', price: 49}]
const products$ = from(products);

Nachdem wir das Array erstellt haben, erstellen wir die Schnittstelle "Produkt":

interface Product {
  id: number,
  name: string,
  price: number
}

Der nächste Schritt ist das Hinzufügen des folgenden Codes:

products$
  .pipe(
     max((productA: Product, productB: Product) => {
       return productA.preis < ProduktB.Preis ? -1 : 1
     })
  )
  .subscribe((product: Product) => console.info(product));

Wenn wir die Konsole in einem Browser öffnen, sollten wir das folgende Ergebnis sehen:

{id: 1, name: 'Schuhe, prie: 129}

In diesem Fall nimmt der max-Operator ProduktA und Produkt B als Argument. Dann prüft er, ob der Preis von ProduktA größer oder kleiner als der von ProduktB ist. Wenn der Preis größer ist, sortiert die Funktion das Produkt mit einem Index, der kleiner ist als der Index von ProduktB. Wenn der Preis von ProduktB größer ist als der Preis von ProduktA, dann sortiert die Funktion den Preis von ProduktB mit einem Index, der kleiner ist als der Index von ProduktA.

2. Min()

Dieser Operator gibt den kleinsten Wert zurück, der von der Datenquelle ausgegeben wird. Der Code, der diesen Operator verwendet, sieht ähnlich aus wie der vorherige - dieses Mal verwenden wir statt max den Wert min.

products$
  .pipe(
     min((productA: Product, productB: Product) => {
       return productA.preis < ProduktB.Preis ? -1 : 1
     })
  )
  .subscribe((product: Product) => console.info(product));

Das Ergebnis ist, dass das Objekt mit dem niedrigsten Preis in der Browserkonsole angezeigt wird:

{id: 4, name: 'Sockets', price: 5}

Das Funktionsprinzip ist ähnlich wie beim Operator max (). Hier werden die Preise verglichen und je nach ihrem Wert wird ein größerer oder kleinerer Index zugewiesen.

3. Reduzieren()

Mit Hilfe dieses Operators können wir die Summe der Preise unserer Produkte berechnen. Der Code lautet wie folgt:

products$
  .pipe(
     map((product: Product) => product.price),
     reduce((accumulator: number, nextPrice: number) => {
       return accumulator + nextPrice;
     })
  )
  .subscribe((sum: number) => console.info(sum));

Um die Produkte zu summieren, müssen Sie zunächst jedes Produkt so umwandeln, dass der Preiswert von ihm zurückgegeben wird. Dann werden die nächsten Summen im Akkumulator akkumuliert, zu dem der nächste Preis des Produkts addiert wird. Als Ergebnis erhält man die Gesamtkosten der Produkte.

4. Zählen()

Der letzte Operator ist count. Mit diesem einfachen Operator können wir berechnen, wie viele Werte von der Datenquelle ausgegeben wurden. In unserem Fall ist es die Anzahl der Produkte, d. h. 5.

products$
  .pipe(
    count()
  )
  .subscribe((sum: number) => console.info(sum));

Als Ergebnis sollte die Konsole den Wert 5 anzeigen.

Schlussfolgerung

Die Mathe- und Aggregationsoperatoren sind ein großartiges Werkzeug, mit dem Sie auf einfache Weise verschiedene Werte berechnen können. Die obigen Beispiele sind nur eine der vielen Verwendungen der Operatoren, die zeigen, wie vielseitig sie eingesetzt werden können. Ich bin sicher, dass sie auch in Ihren Projekten Verwendung finden werden!