Explication détaillée de la différence entre Map et ForEach dans JS

Si vous avez déjà de l'expérience avec JavaScript, vous connaissez probablement déjà ces deux méthodes apparemment identiques : Array.prototype.map() et Array.prototype.forEach()。 Alors, quelle est exactement la différence entre elles ?

Définition

Jetons d'abord un coup d'œil aux définitions de Map et ForEach sur MDN :

• forEach() : Pour chaque élément exécute une fonction fournie une fois pour chaque élément du tableau.
• map() : Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant).

Quelle est la différence ? La méthode forEach() ne renvoie pas le résultat de l'exécution, mais undefined. En d'autres termes, forEach() modifiera le tableau d'origine. La méthode map() obtiendra un nouveau tableau et le renverra.

Exemple

Un tableau est fourni ci-dessous Si nous voulons doubler chaque élément qu'il contient, nous pouvons utiliser map et forEach pour atteindre l'objectif .

let arr = [1, 2, 3, 4, 5];

ForEach

Notez que forEach ne renverra pas de valeur significative.

On modifie la valeur de arr directement dans la fonction de rappel. Les résultats d'exécution de

arr.forEach((num, index) => {    
    return arr[index] = num * 2;}
);

sont les suivants :

// arr = [2, 4, 6, 8, 10]

Map

let doubled = arr.map(num => {
    return num * 2;
});

Les résultats d'exécution sont les suivants :

// doubled = [2, 4, 6, 8, 10]

Comparaison de la vitesse d'exécution

jsPref est un très bon site pour comparer la vitesse d'exécution de différentes fonctions JavaScript.

Voici les résultats des tests de forEach() et map() :

Comme vous pouvez le constater, la vitesse d'exécution de forEach() sur mon ordinateur est comparé à map()70 % plus lent. Les résultats d'exécution de chaque navigateur seront différents. Vous pouvez utiliser le lien suivant pour le tester : Map vs. forEach - jsPref.

Compréhension d'un point de vue fonctionnel

Si vous avez l'habitude d'utiliser des fonctions pour la programmation, alors vous aimerez certainement utiliser map(). Parce que forEach() changera la valeur du tableau d'origine, et map() renverra un tout nouveau tableau, et le tableau d'origine ne sera pas affecté.

Lequel est le meilleur ?

Cela dépend de ce que vous voulez faire.

forEach convient lorsque vous n'envisagez pas de modifier les données, mais que vous souhaitez simplement faire quelque chose avec les données, comme les enregistrer dans une base de données ou les imprimer.

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
// a
// b
// c
// d

map() convient lorsque vous souhaitez modifier la valeur des données. Non seulement c'est plus rapide, mais cela renvoie un nouveau tableau. L'avantage est que vous pouvez utiliser la composition (combinaison de map(), filter(), réduire(), etc.) pour jouer plus de tours.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

Nous utilisons d'abord map pour multiplier chaque élément par 2, puis filtrer les éléments supérieurs à 5. Le résultat final est attribué à arr2.

Les points fondamentaux

• peuvent être réalisés avec forEach(), map() peut également être utilisé. L’inverse est également vrai.
• map() allouera de l'espace mémoire pour stocker le nouveau tableau et le renverra, forEach() ne renverra pas de données.
• forEach()Permet callback de modifier les éléments du tableau d'origine. map()Renvoyer le nouveau tableau.

Recommandations d'apprentissage gratuites associées : Tutoriel vidéo js

Plus de programmation pour connaissances connexes, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!