8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden

8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden

reduce Methode ist eine Array-Iterationsmethode. Im Gegensatz zu map und filter kann reduce Methode eine Variable zwischenspeichern. Während der Iteration können wir mit dieser Variable arbeiten und sie dann zurückgeben.

Dies ist meine Erklärung im Klartext. Sie ist möglicherweise trotzdem schwer zu verstehen. Schauen wir uns die folgenden Beispiele an.

1. Array-Akkumulation

Array-Akkumulation kommt häufig in Projekten vor, beispielsweise bei der Berechnung des Gesamtpreises von Waren. Mit reduce kann dies in einer Codezeile erfolgen, ohne dass externe Variablen definiert werden müssen. „Reduce“ ist eine Funktion ohne Nebeneffekte.

// Akkumulieren [1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i);
// Ausgabe: 36

// Akkumulieren, mit einem Standardanfangswert von [1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a + i, 5);
// Ausgabe: 41

// Akkumulieren [1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => a * i);
// Ausgabe: 40320

2. Finden Sie den Maximalwert eines Arrays

In jeder Iteration des Arrays verwenden wir Math.max , um den Maximalwert zu erhalten und zurückzugeben. Am Ende erhalten wir den Maximalwert aller Elemente im Array.

[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));

Wenn jedes Element im Array eine Zahl ist, können wir natürlich den Spread-Operator ... in Verbindung mit Math.max verwenden.

Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);

3. Umgang mit unregelmäßigen Arrays

Durch die gemeinsame Verwendung von map und reduce wird das verknüpfte Ergebnis jedes Unterarrays zurückgegeben.

let Daten = [
  ["rot","128g","iPhone"],
  ["Nord-Süd","Zwei Schlafzimmer und ein Wohnzimmer","128㎡","Haus im westlichen Stil"],
  ["Xiaomi","weiß","intelligente Sportuhr","Herzfrequenz, Blutdruck, Blutsauerstoff","Anruf-Nachrichtenerinnerung"], 
  ["Offizielle Veröffentlichung","Herbst 2020","Basketball","Sneakers","Marken-Direktmailing"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))

// Ausgabe:
["Rotes 128g Apple-Handy"
„Nord-Süd-Haus im westlichen Stil mit zwei Schlafzimmern und einem Wohnzimmer, 128 m²“
„Xiaomi weiße intelligente Sportuhr mit Herzfrequenz, Blutdruck, Blutsauerstoff, Anrufinformationserinnerung“
„Offizieller Verkauf von Basketballschuhen der Marke für Herbst 2020 per Direktwerbung“]

4. Datenduplikate beseitigen

Überprüft, ob das aktuelle Iterationselement vorhanden ist, und fügt es dem Array hinzu, wenn es nicht vorhanden ist.

lass array = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c'];
array.reduce((keineDupes, curVal) => {
  wenn (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }
  returniere keine Duplikate
}, [])

// Ausgabe: [1, 2, 3, 'a', 'b', 'c']

5. Überprüfen Sie, ob die Klammern gültig sind

Dies ist eine sehr clevere Verwendung, die ich auf dev.to gesehen habe. Wenn das Ergebnis gleich 0 ist, bedeutet dies, dass die Anzahl der Klammern zulässig ist.

[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
// Ausgabe: 0

// Mit der Loop-Methode let status=0
für (sei i von [..."(())()(()())"]) {
  wenn(i === "(")
    Status = Status + 1
  sonst wenn(i === ")")
    Status = Status - 1
  wenn (Status < 0) {
    brechen;
  }
}

6. Gruppieren nach Attributen

Gruppieren Sie die Daten nach dem angegebenen Schlüssel. Hier verwende ich das Länderfeld zum Gruppieren. Überprüfen Sie bei jeder Iteration, ob das aktuelle Land vorhanden ist. Wenn nicht, erstellen Sie ein Array und fügen Sie die Daten in das Array ein. Und gibt das Array zurück.

let obj = [
  {name: '张三', job: 'Datenanalyst', land: '中国'},
  {name: 'Ace', job: 'Wissenschaftler', land: 'China'},
  {name: 'Leir', job: 'Wissenschaftler', country: 'Vereinigte Staaten'},
  {name: 'Bob', job: 'Software Engineer', country: 'Indien'},
]

obj.reduce((Gruppe, curP) => {
  let newkey = curP['Land']
  wenn(!Gruppe[neuerSchlüssel]){
    Gruppe[neuer Schlüssel]=[]
  }
  Gruppe[neuerSchlüssel].push(aktuellerP)
  Rücklaufgruppe
}, [])
// Ausgabe:
[ China: [{…}, {…}]
  Indien: [{…}]
  Vereinigte Staaten: [{…}] ]

7. Array-Abflachung

Das hier gezeigte Array ist nur eine Ebene tief. Wenn das Array mehrere Ebenen hat, können Sie es rekursiv verarbeiten.

[[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce((singleArr, nextArray) => singleArr.concat(nextArray), [])
// Ausgabe: [3, 4, 5, 2, 5, 3, 4, 5, 6]

Natürlich können Sie stattdessen auch die .flat-Methode von ES6 verwenden

[ [3, 4, 5], 
 [2, 5, 3], 
 [4, 5, 6]
].Wohnung();

8. Eine Zeichenfolge umkehren

Dies ist auch eine wunderbare Möglichkeit,

[..."hallo Welt"].reduce((a,v) => v+a)

oder

[..."hallo welt"].reverse().join('')

Das könnte Sie auch interessieren:
  • 5 grundlegende Anwendungsbeispiele von reduce() in JavaScript
  • JavaScript-Array-Reduzierungsmethode ()
  • Zusammenfassung zur Verwendung der Reduce()-Methode in JS
  • js verwendet die Reduce-Methode, um Ihren Code eleganter zu gestalten
  • Detaillierte Erklärung von JavaScript Reduce
  • Detaillierte Erläuterung der grundlegenden Verwendung von JavaScript Reduce

<<:  Detailliertes Tutorial zur Installation der MySQL-Datenbank auf Alibaba Cloud Server

>>:  So stellen Sie zabbix_agent in Docker bereit

Artikel empfehlen

So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet

Herkunft Zurzeit arbeite ich an Anforderung A, in...

So installieren Sie pyenv unter Linux

Voraussetzungen Git muss installiert werden Insta...

So lösen Sie das Problem „Nginx 503-Dienst vorübergehend nicht verfügbar“

In letzter Zeit tritt nach dem Aktualisieren der ...

Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows

Einen Fehler melden Der Apache\Nginx-Dienst wurde...

So installieren und implementieren Sie einen FTP-Image-Server unter Linux

Lesen Sie das Tutorial zum Einrichten eines FTP-S...

So verwenden Sie die MySQL-Indexzusammenführung

Die Indexzusammenführung ist ein intelligenter Al...

CentOS8-Netzwerkkarten-Konfigurationsdatei

1. Einleitung CentOS8-Systemupdate, die neue Vers...

So wählen Sie alle untergeordneten Elemente aus und fügen ihnen in CSS Stile hinzu

Verfahren: Nehmen wir „less“ im tatsächlichen Pro...

SQL-Funktion zum Zusammenführen eines Feldes

Vor kurzem musste ich alle Felder einer verknüpft...

Detailliertes Installationstutorial für Mysql5.7.19 unter Centos7

1. Herunterladen Laden Sie mysql-5.7.19-linux-gli...

CSS3 zum Erzielen eines dynamischen Hintergrundverlaufseffekts

Beim Erlernen von CSS3 geht es mehr darum, sich m...

Zusammenfassung der Methoden zum Bereinigen von Mysql general_log

Methode 1: GLOBAL festlegen general_log = "A...

So verwenden Sie & und nohup im Hintergrund von Linux

Wenn wir in einem Terminal oder einer Konsole arb...