Zusammenfassung zur Verwendung der Reduce()-Methode in JS

Lange Zeit fiel es mir schwer, die spezifische Verwendung der Methode „reduce()“ zu verstehen, und ich habe sie selten verwendet. Wenn Sie es wirklich verstehen, können wir es tatsächlich an vielen Stellen verwenden. Deshalb werden wir heute kurz über die Verwendung von „reduce()“ in JS sprechen.

1. Grammatik

arr.reduce(Funktion(vorherige,aktuell,index,arr){
...
}, init);

In,
arr stellt das ursprüngliche Array dar;
prev stellt den Rückgabewert des letzten Rückrufaufrufs bzw. den Anfangswert init dar;
cur stellt das aktuell verarbeitete Array-Element dar;
Index stellt den Index des aktuell verarbeiteten Array-Elements dar. Wenn der Init-Wert angegeben ist, ist der Index 0, andernfalls ist der Index 1;
init gibt den Anfangswert an.

Sieht es kompliziert aus? Das spielt keine Rolle, es sieht nur so aus. Tatsächlich gibt es nur zwei häufig verwendete Parameter: prev und cur. Als nächstes folgen wir dem Beispiel, um die spezifische Verwendung zu sehen ~

2. Beispiele

Stellen Sie zunächst ein Original-Array bereit:

var arr = [3,9,4,3,6,0,9];

Zum Erreichen der folgenden Anforderungen gibt es viele Möglichkeiten, unter anderem auch die Lösungsmethode mit „reduce()“, die ebenfalls relativ einfach umzusetzen ist.

1. Finden Sie die Summe der Array-Elemente

var Summe = arr.reduce(Funktion (vorherige, aktuelle) {
    Rückgabewert für vorherige + aktuelle;
},0);

Da der Anfangswert 0 übergeben wird, ist der Wert von prev zu Beginn 0 und der Wert von cur ist das erste Element 3 im Array. Nach der Addition ist der Rückgabewert 3 als prev-Wert der nächsten Rückrufrunde und wird dann weiterhin zum nächsten Array-Element addiert und so weiter, bis die Summe aller Array-Elemente vollständig ist und zurückgegeben wird.

2. Finden Sie den Maximalwert eines Array-Elements

var max = arr.reduce(Funktion (vorherige, aktuelle) {
    return Math.max(vorherige,aktuelle);
});

Da kein Anfangswert übergeben wird, ist der Wert von prev 3, das erste Element im Array, und der Wert von cur ist 9, das zweite Element im Array. Nachdem wir den Maximalwert der beiden Werte genommen haben, fahren wir mit der nächsten Rückrufrunde fort.

3. Array-Deduplizierung

var newArr = arr.reduce(Funktion (vorherige, aktuelle) {
    vorheriger.indexOf(aktuell) === -1 && vorheriger.push(aktuell);
    zurück vorh.;
},[]);

Die Grundprinzipien der Umsetzung sind wie folgt:

① Initialisieren Sie ein leeres Array. ② Suchen Sie im Initialisierungsarray nach dem ersten Element im Array, das dedupliziert werden muss. Wenn es nicht gefunden wird (es wird definitiv nicht in einem leeren Array gefunden), fügen Sie das Element zum Initialisierungsarray hinzu. ③ Suchen Sie im Initialisierungsarray nach dem zweiten Element im Array, das dedupliziert werden muss. Wenn es nicht gefunden wird, fügen Sie das Element zum Initialisierungsarray hinzu. ④ ...
⑤ Suche nach dem n-ten Element im Array, das im Initialisierungsarray dedupliziert werden muss. Wenn es nicht gefunden wird, füge das Element dem Initialisierungsarray hinzu. ⑥ Gib das Initialisierungsarray zurück.

3. Andere verwandte Methoden

1. Reduzieren Sie rechts ()

Die Verwendung dieser Methode ist eigentlich die gleiche wie bei „reduce()“, außer dass die Durchlaufreihenfolge umgekehrt ist. Sie beginnt beim letzten Element im Array und durchläuft es vorwärts zum ersten Element.

2. forEach(), map(), every(), some() und filter()

Für weitere Details klicken Sie bitte auf → Einführung in die Array-Traversierung forEach() und map() Methoden in JavaScript und kompatible Schreibmethoden

Zusammenfassung der wichtigsten Punkte:

reduce() ist eine Methode zum Zusammenführen von Arrays. Wie forEach(), map(), filter() und andere Iterationsmethoden durchläuft sie jedes Element im Array. Reduce() kann jedoch gleichzeitig die Ergebnisse der Durchquerung des vorherigen Array-Elements und des aktuellen Durchquerungselements berechnen, was mit anderen Iterationsmethoden nicht möglich ist.

Erster Blick auf die W3C-Grammatik

array.reduce(Funktion(Gesamt, aktuellerWert, aktuellerIndex, arr), Anfangswert);
/*
  Gesamt: erforderlich. Der Anfangswert oder der Rückgabewert nach Abschluss der Berechnung.
  currentValue: erforderlich. Das aktuelle Element.
  currentIndex: Optional. Der Index des aktuellen Elements;                     
  arr: Optional. Das Array-Objekt, zu dem das aktuelle Element gehört.
  Anfangswert: optional. Der an die Funktion übergebene Anfangswert entspricht dem Anfangswert von total.
*/

Allgemeine Verwendung

Array-Summe

const arr = [12, 34, 23];
const Summe = arr.reduce((Gesamt, Num) => Gesamt + Num);
<!-- Setze den Anfangswert auf die Summe -->
const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num, 10); // Summe mit 10 als Anfangswert<!-- Object array sumation-->
var Ergebnis = [
  { Betreff: 'Mathe', Punktzahl: 88 },
  { Betreff: 'Chinesisch', Punktzahl: 95 },
  { Betreff: 'Englisch', Punktzahl: 80 }
];
const Summe = Ergebnis.Reduce((Akkumulator, aktuell) => Akkumulator + aktueller Score, 0); 
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, -10); // Gesamtpunktzahl minus 10 Punkte

Erweiterte Verwendung: Verwendung in Array-Objekten

Konstante a = [23,123,342,12];
const max = a.reduce(Funktion(vor,kurz,inde,arr){return vor>kurz?vor:kurz;}); // 342

<!-- Generieren Sie beispielsweise „der Älteste, der Zweite und der Dritte“ -->

const objArr = [{name: 'Alter Eins'}, {name: 'Alter Zwei'}, {name: 'Alter Drei'}];
const res = objArr.reduce((pre, cur, index, arr) => {
  wenn (Index === 0) {
    gib aktuellen Namen zurück;
  }
  sonst wenn (Index === (arr.Länge - 1)) {
    returniere vor + 'und' + aktueller Name;
  }
  anders {
    returniere vor + '、' + aktueller Name;
  }
}, '');

Finden Sie heraus, wie oft ein Buchstabe in einer Zeichenfolge vorkommt

const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {});

Array zu Objekt

<!-- Nach bestimmten Regeln in ein Array umwandeln-->

var arr1 = [2, 3, 4, 5, 6]; // Jeden Wert quadrieren var newarr = arr1.reduce((accumulator, cur) => {accumulator.push(cur * cur); return accumulator;}, []);

Erweiterte NutzungMehrdimensionale Overlay-Ausführungsvorgänge

<!-- Den Stream entsprechend der ID herausnehmen -->

var streams = [{name: 'Technologie', id: 1}, {name: 'Design', id: 2}];
var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});

Erweiterte NutzungMehrdimensionale Overlay-Ausführungsvorgänge

<!-- Die Gewichtung der einzelnen Fächer ist unterschiedlich, bitte geben Sie das Ergebnis an-->

var Ergebnis = [
  { Betreff: 'Mathe', Punktzahl: 88 },
  { Betreff: 'Chinesisch', Punktzahl: 95 },
  { Betreff: 'Englisch', Punktzahl: 80 }
];
var dis = {
    mathe: 0,5,
    Chinesisch: 0,3,
    Englisch: 0,2
};
var res = result.reduce((Akkumulator, aktuell) => dis[aktuelles.Betreff] * aktueller.Score + Akkumulator, 0);

<!-- Erhöhen Sie den Schwierigkeitsgrad, der Wechselkurs von Waren ist in verschiedenen Ländern unterschiedlich, ermitteln Sie den Gesamtpreis-->

var Preise = [{Preis: 23}, {Preis: 45}, {Preis: 56}];
var Raten = {
  uns: '6.5',
  eu: '7,5',
};
var initialState = {usTotal: 0, euTotal: 0};
var res = Preise.Reduce((Akkumulator, cur1) => Objekt.Schlüssel(Preise).Reduce((prev2, cur2) => {
  console.log(Akkumulator, cur1, vorh.2, cur2);
  Akkumulator [`${cur2}Gesamt`] += cur1.Preis * Preise [cur2];
  Rücklaufakkumulator;
}, {}), Anfangszustand);

var manageReducers = Funktion() {
  Rückgabefunktion (Status, Element) {
    returniere Object.keys(rates).reduce((nextState, key) => {
        Status [`${key}Gesamt`] += Artikelpreis * Preise [Schlüssel];
        Rückgabezustand;
      }, {});
  }
};
var res1 = Preise.Reduce(manageReducers(), Anfangszustand);

Reduzieren eines 2D-Arrays

var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((x, y) => x.concat(y), []);

Objekt-Array-Deduplizierung

Konstante Hash = {};
  Chatlisten = Chatlisten.Reduce((Obj, nächstes: Objekt) => {
    const hashId = `${next.topic}_${next.stream_id}`;
    wenn (!hash[hashId]) {
      Hash [`${next.topic}_${next.stream_id}`] = wahr;
      obj.push(weiter);
    }
    gibt Objekt zurück;
  }, []);

Funktion „Verfassen“
Implementierung des Redux Compose-Quellcodes

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

}

Dies ist das Ende dieses Artikels über die Zusammenfassung der Verwendung der Reduce()-Methode in JS. Weitere relevante Inhalte zur JS Reduce()-Methode finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!