Je regardais des extraits de code et j'ai trouvé plusieurs éléments appelant une fonction sur une liste de nœuds avec un forEach appliqué à un tableau vide.

Par exemple, j'ai quelque chose comme:

[].forEach.call( document.querySelectorAll('a'), function(el) {
   // whatever with the current node
});

mais je ne peux pas comprendre comment cela fonctionne. Quelqu'un peut-il m'expliquer le comportement du tableau vide devant le forEach et comment cela callfonctionne?

[]est un tableau.
Ce tableau n'est pas du tout utilisé.

Il est mis sur la page, car l'utilisation d'un tableau vous donne accès à des prototypes de tableau, comme .forEach.

C'est juste plus rapide que de taper Array.prototype.forEach.call(...);

Ensuite, forEachest une fonction qui prend une fonction comme entrée ...

[1,2,3].forEach(function (num) { console.log(num); });

... et pour chaque élément dans this(où thisest semblable à un tableau, en ce qu'il a un lengthet vous pouvez accéder à ses parties comme this[1]), il passera trois choses:

1. l'élément dans le tableau
2. l'index de l'élément (le troisième élément passerait 2)
3. une référence au tableau

Enfin, .callest un prototype dont disposent les fonctions (c'est une fonction qui est appelée sur d'autres fonctions).
.callprendra son premier argument et remplacera l' thisintérieur de la fonction régulière par tout ce que vous avez passé call, comme premier argument ( undefinedou nullutilisera windowdans JS de tous les jours, ou sera ce que vous avez passé, si vous êtes en "mode strict"). Le reste des arguments sera transmis à la fonction d'origine.

[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) {
    console.log(i + ": " + item);
});
// 0: "a"
// 1: "b"
// 2: "c"

Par conséquent, vous créez un moyen rapide d'appeler la forEachfonction, et vous passez thisdu tableau vide à une liste de toutes les <a>balises, et pour chaque <a>ordre, vous appelez la fonction fournie.

ÉDITER

Conclusion logique / nettoyage

Ci-dessous, il y a un lien vers un article suggérant que nous abandonnons les tentatives de programmation fonctionnelle et que nous nous en tenons à la boucle manuelle en ligne, à chaque fois, car cette solution est hack-ish et inesthétique.

Je dirais que tout .forEachest moins utile que ses homologues, .map(transformer), .filter(predicate), .reduce(combiner, initialValue), il sert toujours quand des fins tout ce que vous voulez vraiment faire est de modifier le monde extérieur ( et non le tableau), le n-temps, tout en ayant accès à une ou l' autre arr[i]ou i.

Alors, comment gérer la disparité, car Motto est clairement un gars talentueux et compétent, et j'aimerais imaginer que je sais ce que je fais / où je vais (de temps en temps ... autre fois c'est l'apprentissage tête première)?

La réponse est en fait assez simple, et quelque chose que l'oncle Bob et Sir Crockford feraient tous les deux facepalm, en raison de l'oubli:

nettoyez-le .

function toArray (arrLike) { // or asArray(), or array(), or *whatever*
  return [].slice.call(arrLike);
}

var checked = toArray(checkboxes).filter(isChecked);
checked.forEach(listValues);

Maintenant, si vous vous demandez si vous avez besoin de faire cela, vous-même, la réponse pourrait bien être non ...
Cette chose exacte est faite par ... ... chaque (?) Bibliothèque avec des fonctionnalités d'ordre supérieur ces jours-ci.
Si vous utilisez lodash ou un trait de soulignement ou même jQuery, ils auront tous un moyen de prendre un ensemble d'éléments et d'exécuter une action n fois.
Si vous n'utilisez pas une telle chose, alors écrivez la vôtre.

lib.array = (arrLike, start, end) => [].slice.call(arrLike, start, end);
lib.extend = function (subject) {
  var others = lib.array(arguments, 1);
  return others.reduce(appendKeys, subject);
};

Mise à jour pour ES6 (ES2015) et au-delà

Non seulement une méthode d'assistance slice( )/ array( )/ etc va faciliter la vie des personnes qui souhaitent utiliser des listes comme elles utilisent des tableaux (comme elles le devraient), mais aussi pour les personnes qui ont le luxe de fonctionner dans les navigateurs ES6 + du relativement proche futur, ou de "transpilage" dans Babel aujourd'hui, vous avez des fonctionnalités de langage intégrées, qui rendent ce type de chose inutile.

function countArgs (...allArgs) {
  return allArgs.length;
}

function logArgs (...allArgs) {
  return allArgs.forEach(arg => console.log(arg));
}

function extend (subject, ...others) { /* return ... */ }


var nodeArray = [ ...nodeList1, ...nodeList2 ];

Super propre et très utile.
Recherchez les opérateurs Rest et Spread ; essayez-les sur le site BabelJS; si votre pile technologique est en ordre, utilisez-les en production avec Babel et une étape de construction.

Il n'y a aucune bonne raison de ne pas pouvoir utiliser la transformation de non-tableau en tableau ... ... ne faites pas un gâchis de votre code en ne faisant rien d'autre que coller cette même ligne laide, partout.

La querySelectorAllméthode renvoie a NodeList, qui est similaire à un tableau, mais ce n'est pas tout à fait un tableau. Par conséquent, il n'a pas de forEachméthode (dont les objets de tableau héritent via Array.prototype).

Puisque a NodeListest similaire à un tableau, les méthodes de tableau fonctionneront réellement dessus, donc en utilisant [].forEach.callvous invoquez la Array.prototype.forEachméthode dans le contexte de NodeList, comme si vous aviez pu le faire simplement yourNodeList.forEach(/*...*/).

Notez que le littéral de tableau vide n'est qu'un raccourci vers la version étendue, que vous verrez probablement aussi assez souvent:

Array.prototype.forEach.call(/*...*/);

Les autres réponses ont très bien expliqué ce code, donc je vais juste ajouter une suggestion.

C'est un bon exemple de code qui devrait être remanié pour plus de simplicité et de clarté. Au lieu d'utiliser [].forEach.call()ou à Array.prototype.forEach.call()chaque fois que vous faites cela, faites-en une fonction simple:

function forEach( list, callback ) {
    Array.prototype.forEach.call( list, callback );
}

Vous pouvez maintenant appeler cette fonction au lieu du code plus compliqué et obscur:

forEach( document.querySelectorAll('a'), function( el ) {
   // whatever with the current node
});

Il peut être mieux écrit en utilisant

Array.prototype.forEach.call( document.querySelectorAll('a'), function(el) {

});

Cela document.querySelectorAll('a')renvoie un objet similaire à un tableau, mais il n'hérite pas du Arraytype. Nous appelons donc la forEachméthode à partir de l' Array.prototypeobjet avec le contexte comme valeur renvoyée pardocument.querySelectorAll('a')

[].forEach.call( document.querySelectorAll('a'), function(el) {
   // whatever with the current node
});

C'est fondamentalement la même chose que:

var arr = document.querySelectorAll('a');
arr.forEach(function(el) {
   // whatever with the current node
});

Vous voulez mettre à jour cette ancienne question:

La raison d'utiliser [].foreach.call()pour parcourir des éléments dans les navigateurs modernes est généralement révolue. Nous pouvons utiliser document.querySelectorAll("a").foreach()directement.

Les objets NodeList sont des collections de nœuds, généralement renvoyés par des propriétés telles que Node.childNodes et des méthodes telles que document.querySelectorAll ().

Bien que NodeList ne soit pas un tableau, il est possible de le parcourir avec forEach () . Il peut également être converti en un véritable tableau en utilisant Array.from ().

Cependant, certains navigateurs plus anciens n'ont pas implémenté NodeList.forEach () ni Array.from (). Cela peut être contourné en utilisant Array.prototype.forEach () - voir l'exemple de ce document.

Un tableau vide a une propriété forEachdans son prototype qui est un objet Function. (Le tableau vide est juste un moyen facile d'obtenir une référence à la forEachfonction que tous les Arrayobjets ont.) Les objets fonction, à leur tour, ont une callpropriété qui est également une fonction. Lorsque vous appelez la fonction d'une callfonction, elle exécute la fonction avec les arguments donnés. Le premier argument devient thisdans la fonction appelée.

Vous pouvez trouver la documentation de la callfonction ici . La documentation pour forEachest ici .

Ajoutez simplement une ligne:

NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;

Et voila!

document.querySelectorAll('a').forEach(function(el) {
  // whatever with the current node
});

Prendre plaisir :-)

Avertissement: NodeList est une classe globale. N'utilisez pas cette recommandation si vous écrivez une bibliothèque publique. Cependant, c'est un moyen très pratique d'augmenter l'auto-efficacité lorsque vous travaillez sur un site Web ou une application node.js.

Juste une solution rapide et sale que je finis toujours par utiliser. Je ne toucherais pas aux prototypes, tout comme une bonne pratique. Bien sûr, il existe de nombreuses façons d'améliorer les choses, mais vous voyez l'idée.

const forEach = (array, callback) => {
  if (!array || !array.length || !callback) return
  for (var i = 0; i < array.length; i++) {
    callback(array[i], i);
  }
}

forEach(document.querySelectorAll('.a-class'), (item, index) => {
  console.log(`Item: ${item}, index: ${index}`);
});

[]renvoie toujours un nouveau tableau, il équivaut à new Array()mais il est garanti de renvoyer un tableau car il Arraypourrait être écrasé par l'utilisateur alors que []ne le peut pas. C'est donc un moyen sûr d'obtenir le prototype de Array, puis, comme décrit, callest utilisé pour exécuter la fonction sur la liste de nœuds arraylike (this).

Appelle une fonction avec une valeur donnée et des arguments fournis individuellement. mdn

Norguard a expliqué CE QUE [].forEach.call() fait et James Allardice POURQUOI nous le faisons: parce que querySelectorAll renvoie un NodeListqui n'a pas de méthode forEach ...

Sauf si vous avez un navigateur moderne comme Chrome 51+, Firefox 50+, Opera 38, Safari 10.

Sinon, vous pouvez ajouter un Polyfill :

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

Beaucoup de bonnes informations sur cette page (voir réponse + réponse + commentaire ), mais j'ai récemment eu la même question que l'OP, et il a fallu un peu de fouille pour avoir une vue d'ensemble. Alors, voici une version courte:

Le but est d'utiliser des Arrayméthodes sur un tableau NodeListqui n'a pas ces méthodes lui-même.

Un modèle plus ancien a coopté les méthodes de Array via Function.call()et a utilisé un littéral de tableau ( []) plutôt que Array.prototypeparce qu'il était plus court à taper:

[].forEach.call(document.querySelectorAll('a'), a => {})

Un modèle plus récent (post ECMAScript 2015) consiste à utiliser Array.from():

Array.from(document.querySelectorAll('a')).forEach(a => {})