web-dev-qa-db-fra.com

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() opère 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 ceci est 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 practice change la valeur de b en undefined.
Je suis désolé si cette question est stupide, mais je suis assez nouveau dans ce langage et les réponses que j’ai trouvées jusqu’à présent ne me satisfaisaient pas.

javascriptarraysloopsforeach
86
DzikiChrzan

Ils ne sont pas identiques. Laisse-moi expliquer la différence.

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

map: Ceci parcourt une liste, transforme chaque membre de cette liste et renvoie une autre liste de la même taille avec les membres transformés (exemple: transformer la liste de chaînes en majuscules)

Références

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

110
Richard Hamilton

  • Array.forEach “exécute une fonction fournie une fois par élément de 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, forEach ne renvoie rien en réalité. Il appelle simplement la fonction pour chaque élément du tableau, puis c’est fait. Ainsi, tout ce que vous retournez dans cette fonction appelée est simplement ignoré.

D'autre part, map appellera de manière similaire la fonction pour chaque élément de tableau, mais au lieu de supprimer sa valeur de retour, il la capturera et construira un nouveau tableau contenant ces valeurs de retour.

Cela signifie également que vous pourriez utiliser map où que vous utilisiez forEach, mais vous ne devriez toujours pas le faire. Ne recueillez pas les valeurs de retour sans but. C’est tout simplement plus efficace de ne pas les collecter si vous n’en avez pas besoin.

48
poke
 + ---------------- + --------------------------- ---------- + ------------------------------------------- + 
 | | foreach | map | 
 + ---------------- + ------------------------- ------------ + ----------------------------------------- - + 
 | Fonctionnalité | Effectue une opération donnée sur chaque | Effectue la "transformation" donnée le | 
 | | élément du tableau | "copie" de chaque élément | 
 + ---------------- + -------------------- ----------------- + -------------------------------- ------- + 
 | Valeur de retour | Renvoie undefined | Renvoie un nouveau tableau avec le format | | .____.] | | | éléments laissant le tableau d'origine | 
 | | | inchangé | 
 + ---------------- + ------------------------- ------------ + ----------------------------------------- - + 
 | Préférable | Effectuer une non-transformation comme | Obtention d'un tableau contenant la sortie de | 
 | scénario d'utilisation | traitement sur chaque élément. | certains traitements sont 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 | 
 + ---------------- + ------------------------- ------------ + ----------------------------------------- - +
18
Mahesha999

La principale différence que vous devez connaître est que .map() renvoie un nouveau tableau alors que .forEach() ne le fait pas. C'est pourquoi vous voyez cette différence dans la sortie. .forEach() n'agit que sur toutes les valeurs du tableau.

Lire:

Vous pouvez également vouloir vérifier: - Array.prototype.every() - JavaScript | MDN

15
Rahul Desai

forEach: Si vous souhaitez effectuer une action sur les éléments d'un tableau et que vous utilisez la même boucle que vous. Le résultat de cette méthode ne nous donne pas un achat de sortie mais une boucle entre les éléments.

map: Si vous souhaitez effectuer une action sur les éléments d'un tableau et que vous souhaitez également stocker le résultat 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.

7
Amarnath Jeyakumar

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()

retourne non défini.

4
Godwin Ekuma

Analyse de performance Les boucles for fonctionnent plus rapidement 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');
2
sonia kaushal