Hauptunterschied zwischen Karte und Reduzieren

Ich habe beide Methoden verwendet, bin aber ziemlich verwirrt über die Verwendung beider Methoden.

Ist etwas, was mapkann, aber reducenicht kann und umgekehrt?

Hinweis: Ich weiß, wie man beide Methoden verwendet. Ich frage nach dem Hauptunterschied zwischen diesen Methoden und wann wir sie verwenden müssen.

Quelle

Beide mapund reducehaben als Eingabe das Array und eine Funktion, die Sie definieren. Sie ergänzen sich in gewisser Weise: Sie mapkönnen nicht ein einzelnes Element für ein Array mehrerer Elemente zurückgeben, während reduceimmer der Akkumulator zurückgegeben wird, den Sie eventuell geändert haben.

map

Mit mapiterieren 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:

// A function which calculates the square
const square = x => x * x

// Use `map` to get the square of each number
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 accumulatorund abgerufen current_elementwerden:

const numbers = [1, 2, 3, 4, 5]

// Calculate the sum
console.log(numbers.reduce(function (acc, current) {
  return acc + current
}, 0)) // < Start with 0

// Calculate the product
console.log(numbers.reduce(function (acc, current) {
  return acc * current
}, 1)) // < Start with 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:

// Using reduce
[1, 2, 3, 4, 5].reduce(function (acc, current) {
    acc.push(current*current);
    return acc;
 }, [])

 // Using map
 [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.

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 xmit f(x)in einigen neuen Wert x1. Wenn Sie "reduzieren", schreiben Sie eine Funktion g(y), die ein Array übernimmt yund ein Array ausgibt y1. Sie arbeiten mit unterschiedlichen Datentypen und liefern unterschiedliche Ergebnisse.

Ich denke, dieses Bild wird Ihnen über den Unterschied zwischen diesen HOC antworten

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 jedoch 2Eingaben - einen Akkumulator und einen aktuellen Wert.

Könnte also reduce()so verwendet werden, als map()ob Sie immer .concatden 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.

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

Beachten Sie Folgendes, um den Unterschied zwischen Karte, Filter und Verkleinerung zu verstehen:

1. Alle drei Methoden werden auf das Array angewendet. Wenn Sie also eine Operation an einem Array ausführen möchten, verwenden Sie diese Methoden.
2. Alle drei folgen funktionalen Ansätzen und daher bleibt das ursprüngliche Array gleich . Das ursprüngliche Array ändert sich nicht, stattdessen wird ein neues Array / Wert zurückgegeben.
3. 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 Name map 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]

4. 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 Name filter. Zum Beispiel

var originalArr = [1,2,3,4]
//[1,2,3,4]
var evenArr = originalArr.filter(function(elem){
  return elem%2==0;
})
//[2,4]

5. ReduceGibt 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ünschen reduce. Sie können sich daran erinnern, dass die Ausgabe eines Arrays auf einen einzigen Wert reduziert ist, daher der Name reduce. Zum Beispiel

var originalArr = [1,2,3,4]
//[1,2,3,4]
var sum = originalArr.reduce(function(total,elem){
  return total+elem;
},0)
//10