Pourquoi utiliser [].forEach.call() pour parcourir les éléments DOM en JavaScript ?

Comprendre l'utilisation de [].forEach.call() en JavaScript

En JavaScript, vous pouvez rencontrer des extraits de code qui appellent une fonction sur un ensemble d'éléments DOM en utilisant [].forEach.call() avec un tableau vide. Cette approche peut prêter à confusion, mais elle offre un moyen concis et efficace d'exploiter les prototypes de tableaux pour les opérations itératives.

Le tableau vide []. agit comme un espace réservé, nous permettant d'invoquer des méthodes de prototype de tableau comme forEach sur des objets non-tableaux. Ces méthodes offrent des moyens pratiques d'interagir avec les éléments de manière séquentielle.

La méthode forEach parcourt chaque élément d'un tableau, exécutant la fonction de rappel fournie. Dans le rappel, vous pouvez accéder à l'élément actuel, à son index et à l'ensemble du tableau.

La fonction .call() nous permet de changer le contexte (this) dans lequel le rappel est exécuté. Dans ce cas, nous transmettons la liste de nœuds document.querySelectorAll('a') comme premier argument à .call(), la changeant ainsi en liste de nœuds.

En conséquence, forEach peut désormais parcourir les éléments de la liste de nœuds, et la fonction de rappel a accès aux valeurs et propriétés de chaque élément.

Bien que cette approche puisse ressembler à un hack, elle offre plusieurs avantages :

• Concision du code : Cela vous permet d'effectuer des opérations d'itération courantes sans définir de boucles personnalisées.
• Performance : C'est plus rapide que d'invoquer explicitement Array.prototype.forEach.call(. ..);

Alternatives à [].forEach.call()

Alternatives de programmation fonctionnelle : ES6 introduit des fonctions d'ordre supérieur telles que map(), filter() et réduire(), offrant une approche plus expressive et déclarative de la manipulation des tableaux.

Bibliothèques utilitaires  : Les bibliothèques tierces comme underscore.js ou lodash.js offrent un riche ensemble de fonctions de type tableau, offrant un moyen pratique de gérer les non-tableaux.

Conclusion

[].forEach.call() reste un outil utile pour parcourir des listes de nœuds ou d'autres objets non-tableaux. Même s'il n'est peut-être pas aussi élégant que d'autres alternatives, il sert un objectif et peut améliorer l'efficacité et la lisibilité de votre code lorsqu'il est utilisé judicieusement.

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!