Syntax und Beispielanalyse der JavaScript-Array-Methode „reduce()“

Vorwort

Die Methode „reduce()“ erhält eine Funktion als Akkumulator und jeder Wert im Array (von links nach rechts) wird auf einen einzelnen Wert reduziert.

Reduce führt die Rückruffunktion der Reihe nach für jedes Element im Array aus (ausgenommen Elemente, die gelöscht wurden oder im Array nie zugewiesen wurden) und akzeptiert vier Parameter: den Anfangswert (oder den Rückgabewert der vorherigen Rückruffunktion), den aktuellen Elementwert, den aktuellen Index und das Array, für das Reduce aufgerufen wird.

Unter den Array-Methoden von Javascript wird „Reduce“ im Vergleich zu häufig verwendeten Iterationsmethoden wie „Map“, „Filter“, „ForEach“ usw. oft übersehen. Lassen Sie uns heute die wunderbaren Einsatzmöglichkeiten von „Reduce“ in unserer tatsächlichen Entwicklung erkunden. Beginnen wir mit der Reduce-Syntax.

1. Grammatik

array.reduce(Funktion(vorherige, aktuell, Index, arr), Anfangswert)
//Kurzform zur einfachen Erklärung arr.reduce(callback,[initialValue])

Bedeutung der Parameter:

Rückruf (eine Funktion, die für jeden Wert im Array ausgeführt wird und vier Parameter enthält)
1. previousValue (der vom letzten Rückrufaufruf zurückgegebene Wert oder der bereitgestellte Anfangswert)
2. currentValue (das aktuell im Array verarbeitete Element)
3. index (Index des aktuellen Elements im Array)
4. Array (Array, für das Reduce aufgerufen wird)
initialValue (als erster Parameter des ersten Callback-Aufrufs.) Ähnlich wie beim Setzen des Anfangswertes

2. Beispiel für die Analyse des initialValue-Parameters

Schauen wir uns das erste Beispiel an:

var arr = [1, 2, 3, 4];
var Summe = arr.reduce(Funktion(vorherige, aktuelle, Index, arr) {
    console.log(vorherige, aktuell, index);
    Rückgabewert für vorherige + aktuelle;
})
console.log(arr, Summe);
//Ergebnisse drucken:
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

Hier ist ersichtlich, dass der Index im obigen Beispiel bei 1 beginnt und der Wert von prev beim ersten Mal der erste Wert des Arrays ist. Die Array-Länge beträgt 4, aber die Reduce-Funktion wird dreimal durchlaufen.

Schauen wir uns das zweite Beispiel an:

var arr = [1, 2, 3, 4];
var Summe = arr.reduce(Funktion(vorherige, aktuelle, Index, arr) {
    console.log(vorherige, aktuell, index);
    Rückgabewert für vorherige + aktuelle;
},0) //Beachten Sie, dass hier der Anfangswert festgelegt ist console.log(arr, sum);
//Ergebnisse drucken:
//0 1 0
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

In diesem Beispiel beginnt der Index bei 0, der erste Wert von prev ist der von uns festgelegte Anfangswert 0, die Array-Länge beträgt 4 und die Reduce-Funktion wird 4-mal durchlaufen.

Fazit: Wenn initialValue nicht angegeben ist, führt Reduce die Rückrufmethode beginnend bei Index 1 aus und überspringt den ersten Index. Wenn „initialValue“ angegeben ist, beginnen Sie bei Index 0.

Hinweis: Was passiert, wenn das Array bei der Verwendung von „Reduce“ leer ist?

var arr = [];
var Summe = arr.reduce(Funktion(vorherige, aktuelle, Index, arr) {
    console.log(vorherige, aktuell, index);
    Rückgabewert für vorherige + aktuelle;
})
//Fehler, „TypeError: Reduzieren eines leeren Arrays ohne Anfangswert“

Wenn wir jedoch den Anfangswert festlegen, tritt kein Fehler auf:

var arr = [];
var Summe = arr.reduce(Funktion(vorherige, aktuelle, Index, arr) {
    console.log(vorherige, aktuell, index);
    Rückgabewert für vorherige + aktuelle;
}，0)
console.log(arr, Summe); // [] 0

Daher ist es im Allgemeinen sicherer, einen Anfangswert anzugeben

3. Einfache Verwendung von Reduce

Die einfachste Methode ist natürlich die von uns häufig verwendete Array-Summation und das Array-Produkt.

var arr = [1, 2, 3, 4];
var Summe = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( Summe ); // Summe, 10
console.log( mul ); //Finde das Produkt, 24

4. Erweiterte Verwendung von „Reduce“

(1) Zählen Sie, wie oft jedes Element in einem Array vorkommt

lass Namen = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
lass nameNum = Namen.reduce((pre,cur)=>{
  wenn (aktuell in vor) {
    vor[aktuell]++
  }anders{
    vor[aktuell] = 1 
  }
  Rückkehr vor
},{})
console.log(NameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

(2) Array-Deduplizierung

sei arr = [1,2,3,4,4,1]
lass newArr = arr.reduce((pre,cur)=>{
    wenn (!pre.includes(cur)) {
      returniere pre.concat(aktuell).
    }anders{
      Rückkehr vor
    }
},[])
console.log(newArr); // [1, 2, 3, 4]

(3) Konvertieren Sie ein zweidimensionales Array in ein eindimensionales Array

sei arr = [[0, 1], [2, 3], [4, 5]]
lass newArr = arr.reduce((pre,cur)=>{
    returniere pre.concat(aktuell).
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

(3) Konvertieren Sie ein mehrdimensionales Array in ein eindimensionales Array

sei arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = Funktion(arr){
   returniere arr.reduce((vorher, aktuell)=>vorher.concat(Array.isArray(aktuell)?newArr(aktuell):aktuell),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

(4) Summierung der Attribute in einem Objekt

var Ergebnis = [
    {
        Betreff: 'Mathe',
        Punktzahl: 10
    },
    {
        Betreff: 'Chinesisch',
        Punktzahl: 20
    },
    {
        Betreff: 'Englisch',
        Punktzahl: 30
    }
];
var Summe = Ergebnis.Reduce(Funktion(vorherige, aktuell) {
    gibt aktuellen Score + vorherigen zurück;
}, 0);
console.log(Summe) //60

Zusammenfassen

Dies ist das Ende dieses Artikels über die JavaScript-Array-Reduce()-Methode. Weitere verwandte Inhalte zur JS-Array-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!