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

Je sais qu'il y avait beaucoup de sujets de ce genre. Et je sais que les principes de base: .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 c'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 à l'aide de practice changements de la valeur de b à undefined.

Je suis désolé si cette question idiote, mais je suis assez nouveau dans cette langue, et des réponses que j'ai trouvé jusqu'à présent ne me satisfont pas.

  • C'est simple: .map renvoie un nouveau tableau, alors que .forEach ne retourne rien. En gros, si vous voulez obtenir une forme modifiée du tableau précédent, vous utilisez .map, si vous ne voulez pas que, vous utilisez .forEach.
  • Double Possible de que fait le javascript forEach méthode (que la carte ne peut pas le faire)?
  • J'ai lu ce sujet avant d'en créer un nouveau, mais la réponse n'a pas satisfiy moi.
  • Ne pas dire qu'il ne vous satisfait pas. Comment exactement, n'est-ce pas répondre à votre question (avez-vous lu toutes les réponses?)? Qu'est-ce que votre question spécifique qui n'est pas couvert par le projet de double cible?
  • Cette question traite de l'auto-mise en œuvre des fonctions, et n'est pas vraiment à propos de la standardisation dans l'ES5 fonctions.
  • Voir l'article JavaScript — Carte vs ForEach

InformationsquelleAutor DzikiChrzan | 2015-12-22
  1. 105

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

    forEach: Ce itère sur une liste et s'applique à certains de fonctionnement avec des effets secondaires à chaque membre de la liste (exemple: sauvegarder chaque élément de la liste à la base de données)

    map: Ce itère sur une liste, transforme chaque membre de cette liste, et renvoie une autre liste de la même taille avec la transformation membres (exemple: la transformation de liste de chaînes de caractères en majuscules)

    Références

    Tableau.le prototype.forEach() - JavaScript | MDN

    Tableau.le prototype.(map) - JavaScript | MDN

    • Et comme Xufox dit - .forEach ne retourne rien, c'est le cas. Merci pour l'aide! Je vais marquer cette réponse dans les 10 minutes.
    • qui a le meilleur rendement et est le plus rapide?
    • carte retour liste et forEach pas . OK
    InformationsquelleAutor Richard Hamilton
  2. 46

    • 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 sur chaque élément de ce tableau.”

    Donc, forEach ne retourne rien. Il se contente d'appeler la fonction de chaque élément du tableau et puis c'est fait. Donc, tout ce que vous revenez à l'intérieur de cette fonction appelée est tout simplement ignorée.

    D'autre part, map va de même appeler la fonction de chaque élément du tableau, mais au lieu de se débarrasser de sa valeur de retour, il s'agira de saisir et de construire un nouveau tableau de ces valeurs de retour.

    Cela signifie également que vous pourrait utilisation map où que vous soyez à l'aide de forEach mais vous ne devriez pas faire cela, alors vous n'avez pas de recueillir les valeurs de retour sans aucun but. C'est juste plus efficace de ne pas les ramasser si vous n'en avez pas besoin.

    • À noter: en 2015, il aurait été possible de soutenir que forEach aurait été "plus efficace" que map surtout si un polyfill a été nécessaire pour soutenir forEach sur une ancienne version de navigateur (IE8 ou 9). Vous n'avez pas besoin d'affecter le retour de map à rien; la valeur de retour doit rester des déchets recueillis immédiatement après map retourne quand le retour de map n'est pas attribué.
    • Juste parce que quelque chose est des ordures collectées immédiatement, cela ne signifie pas que vous n'êtes pas se faire frapper par les allocations qui ont été nécessaires. Donc forEach sera conceptuellement être encore plus efficace et mieux adapté pour les tâches dont vous n'avez pas besoin de recueillir les résultats. Et je ne sais pas vous, mais en 2015, je n'étais pas le développement pour IE8 plus (qui btw. aussi ne prend pas en charge map); et IE9+ support forEach. Et effectivement, un mois après ma réponse, Microsoft clos de support pour les navigateurs.
    • Sont à la fois forEach et carte de garantie de traiter les éléments dans le même ordre?
    • Ouais, aussi, les deux fonctions sont synchrones, ce qui map et forEach appels ne reviennent qu'une fois l'ensemble de la baie a été bouclé et le rappel a été appelée pour chaque.
    InformationsquelleAutor poke
  3. 17
    +----------------+-------------------------------------+---------------------------------------+ 
| | foreach | map | 
+----------------+-------------------------------------+---------------------------------------+ 
| Fonctionnalités | Effectue l'opération sur chacun Effectue compte tenu de la "transformation" sur | 
| | élément du tableau | "copier" de chaque élément | 
+----------------+-------------------------------------+---------------------------------------+ 
| Valeur de retour | Renvoie undefined | Renvoie nouveau tableau avec changée | 
| | | éléments laissant à l'arrière du tableau d'origine | 
| | | inchangés | 
+----------------+-------------------------------------+---------------------------------------+ 
| Préférer | Exécution de la non-transformation comme | Obtenir un tableau contenant une sortie de | 
| scénario d'utilisation | traitement sur chaque élément. et le traitement effectué sur chaque élément | 
| et exemple | | en de la matrice. | 
| | Par exemple, l'enregistrement de tous les éléments | | 
| | la base de données | Par exemple, l'obtention de tableau de | 
| | | longueurs de chaque chaîne dans le | 
| | | array | 
+----------------+-------------------------------------+---------------------------------------+
    • Veuillez modifier votre message et de montrer le texte plutôt que des images. Les autres ne peuvent pas copier et coller à partir de votre image, ou de recherche au sein de votre image, ou d'aider à améliorer le contenu du texte dans l'image. Voir ici pour plus de détails. Je vous remercie.
    • Cela peut vous aider à dessiner ASCII art des tables: webapps.stackexchange.com/q/6700/126269
    InformationsquelleAutor Mahesha999
  4. 15

    La différence principale que vous devez savoir, c'est .map() renvoie un nouveau tableau, tandis que .forEach() ne l'est pas. C'est pourquoi vous voyez que la différence dans la sortie. .forEach() juste opère sur chaque valeur dans le tableau.

    Lire:

    Vous pourriez également vouloir vérifier:
    - Array.le prototype.tous les() - JavaScript | MDN

    InformationsquelleAutor Rahul Desai
  5. 6

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

    carte: Si vous souhaitez effectuer une action sur les éléments d'un tableau et aussi, vous souhaitez stocker le résultat de votre action dans un Tableau. Ceci est similaire à la boucle for à l'intérieur d'une fonction qui retourne le résultat après chaque itération.

    Espère que cette aide.

    InformationsquelleAutor Amarnath Jeyakumar
  6. 3

    La différence réside en ce qu'elles renvoient. Après l'exécution:

    arr.map()

    retourne un tableau d'éléments résultant de la transformation de la fonction; tout: 

    arr.forEach()

    renvoie undefined.

    InformationsquelleAutor Godwin Ekuma
  7. 2

    Analyse De La Performance
    Pour les boucles effectue plus rapidement que la carte ou foreach que 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');
    InformationsquelleAutor sonia kaushal