Quelle est la différence entre .map, .every et .forEach?

118

Je me suis toujours demandé quelle était la différence entre eux. Ils semblent tous faire la même chose ...

0x499602D2
la source
6
Quelqu'un a ajouté une balise jQuery ... considérant everyque ce forEachne sont pas des méthodes jQuery, je pense qu'il est peu probable que la question se rapporte à jQuery de quelque manière que ce soit. developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6
James Allardice
Je pense que ce lien devrait avoir la réponse que vous recherchez.
zBomb
Ai-je raison de penser que vous faites référence aux nouvelles méthodes de tableau spécifiques à Mozilla, comme détaillé dans le lien de mon commentaire précédent?
James Allardice
@James - Ce ne sont pas spécifiques à Mozilla . Je partagerais aussi un lien vers des documents sur le webkit et l'opéra, mais je ne sais pas où ils se situent au-dessus de ma tête.
gilly3
@ gilly3 - Ahh, bon point. Je pense qu'ils ne sont pris en charge que dans IE9, pas en dessous.
James Allardice

Réponses:

224

La différence réside dans les valeurs de retour.

.map() renvoie un nouveau tableau d'objets créé en effectuant une action sur l'élément d'origine.

.every() renvoie un booléen - vrai si chaque élément de ce tableau satisfait la fonction de test fournie. Une différence importante avec .every()est que la fonction de test peut ne pas toujours être appelée pour chaque élément du tableau. Une fois que la fonction de test renvoie false pour un élément, aucun autre élément de tableau n'est itéré. Par conséquent, la fonction de test ne devrait généralement pas avoir d' effets secondaires .

.forEach() ne retourne rien - Il itère le tableau en effectuant une action donnée pour chaque élément du tableau.

Lisez à propos de ceux-ci et de nombreux autres méthodes méthodes d'itération Array sur MDN .

gilly3
la source
Alternativement, le MDN pourrait être cité
JoshWillik
3
@josh - J'ai cité MDN. Chaque nom de méthode est lié à sa documentation correspondante chez MDN.
gilly3
@ gilly3, mes excuses, j'ai passé sous
silence
.forEach () retourne rien de mal maintenant, peut-être que ce n'était pas en 2012 mais en 2015 au moins dans Chrome, essayez ceci arr2 = ['sue', 'joe', 'ben', 'guy', 'tom', 'jon ']; b = arr2.forEach (fonction (el, indx) {console.log (indx + ':' + el);}); console.log (b);
jason
1
@EugeneMercer Par "élément d'origine", j'entends la valeur d'origine de chaque élément du tableau.
gilly3
88

La réponse de gilly3 est excellente. Je voulais juste ajouter un peu d'informations sur d'autres types de fonctions de "boucle à travers les éléments".

  • .every() (arrête de boucler la première fois que l'itérateur retourne false ou quelque chose de falsey)
  • .some() (arrête de boucler la première fois que l'itérateur retourne vrai ou quelque chose de vrai)
  • .filter() (crée un nouveau tableau comprenant des éléments où la fonction de filtre renvoie true et en omettant ceux où elle renvoie false)
  • .map() (crée un nouveau tableau à partir des valeurs renvoyées par la fonction itérateur)
  • .reduce() (crée une valeur en appelant de manière répétée l'itérateur, en passant les valeurs précédentes; voir la spécification pour les détails; utile pour additionner le contenu d'un tableau et bien d'autres choses)
  • .reduceRight() (comme réduire, mais fonctionne dans l'ordre décroissant plutôt que croissant)

crédit à: TJCrowder Pour-chacun sur un tableau en JavaScript?

raphaelgontijolopes
la source
Obtenez 100 likes de moi!
Shamim le
6

Une autre considération aux bonnes réponses ci-dessus est le chaînage. Avec forEach (), vous ne pouvez pas enchaîner, mais avec map (), vous le pouvez.

Par exemple:

var arrayNumbers = [3,1,2,4,5];

arrayNumbers.map(function(i) {
    return i * 2
}).sort();

avec .forEach (), vous ne pouvez pas faire le .sort (), vous obtiendrez une erreur.

Nadine Rose
la source
0

Pour Ramda , la différence entre R.map()et R.forEach()est:

  1. R.forEach()renvoie le tableau d'origine alors que R.map()renvoie un foncteur
  2. R.forEach()ne peut opérer que sur un tableau mais R.map()peut également fonctionner sur un objet (c'est-à-dire que les paires clé / valeur de l'objet sont traitées comme un tableau)
Michael Osofsky
la source
La question est liée au langage Javascript. Ramda, tout en étant génial, est un sujet et une bibliothèque entièrement différents.
SeaWarrior404