JavaScript: Différence entre .forEach () et .map ()

Je sais qu'il y avait beaucoup de sujets comme celui-ci. Et je connais les bases: .forEach()fonctionne sur le tableau d'origine et .map()sur le nouveau.

Dans mon cas:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

Et voici la sortie:

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

Je ne comprends pas pourquoi utiliser practicechange la valeur de bà undefined.
Je suis désolé si c'est une question idiote, mais je suis assez nouveau dans cette langue et les réponses que j'ai trouvées jusqu'à présent ne m'ont pas satisfait.

Ce ne sont pas les mêmes. Laissez-moi vous expliquer la différence.

forEach: Ceci itère sur une liste et applique une opération avec des effets secondaires à chaque membre de la liste (exemple: enregistrement de chaque élément de la liste dans la base de données)

map: Cela itère sur une liste, transforme chaque membre de cette liste, et retourne une autre liste de même taille avec les membres transformés (exemple: transformation de la liste de chaînes en majuscules)

Références

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach "Exécute une fonction fournie une fois par élément du tableau."

• Array.map "Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément de ce tableau."

Donc, forEachne retourne rien. Il appelle simplement la fonction pour chaque élément du tableau, puis c'est fait. Donc, tout ce que vous retournez dans cette fonction appelée est simplement rejeté.

D'autre part, mapappellera de la même manière la fonction pour chaque élément du tableau, mais au lieu de rejeter sa valeur de retour, il la capturera et construira un nouveau tableau de ces valeurs de retour.

Cela signifie également que vous pouvez utiliser mappartout où vous utilisez, forEachmais vous ne devriez toujours pas le faire afin de ne pas collecter les valeurs de retour sans aucun but. Il est simplement plus efficace de ne pas les collecter si vous n'en avez pas besoin.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | carte |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Fonctionnalité | Effectue une opération donnée sur chaque | Effectue une "transformation" donnée sur |
| | élément du tableau | "copie" de chaque élément |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Valeur de retour | Renvoie undefined | Renvoie un nouveau tableau avec tranformed |
| | | éléments quittant le tableau d'origine |
| | | inchangé |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Préférable | Effectuer la non-transformation comme | Obtention d'un tableau contenant la sortie de |
| scénario d'utilisation | traitement sur chaque élément. | quelques traitements effectués sur chaque élément |
| et exemple | | du tableau. |
| | Par exemple, enregistrer tous les éléments dans | |
| | la base de données | Par exemple, obtenir un tableau de |
| | | longueurs de chaque chaîne dans le |
| | | tableau |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

La principale différence que vous devez savoir est que .map()retourne un nouveau tableau alors .forEach()que non. C'est pourquoi vous voyez cette différence dans la sortie. .forEach()opère simplement sur chaque valeur du tableau.

Lire:

• Array.prototype.forEach()- JavaScript | MDN
• Array.prototype.map()- JavaScript | MDN

Vous pouvez également consulter: - Array.prototype.every()- JavaScript | MDN

forEach: si vous souhaitez effectuer une action sur les éléments d'un tableau et que c'est la même chose que vous utilisez pour la boucle. Le résultat de cette méthode ne nous donne pas une sortie acheter juste une boucle à travers les éléments.

map: si vous souhaitez effectuer une action sur les éléments d'un tableau et que vous souhaitez également stocker la sortie de votre action dans un tableau. Ceci est similaire à la boucle for dans une fonction qui renvoie le résultat après chaque itération.

J'espère que cela t'aides.

La différence réside dans ce qu'ils retournent. Après exécution:

arr.map()

renvoie un tableau d'éléments résultant de la fonction traitée; tandis que:

arr.forEach()

renvoie undefined.

Analyse des performances Les boucles For sont plus rapides que map ou foreach lorsque le nombre d'éléments dans un tableau augmente.

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');

Différence entre Foreach et la carte:

Carte() : Si vous utilisez map, map peut retourner un nouveau tableau en itérant le tableau principal.

Foreach () : Si vous utilisez Foreach, il ne peut rien renvoyer pour chaque tableau principal en cours d'itération.

lien useFul : utilisez ce lien pour comprendre la différence

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

Une chose à souligner est que foreach ignore les valeurs non initialisées alors que la carte ne le fait pas.

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

Différence entre forEach () et map ()

pour chaque() une boucle sur les éléments. Il jette les valeurs de retour et retourne toujours undefined.Le résultat de cette méthode ne nous donne pas de sortie.

map () boucle à travers les éléments alloue de la mémoire et stocke les valeurs de retour en itérant le tableau principal

Exemple:

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map () est plus rapide que forEach ()

Map renvoie implicitement alors que forEach ne le fait pas.

C'est pourquoi lorsque vous codez une application JSX, vous utilisez presque toujours map au lieu de forEach pour afficher le contenu dans React .

forEach () :

valeur de retour: non définie

originalArray: modifié après l'appel de la méthode

carte () :

valeur de retour: nouveau tableau rempli avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant

originalArray: non modifié après l'appel de la méthode