Quelle
Beide map
und reduce
haben als Eingabe das Array und eine Funktion, die Sie definieren. Sie ergänzen sich in gewisser Weise: Sie map
können nicht ein einzelnes Element für ein Array mehrerer Elemente zurückgeben, während reduce
immer der Akkumulator zurückgegeben wird, den Sie eventuell geändert haben.
map
Mit map
iterieren Sie die Elemente und geben für jedes Element ein gewünschtes Element zurück.
Wenn Sie beispielsweise eine Reihe von Zahlen haben und deren Quadrate erhalten möchten, können Sie Folgendes tun:
const square = x => x * x
console.log([1, 2, 3, 4, 5].map(square))
reduce
Wenn Sie ein Array als Eingabe verwenden, können Sie ein einzelnes Element (z. B. ein Objekt, eine Zahl oder ein anderes Array) basierend auf der Rückruffunktion (dem ersten Argument) abrufen, mit der die Parameter accumulator
und abgerufen current_element
werden:
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.reduce(function (acc, current) {
return acc + current
}, 0))
console.log(numbers.reduce(function (acc, current) {
return acc * current
}, 1))
Welches sollten Sie wählen, wenn Sie mit beiden dasselbe tun können? Versuchen Sie sich vorzustellen, wie der Code aussieht. Für das bereitgestellte Beispiel können Sie das Quadratarray wie erwähnt wie folgt berechnen reduce
:
[1, 2, 3, 4, 5].reduce(function (acc, current) {
acc.push(current*current);
return acc;
}, [])
[1, 2, 3, 4, 5].map(x => x * x)
Wenn man sich diese anschaut, sieht die zweite Implementierung offensichtlich besser aus und ist kürzer. Normalerweise wählen Sie die sauberere Lösung, in diesem Fall map
. Natürlich können Sie es damit machen reduce
, aber kurz gesagt, denken Sie, was kürzer und schließlich besser wäre.
reduce
? Das kannst du nicht, das habe ich in diesen Beispielen gezeigt.console.log([1, 2, 3, 4, 5].reduce(function (acc, current) { acc.push( current = current*current); return acc; }, []))
Im Allgemeinen bedeutet "Map" das Konvertieren einer Reihe von Eingaben in eine Reihe von Ausgängen gleicher Länge , während "Reduzieren" das Konvertieren einer Reihe von Eingängen in eine kleinere Anzahl von Ausgängen bedeutet.
Was Menschen unter "Kartenreduzierung" verstehen, wird normalerweise so ausgelegt, dass sie "möglicherweise parallel transformieren, seriell kombinieren".
Wenn Sie „Karte“, gerade schreiben Sie eine Funktion , die Transformationen
x
mitf(x)
in einigen neuen Wertx1
. Wenn Sie "reduzieren", schreiben Sie eine Funktiong(y)
, die ein Array übernimmty
und ein Array ausgibty1
. Sie arbeiten mit unterschiedlichen Datentypen und liefern unterschiedliche Ergebnisse.quelle
Ich denke, dieses Bild wird Ihnen über den Unterschied zwischen diesen HOC antworten
quelle
Die
map()
Funktion gibt ein neues Array zurück, indem sie eine Funktion über jedes Element im Eingabearray übergibt.Dies unterscheidet sich
reduce()
davon, dass ein Array und eine Funktion auf dieselbe Weise verwendet werden, die Funktion jedoch2
Eingaben - einen Akkumulator und einen aktuellen Wert.Könnte also
reduce()
so verwendet werden, alsmap()
ob Sie immer.concat
den nächsten Ausgang einer Funktion auf den Akku legen. Es wird jedoch häufiger verwendet, um die Abmessungen eines Arrays zu reduzieren, sodass entweder ein eindimensionales Array verwendet und ein einzelner Wert zurückgegeben oder ein zweidimensionales Array abgeflacht wird usw.quelle
Schauen wir uns diese beiden nacheinander an.
Karte
Map nimmt einen Rückruf entgegen und führt ihn für jedes Element im Array aus. Was es jedoch einzigartig macht, ist, dass es ein neues Array basierend auf Ihrem vorhandenen Array generiert .
var arr = [1, 2, 3]; var mapped = arr.map(function(elem) { return elem * 10; }) console.log(mapped); // it genrate new array
Reduzieren
Die Reduzierungsmethode des Array-Objekts wird verwendet, um das Array auf einen einzelnen Wert zu reduzieren .
var arr = [1, 2, 3]; var sum = arr.reduce(function(sum, elem){ return sum + elem; }) console.log(sum) // reduce the array to one single value
quelle
Beachten Sie Folgendes, um den Unterschied zwischen Karte, Filter und Verkleinerung zu verstehen:
Map
Gibt ein neues Array mit der gleichen Nr. zurück. von Elementen wie im ursprünglichen Array. Wenn das ursprüngliche Array 5 Elemente enthält, enthält das zurückgegebene Array daher auch 5 Elemente. Diese Methode wird immer dann verwendet, wenn Änderungen an jedem einzelnen Element eines Arrays vorgenommen werden sollen. Sie können sich daran erinnern, dass jedes Element eines Ann-Arrays einem neuen Wert im Ausgabearray zugeordnet wird, daher der Namemap
z.var originalArr = [1,2,3,4] //[1,2,3,4] var squaredArr = originalArr.map(function(elem){ return Math.pow(elem,2); }); //[1,4,9,16]
Filter
Gibt ein neues Array mit der gleichen / weniger Anzahl von Elementen als das ursprüngliche Array zurück. Es gibt die Elemente im Array zurück, die eine Bedingung erfüllt haben. Diese Methode wird verwendet, wenn ein Filter auf das ursprüngliche Array angewendet werden soll, daher der Namefilter
. Zum Beispielvar originalArr = [1,2,3,4] //[1,2,3,4] var evenArr = originalArr.filter(function(elem){ return elem%2==0; }) //[2,4]
Reduce
Gibt im Gegensatz zu einer Karte / einem Filter einen einzelnen Wert zurück. Daher verwenden wir immer dann, wenn wir eine Operation für alle Elemente eines Arrays ausführen möchten, aber eine einzelne Ausgabe mit allen Elementen wünschenreduce
. Sie können sich daran erinnern, dass die Ausgabe eines Arrays auf einen einzigen Wert reduziert ist, daher der Namereduce
. Zum Beispielvar originalArr = [1,2,3,4] //[1,2,3,4] var sum = originalArr.reduce(function(total,elem){ return total+elem; },0) //10
quelle