Quelle est l'utilité de la méthode javascript forEach (cette carte ne peut pas faire)?

La seule différence que je vois dans map et foreach est que maprenvoie un tableau et forEachne l'est pas. Cependant, je ne comprends même pas la dernière ligne de la forEachméthode " func.call(scope, this[i], i, this);". Par exemple, n'est pas « this» et « scope» se référant à un même objet et n'est pas this[i]et se iréférant à la valeur actuelle dans la boucle?

J'ai remarqué dans un autre message que quelqu'un a dit "À utiliser forEachlorsque vous voulez faire quelque chose sur la base de chaque élément de la liste. Vous pourriez ajouter des éléments à la page, par exemple. Essentiellement, c'est génial lorsque vous voulez des" effets secondaires ". Je ne sais pas ce que l'on entend par effets secondaires.

Array.prototype.map = function(fnc) {
    var a = new Array(this.length);
    for (var i = 0; i < this.length; i++) {
        a[i] = fnc(this[i]);
    }
    return a;
}

Array.prototype.forEach = function(func, scope) { 
    scope = scope || this; 
    for (var i = 0, l = this.length; i < l; i++) {
        func.call(scope, this[i], i, this); 
    } 
}

Enfin, y a-t-il de réelles utilisations de ces méthodes en javascript (puisque nous ne mettons pas à jour une base de données) autre que de manipuler des nombres comme celui-ci:

alert([1,2,3,4].map(function(x){ return x + 1})); //this is the only example I ever see of map in javascript.

Merci pour toute réponse.

La différence essentielle entre mapet forEachdans votre exemple est que forEachfonctionne sur les éléments du tableau d'origine, alors que maprenvoie explicitement un nouveau tableau en conséquence.

Avec forEachvous prenez des mesures avec - et éventuellement en changeant - chaque élément du tableau d'origine. La forEachméthode exécute la fonction que vous fournissez pour chaque élément, mais ne renvoie rien ( undefined). D'autre part, mapparcourt le tableau, applique une fonction à chaque élément et émet le résultat sous la forme d'un nouveau tableau .

L '«effet secondaire» avec forEachest que le tableau d'origine est en cours de modification. "Aucun effet secondaire" mapsignifie que, dans un usage idiomatique, les éléments originaux du tableau ne sont pas modifiés; le nouveau tableau est un mappage un-à-un de chaque élément du tableau d'origine - la transformation de mappage étant votre fonction fournie.

Le fait qu'il n'y ait pas de base de données impliquée ne signifie pas que vous n'aurez pas à opérer sur des structures de données, qui, après tout, est l'une des essences de la programmation dans n'importe quel langage. Quant à votre dernière question, votre tableau peut contenir non seulement des nombres, mais des objets, des chaînes, des fonctions, etc.

La principale différence entre les deux méthodes est conceptuelle et stylistique: vous utilisez forEachlorsque vous voulez faire quelque chose sur ou avec chaque élément d'un tableau (faire "avec" est ce que le message que vous citez signifiait par "effets secondaires", je pense) , alors que vous utilisez maplorsque vous souhaitez copier et transformer chaque élément d'un tableau (sans changer l'original).

Parce que les deux mapet forEachappeler une fonction sur chaque élément dans un tableau, et cette fonction est définie par l' utilisateur, il n'y a presque rien que vous pouvez faire avec un seul et non pas avec l'autre. Il est possible, bien que laid, de l'utiliser mappour modifier un tableau sur place et / ou faire quelque chose avec des éléments de tableau:

var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.map(function(el) {
    el.val++; // modify element in-place
    alert(el.val); // do something with each element
});
// a now contains [{ val: 2 }, { val: 3 }, { val: 4 }]

mais beaucoup plus propre et plus évident quant à votre intention d'utiliser forEach:

var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.forEach(function(el) { 
    el.val++;
    alert(el.val);
});

Surtout si, comme c'est généralement le cas dans le monde réel, el est une variable lisible par l'homme:

cats.forEach(function(cat) { 
    cat.meow(); // nicer than cats[x].meow()
});

De la même manière, vous pouvez facilement utiliser forEach pour créer un nouveau tableau:

var a = [1,2,3],
    b = [];
a.forEach(function(el) { 
    b.push(el+1); 
});
// b is now [2,3,4], a is unchanged

mais c'est plus propre à utiliser map :

var a = [1,2,3],
    b = a.map(function(el) { 
        return el+1; 
    });

Notez également que, car map crée un nouveau tableau, il entraîne probablement au moins un certain impact sur les performances / la mémoire lorsque tout ce dont vous avez besoin est une itération, en particulier pour les grands tableaux - voir http://jsperf.com/map-foreach

Quant à savoir pourquoi vous souhaitez utiliser ces fonctions, elles sont utiles chaque fois que vous devez effectuer une manipulation de tableau en javascript, ce qui (même si nous ne parlons que de javascript dans un environnement de navigateur) est assez souvent, presque à tout moment vous accédez à un tableau que vous n'écrivez pas à la main dans votre code. Vous avez peut-être affaire à un tableau d'éléments DOM sur la page, à des données extraites d'une requête AJAX ou à des données saisies dans un formulaire par l'utilisateur. Un exemple courant que j'ai rencontré est l'extraction de données à partir d'une API externe, que vous voudrez peut-être utiliser mappour transformer les données dans le format souhaité, puis utiliser forEachpour itérer sur votre nouveau tableau afin de l'afficher à votre utilisateur.

La réponse votée (de Ken Redler) est trompeuse.

Un effet secondaire en informatique signifie qu'une propriété d'une fonction / méthode modifie un état global [wiki] . Dans un sens étroit, cela peut également inclure la lecture d'un état global, plutôt que d'arguments. Dans la programmation impérative ou OO, les effets secondaires apparaissent la plupart du temps. Et vous vous en servez probablement sans vous en rendre compte.

La différence significative entre forEachet mapest qu'elle mapalloue de la mémoire et stocke la valeur renvoyée, tout en la forEachrejetant. Voir les spécifications emca pour plus d'informations.

Quant à la raison pour laquelle les gens disent forEachest utilisé lorsque vous voulez un effet secondaire, c'est que la valeur de retour de forEachest toujours undefined. Si cela n'a pas d'effet secondaire (ne change pas l'état global), alors la fonction perd juste du temps CPU. Un compilateur optimisant éliminera ce bloc de code et le remplacera par la valeur finale (undefined ).

À propos, il convient de noter que JavaScript n'a aucune restriction sur les effets secondaires. Vous pouvez toujours modifier le tableau d'origine à l'intérieur map.

var a = [1,2,3]; //original
var b = a.map( function(x,i){a[i] = 2*x; return x+1} );
console.log("modified=%j\nnew array=%j",a,b);
// output:
// modified=[2,4,6]
// new array=[2,3,4]

C'est une belle question avec une réponse inattendue.

Ce qui suit est basé sur la description officielle deArray.prototype.map() .

Il n'y a rien qui forEach()puisse faire qui ne map()puisse pas. Autrement dit, map()est un super-ensemble strict de forEach().

Bien qu'il map()soit généralement utilisé pour créer un nouveau tableau, il peut également être utilisé pour changer le tableau actuel. L'exemple suivant illustre ceci:

var a = [0, 1, 2, 3, 4], mapped = null;
mapped = a.map(function (x) { a[x] = x*x*x; return x*x; });
console.log(mapped); // logs [0, 1, 4, 9, 16]  As expected, these are squares.
console.log(a); // logs [0, 1, 8, 27, 64] These are cubes of the original array!!

Dans l'exemple ci-dessus, a aété commodément réglé de telle sorte que a[i] === ipour i < a.length. Même ainsi, il démontre la puissance map(), et en particulier sa capacité à changer le tableau sur lequel il est appelé.

Note1:
La description officielle implique que map()peut même changer la longueur du tableau sur lequel il est appelé! Cependant, je ne vois pas (une bonne) raison de faire cela.

Note 2:
Bien que map()map soit un super-ensemble de forEach(), forEach()doit toujours être utilisé là où l'on désire modifier un tableau donné. Cela rend vos intentions claires.

J'espère que cela a aidé.

Vous pouvez utiliser mapcomme si c'était le cas forEach.

Cependant, il fera plus que nécessaire.

scopepeut être un objet arbitraire; ce n'est en aucun cas nécessairement this.

Quant à savoir s'il existe de réelles utilisations pour mapet forEach, ainsi que pour se demander s'il existe de réelles utilisations pour forou pour les whileboucles.

Bien que toutes les questions précédentes soient correctes, je ferais certainement une distinction différente. L'utilisation de mapet forEachpeut impliquer une intention.

J'aime utiliser maplorsque je transforme simplement les données existantes d'une manière ou d'une autre (mais que je veux m'assurer que les données d'origine restent inchangées.

J'aime utiliser forEachlorsque je modifie la collection en place.

Par exemple,

var b = [{ val: 1 }, { val: 2 }, { val: 3 }];
var c = b.map(function(el) {
    return { val: el.val + 1 }; // modify element in-place
});
console.log(b);
//  [{ val: 1 }, { val: 2 }, { val: 3 }]
console.log(c);
//  [{ val: 3 }, { val: 4 }, { val: 5 }]

Ma règle de base est de m'assurer que lorsque vous mapcréez toujours un nouvel objet / valeur à retourner pour chaque élément de la liste source et de retourner plutôt que d'effectuer simplement une opération sur chaque élément.

À moins que vous n'ayez vraiment besoin de modifier la liste existante, cela n'a pas vraiment de sens de la modifier en place et s'intègre mieux dans les styles de programmation fonctionnels / immuables.

TL; réponse DR -

map renvoie toujours un autre tableau.

forEach non. C'est à vous de décider ce qu'il fait. Renvoyez un tableau si vous voulez ou faites autre chose si vous ne le faites pas.

La flexibilité est souhaitable dans certaines situations. Si ce n'est pas ce à quoi vous avez affaire, utilisez map.

Encore une fois, je me sens comme un nécromancien ajoutant une réponse à une question qui a été posée il y a 5 ans (heureusement il y a une activité plutôt récente, donc je ne suis pas le seul à déranger les morts :).

D'autres ont déjà posté votre question principale concernant la différence entre les fonctions. Mais pour...

y a-t-il des utilisations réelles de ces méthodes en javascript (puisque nous ne mettons pas à jour une base de données) autre que de manipuler des nombres comme ceci:

... c'est drôle, tu devrais demander. Juste aujourd'hui, j'ai écrit un morceau de code qui attribue un certain nombre de valeurs d'une expression régulière à plusieurs variables en utilisant la carte pour la transformation. Il a été utilisé pour convertir une structure textuelle très compliquée en données visualisables ... mais par souci de simplicité, je vais offrir un exemple utilisant des chaînes de date, car celles-ci sont probablement plus familières pour tout le monde (cependant, si mon problème avait réellement été avec les dates , au lieu de la carte, j'aurais utilisé Date-object, qui aurait fait le travail à merveille tout seul).

const DATE_REGEXP = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})\.(\d{3})Z$/;
const TEST_STRING = '2016-01-04T03:20:00.000Z';

var [
    iYear,
    iMonth,
    iDay,
    iHour,
    iMinute,
    iSecond,
    iMillisecond
    ] = DATE_REGEXP
        // We take our regular expression and...
        .exec(TEST_STRING)
        // ...execute it against our string (resulting in an array of matches)...
        .slice(1)
        // ...drop the 0th element from those (which is the "full string match")...
        .map(value => parseInt(value, 10));
        // ...and map the rest of the values to integers...

// ...which we now have as individual variables at our perusal
console.debug('RESULT =>', iYear, iMonth, iDay, iHour, iMinute, iSecond, iMillisecond);

Donc ... alors que ce n'était qu'un exemple - et n'a fait qu'une transformation très basique pour les données (juste à titre d'exemple) ... l'avoir fait sans carte aurait été une tâche beaucoup plus fastidieuse.

Certes, il est écrit dans une version de JavaScript que je ne pense pas que trop de navigateurs prennent encore en charge (au moins complètement) mais - nous y arrivons. Si j'avais besoin de l'exécuter dans un navigateur, je pense qu'il se transpilerait bien.