VorwortReduce 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.
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.
Erweiterte NutzungDas 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 LeistungEs 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");
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. ZusammenfassenDamit 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:
|
<<: Konfigurationsmethode für die VMware Kali-Umgebung virtueller Maschinen
>>: Implementierung der Docker-Bereitstellung von Tomcat- und Webanwendungen
Inhaltsverzeichnis Zusammenfassung Problembeschre...
Tutorial zum Herunterladen und Installieren von M...
Einführung in Nginx Nginx („engine x“) ist ein le...
Was ist ein Generator? Ein Generator ist ein Code...
1. Zielumgebung Windows 7 64-bit 2. Materialien (...
In diesem Artikel wird der spezifische Code von V...
Zwei Möglichkeiten zum Navigieren auf der Seite D...
Inhaltsverzeichnis Stellen Sie httpd mit dem Quel...
Dieser Artikel veranschaulicht anhand von Beispie...
1. Datendeduplizierung Bei der täglichen Arbeit k...
Remotebereitstellung der MySQL-Datenbank unter Li...
In diesem Artikelbeispiel wird der spezifische Co...
Wildcard-Kategorien: %Prozent-Platzhalter: Gibt a...
Als ich vor einigen Tagen an einer Anforderung ar...
Im DOM-Ereignismodell von JavaScript werden Ereig...