Pourquoi y a-t-il un tableau vide dans la fonction [].forEach.call() de JavaScript ?

Comprendre la fonction [].forEach.call() en JavaScript

Êtes-vous curieux de connaître l'utilisation intrigante de [].forEach. appeler() en JavaScript ? Examinons son objectif et ses fonctionnalités.

En JavaScript, les tableaux possèdent une méthode puissante appelée forEach, qui vous permet d'effectuer des opérations sur chaque élément d'un tableau. Cependant, dans certains cas, vous pouvez rencontrer du code dans lequel un tableau vide est utilisé avant d'appliquer forEach à une liste de nœuds.

Décomposer le code

Considérez ce qui suit extrait de code :

[].forEach.call(document.querySelectorAll('a'), function(el) {
  // Perform some operation on the current node
});

Que se passe-t-il ici ? Décomposons-le :

• [] : Il s'agit d'un tableau vide. Cela ne sert à rien dans le code. Sa présence sert simplement à donner accès à la méthode forEach, qui est un prototype de tableaux.
• forEach : La méthode forEach parcourt chaque élément d'un tableau (ou d'un objet de type tableau) et appelle la fonction spécifiée avec trois arguments : l'élément, son index et le tableau lui-même.
• .call : La méthode .call est utilisée pour invoquer une fonction avec une valeur spécifiée pour son mot-clé "ceci". Dans ce cas, il s'agit de modifier la valeur "this" de la méthode forEach du tableau vide vers la liste des balises . Cela permet à la fonction d'accéder à chaque élément par index.

Exemple d'utilisation

Regardons un exemple pour mieux comprendre le fonctionnement de ce code :

const myNodeList = document.querySelectorAll('a');
[].forEach.call(myNodeList, function(el) {
  el.style.color = 'blue';
});

Dans ce code :

• On obtient une liste de nœuds de toutes les balises de la page.
• Le [].forEach.call () modifie la valeur "this" en myNodeList et invoque la méthode forEach sur les éléments .
• Dans la fonction de rappel, nous pouvons accéder à chaque élément en utilisant el et modifier son style ( dans ce cas, changer sa couleur en bleu).

Syntaxe alternative pour ES6

Dans ES6 (ECMAScript 2015) et au-delà, une syntaxe plus moderne et concise Il existe une syntaxe pour obtenir le même résultat :

[...document.querySelectorAll('a')].forEach(el => {
  el.style.color = 'blue';
});

Dans cette syntaxe mise à jour, nous utilisons l'opérateur de propagation (...) pour convertir la liste de nœuds en un tableau, qui peut ensuite être itéré à l'aide de forEach.

Conclusion

La technique [].forEach.call() fournit un moyen concis et efficace d'appliquer la méthode forEach à des objets de type tableau tels que des listes de nœuds. En utilisant cette technique, vous pouvez facilement effectuer des opérations sur chaque élément de la liste. N'oubliez pas, cependant, que dans le JavaScript moderne, des syntaxes alternatives telles que l'opérateur spread peuvent offrir une solution plus élégante.

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!