25 erweiterte Verwendungsmöglichkeiten von JS Array Reduce, die Sie kennen müssen

25 erweiterte Verwendungsmöglichkeiten von JS Array Reduce, die Sie kennen müssen

Vorwort

Reduce ist eine der neuen herkömmlichen Array-Methoden, die in ES5 hinzugefügt wurden. Im Vergleich zu forEach, Filter und Map scheint es im tatsächlichen Gebrauch etwas vernachlässigt zu werden. Es stellt sich heraus, dass die Leute um mich herum es selten verwenden, was dazu führt, dass eine so leistungsstarke Methode allmählich untergeht.

Wenn Sie „Reduce“ häufig verwenden, wie können Sie dann eine so nützliche Funktion übersehen? Ich muss es noch aus dem Staub holen, sauber wischen und allen seine erweiterten Einsatzmöglichkeiten vorstellen. Eine derart nützliche Methode sollte nicht der Öffentlichkeit verborgen bleiben.

Nachfolgend finden Sie eine kurze Beschreibung der Reduce-Syntax. Weitere Einzelheiten finden Sie in der entsprechenden Beschreibung von Reduce() auf MDN.

  • Definition: Führt einen benutzerdefinierten Akkumulator für jedes Element in einem Array aus und fasst die Ergebnisse zu einem einzigen Rückgabewert zusammen.
  • Format: array.reduce((t, v, i, a) => {}, initValue)
  • Parameter
    • callback: Rückruffunktion (erforderlich)
    • initValue: Anfangswert (optional)
  • Parameter der Callback-Funktion
    • total(t): Der Rückgabewert des Akkumulators nach Abschluss der Berechnung (erforderlich)
    • value(v): aktuelles Element (erforderlich)
    • index(i): der Index des aktuellen Elements (optional)
    • array(a): das Array-Objekt, zu dem das aktuelle Element gehört (optional)
  • Verfahren
    • Verwenden Sie t als Anfangswert des kumulativen Ergebnisses. Wenn t nicht festgelegt ist, wird das erste Element des Arrays als Anfangswert verwendet.
    • Starten Sie die Durchquerung, verwenden Sie den Akkumulator, um v zu verarbeiten, akkumulieren Sie die Abbildungsergebnisse von v auf t, beenden Sie die Schleife und geben Sie t zurück
    • Geben Sie die nächste Schleife ein und wiederholen Sie den obigen Vorgang bis zum letzten Element des Arrays
    • Beenden Sie die Durchquerung und geben Sie das letzte t zurück.

Das Wesentliche von Reduce besteht darin, den Akkumulator nacheinander auf die Array-Mitglieder anzuwenden und den Wert der vorherigen Ausgabe als Wert der nächsten Eingabe zu verwenden. Sehen wir uns anhand eines einfachen Beispiels die Berechnungsergebnisse von Reduce an.

const arr = [3, 5, 1, 4, 2];
Verwenden Sie die Funktion a = arr.reduce((t, v) => t + v);
//Entspricht const b = arr.reduce((t, v) => t + v, 0);

Es macht nichts, wenn Sie den Code nicht sehr gut verstehen. Sie sollten ihn verstehen können, indem Sie ein GIF der Reduce-Funktion posten.

Reduce ist im Wesentlichen eine Akkumulatorfunktion, die eine benutzerdefinierte Akkumulation von Array-Mitgliedern durch einen benutzerdefinierten Akkumulator durchführt, um einen vom Akkumulator generierten Wert zu erhalten. Darüber hinaus hat Reduce einen jüngeren Bruder, ReduceRight. Die Funktionen der beiden Methoden sind eigentlich gleich, außer dass Reduce in aufsteigender Reihenfolge ausgeführt wird, während ReduceRight in absteigender Reihenfolge ausgeführt wird.

Der Aufruf von „reduce()“ und „reduceRight()“ für ein leeres Array führt nicht zur Ausführung der entsprechenden Rückruffunktion. Daher wird „reduce()“ für ein leeres Array als ungültig angesehen.

Erweiterte Nutzung

Das obige einfache Beispiel allein reicht nicht aus, um zu erklären, was „Reduce“ ist. Um die Leistungsfähigkeit von Reduce zu demonstrieren, biete ich Ihnen 25 Szenarien zur Anwendung der erweiterten Verwendung von Reduce. Um einige erweiterte Verwendungen zu erreichen, müssen diese möglicherweise mit anderen Methoden kombiniert werden, was mehr Möglichkeiten zur Diversifizierung von Reduce bietet.

Der Schreibstil einiger Beispielcodes kann etwas schlampig sein. Wenn Sie nicht daran gewöhnt sind, können Sie ihn entsprechend Ihren eigenen Gewohnheiten korrigieren.

Akkumulieren und vermehren

Funktion Akkumulation(...vals) {
    gibt vals.reduce((t, v) => t + v, 0); zurück
}

Funktion Multiplikation(...Werte) {
    gibt vals.reduce((t, v) => t * v, 1); zurück
}
Akkumulation(1, 2, 3, 4, 5); // 15
Multiplikation(1, 2, 3, 4, 5); // 120

Gewichtete Summe

Konstante Punktzahlen = [
    { Punktzahl: 90, Fach: "Chinesisch", Gewichtung: 0,5 },
    { Punktzahl: 95, Fach: "Mathe", Gewichtung: 0,3 },
    { Punktzahl: 85, Fach: "Englisch", Gewichtung: 0,2 }
];
const Ergebnis = Punktzahlen.Reduce((t, v) => t + v.Punktzahl * v.Gewicht, 0); // 90,5

Statt umgekehrt

Funktion Umgekehrt(arr = []) {
    arr.reduceRight((t, v) => (t.push(v), t), []);
}
Umgekehrt([1, 2, 3, 4, 5]); // [5, 4, 3, 2, 1]

Karte und Filter ersetzen

const arr = [0, 1, 2, 3];

// Karte ersetzen: [0, 2, 4, 6]
Konstanten a = arr.map(v => v * 2);
const b = arr.reduce((t, v) => [...t, v * 2], []);

// Filter ersetzen: [2, 3]
const c = arr.filter(v => v > 1);
const d = arr.reduce((t, v) => v > 1 ? [...t, v] : t, []);

// Karte und Filter ersetzen: [4, 6]
const e = arr.map(v => v * 2).filter(v => v > 2);
const f = arr.reduce((t, v) => v * 2 > 2 ? [...t, v * 2] : t, []);

Ersetzen Sie einige und alle

Konstante Punktzahlen = [
    { Punktzahl: 45, Betreff: "Chinesisch" },
    { Punktzahl: 90, Fach: "Mathe" },
    { Punktzahl: 60, Betreff: "Englisch" }
];

// Ersetze einige: mindestens ein qualifiziertes const isAtLeastOneQualified = scores.reduce((t, v) => t || v.score >= 60, false); // true

// Ersetze alle: alle qualifizierten const isAllQualified = scores.reduce((t, v) => t && v.score >= 60, true); // false

Array-Aufteilung

Funktion Chunk(arr = [], Größe = 1) {
    gibt arr.length zurück? arr.reduce((t, v) => (t[t.length - 1].length === Größe ? t.push([v]) : t[t.length - 1].push(v), t), [[]]) : [];
}
const arr = [1, 2, 3, 4, 5];
Chunk(arr, 2); // [[1, 2], [3, 4], [5]]

Array-Filterung

Funktion Differenz(arr = [], oarr = []) {
    return arr.reduce((t, v) => (!oarr.includes(v) && t.push(v), t), []);
}
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 6]
Unterschied(arr1, arr2); // [1, 4, 5]

Array-Füllung

Funktion Füllen(arr = [], val = "", start = 0, end = arr.length) {
    wenn (Start < 0 || Start >= Ende || Ende > arr.Länge) return arr;
    zurückkehren [
        ...arr.slice(0, Start),
        ...arr.slice(Start, Ende).reduce((t, v) => (t.push(val || v), t), []),
        …arr.slice(Ende, arr.Länge)
    ];
}
const arr = [0, 1, 2, 3, 4, 5, 6];
Füllen(arr, "aaa", 2, 5); // [0, 1, "aaa", "aaa", "aaa", 5, 6]

Array-Abflachung

Funktion Flat(arr = []) {
    return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
}
const arr = [0, 1, [2, 3], [4, 5, [6, 7]], [8, [9, 10, [11, 12]]]];
Flach(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

Array-Deduplizierung

Funktion Uniq(arr = []) {
    gibt arr.reduce((t, v) => t.includes(v) ? t : [...t, v], []);
}
const arr = [2, 1, 0, 3, 2, 1, 2];
Uniq(arr); // [2, 1, 0, 3]

Array-Maximal- und Minimalwerte

Funktion Max(arr = []) {
    gibt arr.reduce((t, v) => t > v ? t : v); zurück
}

Funktion Min(arr = []) {
    gibt arr.reduce((t, v) => t < v ? t : v); zurück
}
const arr = [12, 45, 21, 65, 38, 76, 108, 43];
Max(an); // 108
Min(an); // 12

Array-Mitglieder werden unabhängig voneinander zerlegt

Funktion Entpacken(arr = []) {
    Rückkehr arr.reduce(
        (t, v) => (v.fürEach((w, i) => t[i].push(w)), t),
        Array.from({ Länge: Math.max(...arr.map(v => v.length)) }).map(v => [])
    );
}
const arr = [["a", 1, wahr], ["b", 2, falsch]];
Entpacken(arr); // [["a", "b"], [1, 2], [wahr, falsch]]

Anzahl der Array-Mitglieder

Funktion Zählen(arr = []) {
    : return arr.reduce((t, v) => (t[v] = (t[v] || 0) + 1, t), {});
}
arr = [0, 1, 1, 2, 2, 2];
Anzahl(arr); // { 0: 1, 1: 2, 2: 3 }

Diese Methode basiert auf dem Prinzip der Zeichenstatistik und Wortstatistik. Verarbeiten Sie bei der Eingabe des Parameters einfach die Zeichenfolge in ein Array.

Datensatz zur Position der Array-Mitglieder

Funktion Position(arr = [], val) {
    : Gibt an, ob t.push(i), t) oder v) reduce(i) ist.
}
const arr = [2, 1, 5, 4, 2, 1, 6, 6, 7];
Position(arr, 2); // [0, 4]

Gruppierung von Array-Mitgliedsattributen

Funktion Gruppe(arr = [], Schlüssel) {
    Taste zurückgeben? arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {}) : {};
}
Konstanten arr = [
    { Gebiet: "GZ", Name: "YZW", Alter: 27 },
    { Gebiet: "GZ", Name: "TYJ", Alter: 25 },
    { Gebiet: "SZ", Name: "AAA", Alter: 23 },
    { Bereich: "FS", Name: "BBB", Alter: 21 },
    { Gebiet: "SZ", Name: "CCC", Alter: 19 }
]; // Benutze Bereich als Gruppierungsbasis Group(arr, "Bereich"); // { GZ: Array(2), SZ: Array(2), FS: Array(1) }

Schlüsselwortstatistiken von Array-Mitgliedern

Funktion Schlüsselwort(arr = [], Schlüssel = []) {
    Rückgabeschlüssel.Reduce((t, v) => (arr.some(w => w.includes(v)) && t.push(v), t), []);
}
const text = [
    „Heute ist ein schöner Tag, ich möchte angeln gehen“,
    „Ich sehe fern, während ich meine Hausaufgaben mache“,
    „Xiao Ming mag Xiao Hong, der neben ihm sitzt, und Xiao Jun, der neben ihm sitzt. Er ist so wankelmütig“,
    „Es gibt in letzter Zeit zu viele Leute, die bei der Arbeit gerne faulenzen. Sie schreiben Code nicht richtig und sind am Tagträumen.“
];
const keyword = ["faul", "mögen", "schlafen", "Angeln", "großartig", "während", "morgen"];
Schlüsselwort (Text, Schlüsselwort); // ["Gefällt mir", "Faulenzen", "Wirklich nett", "Währenddessen"]

Saitenumkehr

Funktion ReverseStr(str = "") {
    return str.split("").reduceRight((t, v) => t + v);
}
const str = "Reduzieren ist das Beste";
ReverseStr(str); // „Der leistungsstärkste Ecuder“

Digitale Millennials

Funktion TausendZahl(Zahl = 0) {
    const str = (+num).toString().split(".");
    const int = nums => nums.split("").reverse().reduceRight((t, v, i) => t + (i % 3 ? v : `${v},`), "").replace(/^,|,$/g, "");
    const dec = nums => nums.split("").reduce((t, v, i) => t + ((i + 1) % 3 ? v : `${v},`), "").replace(/^,|,$/g, "");
    gibt str.length > 1 zurück? `${int(str[0])}.${dec(str[1])}` : int(str[0]);
}
TausendZahl(1234); // "1,234"
TausendZahl(1234.00); // "1,234"
TausendZahl(0.1234); // "0.123,4"
TausendZahl(1234.5678); // "1,234.567,8"

Asynchrone Akkumulation

asynchrone Funktion AsyncTotal(arr = []) {
    returniere arr.reduce(async(t, v) => {
        const at = warte auf t;
        const todo = warte auf Todo(v);
        at[v] = zu tun;
        Rückkehr um;
    }, Versprechen.auflösen({}));
}
const result = await AsyncTotal(); // Muss im asynchronen Surround verwendet werden

Fibonacci-Folge

Funktion Fibonacci(Länge = 2) {
    const arr = [...neues Array(Länge).keys()];
    Fügt eine Variable hinzu, die die Regression von t auf v reduziert.
}
Fibonacci(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Deserialisierung von URL-Parametern

Funktion ParseUrlSearch() {
    Rückgabeort.Suche.Ersetzen(/(^\?)|(&$)/g, "").Split("&").Reduce((t, v) => {
        const [Schlüssel, Wert] = v.split("=");
        t[Schlüssel] = decodeURIComponent(Wert);
        Rückkehr t;
    }, {});
}
// Angenommen, die URL lautet: https://www.baidu.com?age=25&name=TYJ
ParseUrlSearch(); // { Alter: "25", Name: "TYJ" }

URL-Parameterserialisierung

Funktion StringifyUrlSearch(Suche = {}) {
    returniere Objekt.Einträge(Suche).Reduzieren(
        (t, v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
        Objekt.Schlüssel(Suche).Länge ? "?" : ""
    ).replace(/&$/, "");
}
StringifyUrlSearch({ Alter: 27, Name: "YZW" }); // "?Alter=27&Name=YZW"

Gibt den Wert des angegebenen Schlüssels im Objekt zurück

Funktion GetKeys(Objekt = {}, Schlüssel = []) {
    gibt Object.keys(obj).reduce((t, v) => (keys.includes(v) && (t[v] = obj[v]), t), {}); zurück.
}
const Ziel = { a: 1, b: 2, c: 3, d: 4 };
const Schlüsselwort = ["a", "d"];
GetKeys(Ziel, Schlüsselwort); // { a: 1, d: 4 }

Array zu Objekt

const Leute = [
    { Gebiet: "GZ", Name: "YZW", Alter: 27 },
    { Gebiet: "SZ", Name: "TYJ", Alter: 25 }
];
const map = Leute.reduce((t, v) => {
    const { name, ...rest } = v;
    t[Name] = Ruhe;
    Rückkehr t;
}, {}); // { YZW: {…}, TYJ: {…} }

Funktionsprinzip von Redux Compose

Funktion Compose(...funs) {
    wenn (funs.length === 0) {
        gibt arg zurück => arg;
    }
    wenn (funs.length === 1) {
        gib Spaß zurück[0];
    }
    returniere funs.reduce((t, v) => (...arg) => t(v(...arg)));
}

Kompatibilität und Leistung

Es ist einfach zu verwenden, aber wie steht es mit der Kompatibilität? Suchen Sie auf Caniuse, die Kompatibilität ist absolut gut und Sie können es bedenkenlos in jedem Projekt verwenden. Seien Sie nicht geizig mit Ihrer Vorstellungskraft und lassen Sie Ihren Fähigkeiten im Bereich der reduzierten Komposition freien Lauf. Für Funktionen, die häufig eine gewisse Akkumulation durchführen, ist „Reduce“ definitiv die bevorzugte Methode.

Darüber hinaus fragen sich manche Studenten vielleicht: Wie steht es um die Leistung von Reduce? Als Nächstes führen wir die Akkumulationsoperation von 1 bis 100.000 für die vier Methoden for, forEach, map und reduce gleichzeitig durch, um die Ausführungszeit jeder der vier Methoden anzuzeigen.

// Erstellen Sie ein Array mit der Länge 100000 const list = [...new Array(100000).keys()];

// für
Konsole.Zeit("für");
lass result1 = 0;
für (lass i = 0; i < Listenlänge; i++) {
    Ergebnis1 += i + 1;
}
konsole.log(ergebnis1);
console.timeEnd("für");

// fürJedes
Konsole.Zeit("fürJeden");
lass result2 = 0;
list.forEach(v => (Ergebnis2 += v + 1));
console.log(Ergebnis2);
console.timeEnd("fürJedes");

// Karte
Konsole.Zeit("Karte");
lass result3 = 0;
list.map(v => (Ergebnis3 += v + 1, v));
console.log(Ergebnis3);
console.timeEnd("Karte");

// reduzieren
console.time("reduzieren");
const result4 = list.reduce((t, v) => t + v + 1, 0);
konsole.log(ergebnis4);
console.timeEnd("reduzieren");
Akkumulationsvorgang Ausführungszeit
für 6.719970703125ms
fürJedes 3.696044921875ms
Karte 3.554931640625ms
reduzieren 2.806884765625ms

Der obige Code wird unter Chrome 79 auf einem MacBook Pro 2019 15 Zoll mit 16 GB Arbeitsspeicher und 512 GB Flash-Speicher ausgeführt. Die Ausführung des obigen Codes kann auf verschiedenen Maschinen und in verschiedenen Umgebungen unterschiedlich sein.

Ich habe mehrere Maschinen und mehrere Browser gleichzeitig getestet und den Vorgang mehr als 10 Mal hintereinander ausgeführt. Ich habe festgestellt, dass die durchschnittliche Gesamtausführungszeit von Reduce immer noch etwas schneller ist als die der anderen drei Methoden, sodass Sie es bedenkenlos verwenden können! In diesem Artikel werden hauptsächlich die Verwendungstechniken von Reduce erläutert. Wenn Sie Fragen zur Kompatibilität und Leistung von Reduce haben, können Sie zur Überprüfung auf relevante Materialien zurückgreifen.

Abschließend gebe ich Ihnen eine von Reduce generierte Multiplikationstabelle: Eins mal sieben ist sieben, zwei mal sieben ist achtundvierzig, der 8. März ist Frauentag, der 1. Mai ist Tag der Arbeit und der 1. Juni ist Kindertag.

Zusammenfassen

Damit ist dieser Artikel über 25 fortgeschrittene Verwendungen von JS Array Reduce abgeschlossen, die Sie kennen müssen. Weitere Inhalte zu fortgeschrittenen Verwendungen von JS Array Reduce finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der Reduce-Methode von Arrays in JavaScript
  • Detaillierte Erklärung der JS-Array-Reduce()-Methode und fortgeschrittener Techniken
  • js Array-Methode reduziert klassische Nutzung Code-Sharing
  • Analyse des Prinzips und der Verwendungsfähigkeiten der JS-Array-Reduce () -Methode
  • Teilen Sie die Magie der Javascript-Array-Methode „Reduce“
  • Detaillierte Erläuterung der Funktion und Verwendung der JS-Array-Reduce-Methode
  • Parsen der JavaScript-Array-Methode „Reduce“
  • Beispielanalyse der Verwendung der JS-Array-Methode „Reduce“
  • Detaillierte Erklärung der Unterschiede zwischen JS-Arrays „Finden“, „Some“, „Filtern“ und „Reduzieren“
  • JavaScript-Array reduziert allgemeine Instanzmethoden

<<:  Konfigurationsmethode für die VMware Kali-Umgebung virtueller Maschinen

>>:  Implementierung der Docker-Bereitstellung von Tomcat- und Webanwendungen

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20

Tutorial zum Herunterladen und Installieren von M...

Implementierung der Nginx-Domänennamenweiterleitung

Einführung in Nginx Nginx („engine x“) ist ein le...

Einführung und Verwendung des Javascript-Generators

Was ist ein Generator? Ein Generator ist ein Code...

Vue + Express + Socket realisiert Chat-Funktion

In diesem Artikel wird der spezifische Code von V...

Zwei Implementierungscodes der programmgesteuerten Navigation mit Vue-Router

Zwei Möglichkeiten zum Navigieren auf der Seite D...

Detaillierte Schritte zur Remotebereitstellung einer MySQL-Datenbank unter Linux

Remotebereitstellung der MySQL-Datenbank unter Li...

Vue implementiert eine Zeit-Countdown-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Mysql | Detaillierte Erklärung der Fuzzy-Abfrage mit Platzhaltern (wie, %, _)

Wildcard-Kategorien: %Prozent-Platzhalter: Gibt a...

Eine SQL-Anweisung schließt die MySQL-Deduplizierung ab und behält eine

Als ich vor einigen Tagen an einer Anforderung ar...