Conseils pour filtrer les tableaux en JavaScript – 30 secondes de code

Tout en Array.prototype.filter() est une méthode très pratique, ses performances laissent souvent à désirer. Cela est exagéré par le fait qu’elle est devenue la méthode de référence pour de nombreuses opérations qui peuvent être effectuées à l’aide d’autres solutions. Examinons quelques scénarios courants et voyons comment nous pouvons améliorer leurs performances.

Trouver une valeur unique

Si vous recherchez un seul résultat dans un tableau, vous pouvez utiliser la méthode suivante Array.prototype.find() à la place. Cela renverra le premier élément qui satisfait à la condition, soit undefined si un tel élément n’existe pas. C’est beaucoup plus rapide que Array.prototype.filter()car elle arrête l’itération dès qu’elle trouve le premier élément correspondant.

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

arr.find(x => x > 3); 

En outre, si la condition est un simple contrôle d’égalité, vous pouvez également utiliser la fonction Array.prototype.indexOf(). Bien qu’elle ne soit pas aussi jolie que les deux autres, cette méthode peut être beaucoup plus rapide, car l’utilisation d’une fonction de comparaison n’entraîne aucune surcharge.

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

arr.indexOf(3); 

Suppression d’une seule valeur

De même, si vous souhaitez supprimer une seule valeur d’un tableau, vous pouvez utiliser la commande Array.prototype.findIndex() pour trouver l’index de l’élément que vous voulez supprimer. Ensuite, utilisez Array.prototype.slice() pour le supprimer. Bien que cette méthode soit un peu plus verbeuse et semble effectuer plus d’opérations, elle peut s’avérer plus rapide que l’utilisation de la commande Array.prototype.filter() dans de nombreux cas.

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

const index = arr.findIndex(x => x === 3);
const newArr = [...arr.slice(0, index), ...arr.slice(index + 1)];

De même, si cela ne vous dérange pas de modifier le tableau d’origine, vous pouvez utiliser Array.prototype.splice() pour supprimer l’élément à l’indice que vous avez trouvé. Comme cette méthode ne nécessite pas la création d’un nouveau tableau, elle peut être nettement plus rapide que la précédente.

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

const index = arr.findIndex(x => x === 3);
arr.splice(index, 1); 

Notes supplémentaires

Dans de nombreux cas, ces changements ne feront pas une différence radicale dans les performances de votre application. Cependant, il n’est jamais inutile d’être conscient de toutes les options et d’utiliser la meilleure pour votre cas d’utilisation spécifique. De tels changements seront plus judicieux si vous travaillez avec de grands ensembles de données, ainsi qu’avec des parties critiques de votre application.

De plus, en fonction des données et de leurs contraintes, il peut être plus judicieux d’utiliser une structure de données différente. Par exemple, si des valeurs uniques sont une condition préalable, l’utilisation d’une structure de données de type Set est plus efficace et beaucoup plus facile à utiliser dans de nombreux cas.

Laisser un commentaire