Principale différence entre map et reduce

Question

J'ai utilisé les deux méthodes, mais je suis assez confus quant à leur utilisation.

Est-ce que quelque chose qui map peut faire mais reduce et vice versa ?

Note : Je sais comment utiliser les deux méthodes, mais je m'interroge sur les principales différences entre ces méthodes et sur le moment où elles doivent être utilisées.

Answer 1

Examinons-les l'une après l'autre.

Carte

Map prend un callback et l'exécute sur chaque élément du tableau, mais qu'est-ce que la rend unique, c'est qu'elle générer un nouveau tableau à partir du tableau existant .

var arr = [1, 2, 3];

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

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

Réduire

La méthode de réduction de l'objet tableau est utilisée pour réduire le tableau à une seule valeur .

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

Answer 2

Pour comprendre la différence entre map, filter et reduce, rappelez-vous ceci :

1. Les trois méthodes sont appliquées au tableau Ainsi, chaque fois que vous voudrez effectuer une opération sur un tableau, vous utiliserez ces méthodes.

2. Les trois suivent des approches fonctionnelles et, par conséquent, les le tableau original reste le même . Le tableau original ne change pas, mais un nouveau tableau/valeur est renvoyé.

3. Map renvoie un nouveau tableau avec le même nombre d'éléments que dans le tableau d'origine. Par conséquent, si le tableau original comporte 5 éléments, le tableau retourné comportera également 5 éléments. Cette méthode est utilisée lorsque l'on souhaite modifier chaque élément d'un tableau. Vous pouvez vous rappeler que chaque élément d'un tableau est mappé à une nouvelle valeur dans le tableau de sortie, c'est pourquoi le nom map Par exemple,

   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 renvoie un nouveau tableau avec un nombre égal/moins élevé d'éléments que le tableau original. Elle renvoie les éléments du tableau qui ont satisfait à une certaine condition. Cette méthode est utilisée lorsque l'on souhaite appliquer un filtre au tableau original, d'où son nom. filter . Par exemple,

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

5. Reduce renvoie une seule valeur, contrairement à une carte ou un filtre. Par conséquent, lorsque nous voulons exécuter une opération sur tous les éléments d'un tableau mais que nous voulons un seul résultat utilisant tous les éléments, nous utilisons la fonction reduce . Vous pouvez vous rappeler que la sortie d'un tableau est réduite à une seule valeur, d'où le nom reduce . Par exemple,

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

Answer 3

La fonction map exécute une fonction donnée sur chaque élément, tandis que la fonction reduce exécute une fonction qui réduit le tableau à une seule valeur. Je vais donner un exemple des deux :

// map function
var arr = [1, 2, 3, 4];
var mappedArr = arr.map((element) => { // [10, 20, 30, 40]
return element * 10;

}) 
// reduce function
var arr2 = [1, 2, 3, 4]
var sumOfArr2 = arr2.reduce((total, element) => { // 10
return total + element; 

})