Heim > Web-Frontend > js-Tutorial > Detaillierte Erklärung von Reduce und ReduceRight

Detaillierte Erklärung von Reduce und ReduceRight

高洛峰
Freigeben: 2016-10-20 17:02:38
Original
1746 Leute haben es durchsucht

Reduziermethode (aufsteigende Reihenfolge)

Syntax:

array1.reduce(callbackfn[, initialValue])

Detaillierte Erklärung von Reduce und ReduceRight

Rückgabewert :

Das kumulative Ergebnis, das beim letzten Aufruf der Rückruffunktion erhalten wurde.

Ausnahme:

Wenn eine der folgenden Bedingungen erfüllt ist, wird eine TypeError-Ausnahme ausgelöst:

Der callbackfn-Parameter ist kein Funktionsobjekt.

Das Array enthält keine Elemente und es wurde kein Anfangswert bereitgestellt.

Callback-Funktionssyntax:

function callbackfn( previousValue, currentValue, currentIndex, array1)

Sie können bis zu vier Parameter verwenden, um die Callback-Funktion zu deklarieren.

In der folgenden Tabelle sind die Parameter der Rückruffunktion aufgeführt.

Detaillierte Erklärung von Reduce und ReduceRight

Erster Aufruf der Callback-Funktion

Wenn die Callback-Funktion zum ersten Mal aufgerufen wird, hängt der als Parameter bereitgestellte Wert davon ab, ob die Methode Reduce verwendet wird verfügt über einen initialValue-Parameter.

Wenn initialValue für die Reduce-Methode bereitgestellt wird:

Der previousValue-Parameter ist initialValue.

Der Parameter currentValue ist der Wert des ersten Elements im Array.

Wenn initialValue nicht bereitgestellt wird:

Der previousValue-Parameter ist der Wert des ersten Elements im Array.

Der Parameter currentValue ist der Wert des zweiten Elements im Array.

Array-Objekt ändern

Array-Objekt kann durch Rückruffunktion geändert werden.

Die folgende Tabelle beschreibt die Ergebnisse, die durch Ändern des Array-Objekts nach dem Start der Reduzierungsmethode erzielt werden.

Detaillierte Erklärung von Reduce und ReduceRight

Beispiel:

1. Das folgende Beispiel verkettet Array-Werte in Zeichenfolgen, wobei jeder Wert durch „::“ getrennt wird. Da der Reduce-Methode kein Anfangswert bereitgestellt wird, hat der erste Aufruf der Rückruffunktion „abc“ als previousValue-Parameter und „def“ als currentValue-Parameter.

function appendCurrent (previousValue, currentValue) {
    return previousValue + "::" + currentValue;
    }
var elements = ["abc", "def", 123, 456];
var result = elements.reduce(appendCurrent);
document.write(result);
// Output:
//  abc::def::123::456
Nach dem Login kopieren

2. Das folgende Beispiel fügt gerundete Werte zu einem Array hinzu. Die Reduce-Methode wird mit einem Anfangswert von 0 aufgerufen.

function addRounded (previousValue, currentValue) {
    return previousValue + Math.round(currentValue);
    }
var numbers = [10.9, 15.4, 0.5];
var result = numbers.reduce(addRounded, 0);
document.write (result);
// Output: 27
Nach dem Login kopieren

3. Das folgende Beispiel fügt einem Array einen Wert hinzu. Die Parameter currentIndex und array1 werden in der Rückruffunktion verwendet

function addDigitValue(previousValue, currentDigit, currentIndex, array) {
    var exponent = (array.length - 1) - currentIndex;
    var digitValue = currentDigit * Math.pow(10, exponent);
    return previousValue + digitValue;
    }
var digits = [4, 1, 2, 5];
var result = digits.reduce(addDigitValue, 0);
document.write (result);
// Output: 4125
Nach dem Login kopieren

Analyse dieser Frage:

Zuerst wird der Anfangswert 0 angegeben, dann beginnt currentDigit bei 4 und die Methode ist viermal aufgerufen, so dass Schreiben Sie die Parameter der vier Methodenaufrufe aus: (0,4,0,array), (4,1,1,array), (1,2,2,array), (2,5 ,3,array), Berechnen Sie erneut. Da der Anfangswert 0 ist, müssen Sie lediglich den Rückgabewert jeder Methode berechnen und addieren. array.length ist immer 4, dann sind die viermal berechneten Werte 4000 100 20 5=4125

reduceRight-Methode (absteigende Reihenfolge)

Die Syntax von ReduceRight und die Regeln der Callback-Funktion und die Reduzierungsmethode sind gleich, der Unterschied besteht darin, dass die Reduzierung in aufsteigender Reihenfolge erfolgt, d. h. der Index beginnt bei 0, während ReduceRight in absteigender Reihenfolge erfolgt, d. h. der Index beginnt bei arr.length-1. Wenn ein Anfangswert vorhanden ist, beginnt die Berechnung mit der letzten Zahl. Wenn kein Anfangswert vorhanden ist, ist der Parameter previousValue der Wert des letzten Elements im Array und currentValue der Wert des vorletzten Elements im Array.

Beispiel:

1 Das folgende Beispiel ruft die Elemente mit Werten zwischen 1 und 10 im Array ab. Der der Methode „reducRight“ bereitgestellte Anfangswert ist ein leeres Array.

function Process2(previousArray, currentValue) {
    var nextArray;
    if (currentValue >= 1 && currentValue <= 10)
        nextArray = previousArray.concat(currentValue);
    else
        nextArray = previousArray;
    return nextArray;
}
var numbers = [20, 1, -5, 6, 50, 3];
var emptyArray = new Array();
var resultArray = numbers.reduceRight(Process2, emptyArray);
document.write("result array=" + resultArray);
// Output:
//  result array=3,6,1
Nach dem Login kopieren

2. Die Methode „reduceRight“ kann auf Zeichenfolgen angewendet werden. Das folgende Beispiel zeigt, wie Sie mit dieser Methode Zeichen in einer Zeichenfolge umkehren.

function AppendToArray(previousValue, currentValue) {
    return previousValue + currentValue;
}
var word = "retupmoc";
var result = [].reduceRight.call(word, AppendToArray, "the ");
// var result = Array.prototype.reduceRight.call(word, AppendToArray, "the ");
document.write(result);
// Output:
// the computer
Nach dem Login kopieren

Hier können Sie die Methode „reduceRight“ direkt mit einem leeren Array aufrufen und die Methode „call“ zum Einführen von Parametern verwenden. Es kann auch direkt über die Prototypenkette aufgerufen werden, d. h. Array.prototype.reduceRight.call(word, AppendToArray, "the ");

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage