2
votes

Tableau JS: filter () avec map () vs forEach ()

Quelle est la manière la plus optimisée .filter () + .map () OU .forEach () ?

Voici un exemple de tableau d'objets: p>

var BPersonnel = [];
personnel.forEach((person) => {
    if (person.isForceUser) {
        BPersonnel.push({ id: person.id, name: person.name });
    }
});

Et disons que nous voulons obtenir le tableau final ne donnant que le nom et l'identifiant où isForceUser=true

var APersonnel = personnel
                    .filter((person) => person.isForceUser)
                    .map((person) => ({ id: person.id, name: person.name }));


8 commentaires

Sémantiquement, je préfère filtre + carte puisque vous voulez filtrer les éléments du tableau et les mapper à autre chose. En termes de performances, je ne sais pas.


Avez-vous des problèmes de performances? Avez-vous identifié ce code comme étant le goulot d'étranglement? Ne vous inquiétez même pas si vous n'avez pas répondu à ces deux questions par «oui».


Et réduire?


@arieljuod Je voulais la réponse à la fois dans la perspective: performance et facilité / standard. Merci de partager votre point de vue.


@str Je veux connaître les performances et les standards.


@Neil Je ne compare pas les fonctions individuelles et réduire ne va pas me donner le résultat souhaité. Jetez un œil à l'exemple fourni dans la question


@VarunSukheja La seule façon de connaître les performances est de les mesurer dans différents navigateurs et / ou Node.js. Cela dépend fortement de l'implémentation et surtout de l ' optimisation prématurée de votre côté. Utilisez le code le plus lisible.


@VarunSukheja vous pouvez faire correspondre une expression et renvoyer un tableau en utilisant la réduction. Juste un petit mot 📝


3 Réponses :


1
votes

Je peux me tromper, mais je suppose que chacun serait mieux.

Dans le premier scénario, vous faites une boucle sur 5 éléments, puis à nouveau sur 3 éléments. Dans le deuxième scénario, vous ne faites qu'une boucle sur 5 éléments. Et le if dans le foreach est effectivement fait dans le filtre de toute façon.

Il peut y avoir une exception si vous travaillez avec un très grand ensemble de données car vous auriez les deux tableaux en mémoire, mais pour tout ce qui est inférieur à cela, je recommanderais pourChaque


0 commentaires

4
votes

Ce ne sont pas des choses dans lesquelles vous devriez chercher à améliorer vos performances. Vous parlez ici de «personnel». Ce qui est un ensemble de tableaux assez limité, j'imagine. Si vous rencontrez des problèmes de performances, je vous suggère d'utiliser l'onglet de performances de chrome dev pour voir ce qui en est la cause.

Pour répondre à votre question, filtre + carte est sémantiquement plus facile pour l'œil, ce qui est encore une fois une opinion personnelle. En termes de performances strictes, le forEach est plus rapide, là où la boucle of for de base est probablement encore plus rapide. Mais encore une fois, ce sont quelques millisecondes dont nous parlons. Ce qui ne justifie pas le coût de la réécriture :)

Une autre façon peut être d'utiliser reduction , moins de code, et une seule boucle:

const APersonnel = personell.reduce((acc, person) => {
  if (person.isForceUser) {
    acc.push({ id: person.id, name: person.name });
  }
}, []);


5 commentaires

Ceci n'est qu'un exemple, je voulais savoir quel est le meilleur moyen d'utiliser le 2 par rapport aux performances et au standard. Merci pour la réponse, bien expliqué.


@VarunSukheja J'ai ajouté un exemple d'utilisation de réduire , au cas où vous seriez intéressé :)


Merci beaucoup @pierreudc Je n'ai jamais pensé à utiliser réduire de cette manière.


Pourquoi of for est-il plus rapide que forEach ? y a-t-il une source à ce sujet?


@DrorBar c'est en fait une hypothèse, car un forEach utilise un nouveau contexte de fonction, car to of for est exécuté dans la même trace



1
votes

La meilleure façon est d'utiliser foreach . Parce que map et filter vont créer deux tableaux. foreach ne crée pas de tableaux. Donc foreach est le meilleur. regardez ces déclarations ci-dessous,

La méthode filter () crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.

La méthode map () crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.


0 commentaires