Diferencia principal entre mapa y reducir

Usé ambos métodos, pero estoy bastante confundido con respecto al uso de ambos métodos.

¿Hay algo que mappueda hacer pero reduceno pueda y viceversa?

Nota: Sé cómo usar ambos métodos, estoy cuestionando la diferencia principal entre estos métodos y cuándo debemos usarlos.

Fuente

Ambos mapy reducetienen como entrada la matriz y una función que defina. Son de alguna manera complementarios: mapno pueden devolver un solo elemento para una matriz de elementos múltiples, mientras reduceque siempre devolverán el acumulador que finalmente cambió.

map

Utilizando mapitera los elementos, y para cada elemento devuelve un elemento que desea.

Por ejemplo, si tiene una matriz de números y desea obtener sus cuadrados, puede hacer esto:

// 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

Al usar una matriz como entrada, puede obtener un solo elemento (digamos un Objeto, un Número u otra matriz) basado en la función de devolución de llamada (el primer argumento) que obtiene los parámetros accumulatory current_element:

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

¿Cuál debería elegir cuando puede hacer lo mismo con ambos? Intente imaginar cómo se ve el código. Para el ejemplo proporcionado, puede calcular la matriz de cuadrados como mencionó, usando 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)

Ahora, mirando estos, obviamente la segunda implementación se ve mejor y es más corta. Por lo general, elegiría la solución más limpia, que en este caso es map. Por supuesto, puede hacerlo con reduce, pero en pocas palabras, piense cuál sería más corto y eventualmente sería mejor.

Generalmente, "mapear" significa convertir una serie de entradas en una serie de salidas de igual longitud , mientras que "reducir" significa convertir una serie de entradas en un número menor de salidas.

Lo que la gente quiere decir con "mapa-reducción" se suele interpretar como "transformar, posiblemente en paralelo, combinar en serie".

Cuando "mapa", que está escribiendo una función que transforma xcon f(x)en algún nuevo valor x1. Cuando "reduce" está escribiendo alguna función g(y)que toma matriz yy emite matriz y1. Trabajan con diferentes tipos de datos y producen diferentes resultados.

Creo que esta imagen te responderá sobre la diferencia entre esos HOC

los map() función devuelve una nueva matriz pasando una función sobre cada elemento de la matriz de entrada.

Esto es diferente a lo reduce()que toma una matriz y una función de la misma manera, pero la función toma2 entradas: un acumulador y un valor actual.

Por reduce()lo tanto, podría usarse como map()si siempre estuviera .concaten el acumulador la siguiente salida de una función. Sin embargo, se usa más comúnmente para reducir las dimensiones de una matriz, por lo que se toma una unidimensional y devuelve un valor único o se aplana una matriz bidimensional, etc.

Echemos un vistazo a estos dos uno por uno.

Mapa

Map toma una devolución de llamada y la ejecuta contra cada elemento de la matriz, pero lo que la hace única es que genera una nueva matriz basada en su matriz existente .

var arr = [1, 2, 3];

var mapped = arr.map(function(elem) {
    return elem * 10;
})

console.log(mapped); // it genrate new array

Reducir

El método Reducir del objeto de matriz se utiliza para reducir la matriz a un solo valor .

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

Para comprender la diferencia entre mapa, filtro y reducción, recuerde esto:

1. Los tres métodos se aplican en una matriz, por lo que siempre que desee realizar una operación en una matriz, utilizará estos métodos.
2. Los tres siguen enfoques funcionales y, por lo tanto, la matriz original sigue siendo la misma . La matriz original no cambia, sino que se devuelve una nueva matriz / valor.
3. Map devuelve una nueva matriz con el mismo no. de elementos como hay en la matriz original. Por lo tanto, si la matriz original tiene 5 elementos, la matriz devuelta también tendrá 5 elementos. Este método se usa siempre que queremos hacer algún cambio en cada elemento individual de una matriz. Puede recordar que cada elemento de la matriz ann se asigna a algún valor nuevo en la matriz de salida, por lo tanto, el nombre map Por ejemplo,

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 devuelve una nueva matriz con un número igual o menor de elementos que la matriz original. Devuelve aquellos elementos en la matriz que han pasado alguna condición. Este método se usa cuando queremos aplicar un filtro en la matriz original, por lo tanto, el nombre filter. Por ejemplo,

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

5. Reducedevuelve un valor único, a diferencia de un mapa / filtro. Por lo tanto, siempre que queremos ejecutar una operación en todos los elementos de una matriz pero queremos una única salida con todos los elementos, usamos reduce. Puede recordar que la salida de una matriz se reduce a un solo valor, por lo tanto, el nombre reduce. Por ejemplo,

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