Ce n' [].forEach.call() de le faire en JavaScript?

[] est un tableau.

Ce tableau n'est pas utilisé du tout.

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

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

Prochaine, forEach est une fonction qui prend une fonction comme une entrée...

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

...et pour chaque élément de this (où this est semblable au tableau, qu'il a un length vous avez ainsi accès à ses parties comme this[1]) il va passer trois choses:

1. l'élément dans le tableau
2. l'indice de l'élément (troisième élément serait de passer 2)
3. une référence à la matrice

Enfin, .call est un prototype des fonctions (c'est une fonction qui est appelée à d'autres fonctions).

.call prendra son premier argument et remplacer this à l'intérieur de la fonction régulière avec tout ce que vous avez passé call, comme premier argument (undefined ou null utilisera window dans le quotidien de la JS, ou seront celles que vous avez passé, si dans le "strict-mode"). Le reste des arguments sera passé à 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 êtes en train de créer un moyen rapide pour appeler la forEach de la fonction, et vous décidez de changer this à partir du tableau vide à une liste de tous les <a> balises, et pour chaque <a> dans l'ordre, vous êtes à l'appel de la fonction.

MODIFIER

Conclusion Logique /Nettoyage

Ci-dessous, il y a un lien vers un article suggérant que nous avons de la ferraille, des tentatives de programmation fonctionnelle, et s'en tenir à manuel en ligne de la boucle, à chaque fois, parce que cette solution est hack-ish et inesthétiques.

Je dirais que tout .forEach est moins utile que celle de ses homologues, .map(transformer), .filter(predicate), .reduce(combiner, initialValue), il sert encore à des fins lorsque tout ce que vous voulez vraiment faire est de modifier le monde extérieur (pas de tableau), n-fois, tout en ayant accès à arr[i] ou i.

Alors, comment faire face à la disparité, telle est la Devise est clairement un talentueux et chevronnés gars, et je tiens à imaginer que je sais ce que je fais et où je vais (maintenant, et puis... ...d'autres fois c'est la tête la première d'apprentissage)?

La réponse est en fait assez simple, et quelque chose de l'Oncle Bob et Sir Crockford permettrait à la fois de facepalm, en raison de la surveillance:

nettoyer.

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 êtes en questionnement de savoir si vous avez besoin de faire cela, vous-même, la réponse pourrait bien être pas...

C'est exactement la chose est faite par... ...tous(?) bibliothèque d'ordre supérieur caractéristiques de ces jours.

Si vous utilisez lodash ou un trait de soulignement ou encore jQuery, ils vont tous avoir un moyen de prendre un ensemble d'éléments, et l'exécution d'une action de la n des temps.

Si vous n'utilisez pas une telle chose, puis par tous les moyens, écrire votre propre.

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à

N'est pas seulement un slice( )/array( )/etc helper va rendre la vie plus facile pour les gens qui veulent utiliser des listes, tout comme ils utiliser des tableaux (comme ils le devraient), mais pour les gens qui ont le luxe d'exploitation dans l'ES6+ les navigateurs de la relativement proche avenir, ou de "transpiling" Babel aujourd'hui, vous avez de la langue fonctionnalités intégrées dans les, qui font de 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.

Regardez en haut de la Reste et Propagation opérateurs; les essayer à la BabelJS site; si votre technologie de la pile est dans l'ordre, les utiliser en production avec Babel et une étape de génération.

---

Il n'y a aucune bonne raison de ne pas être en mesure d'utiliser la transformation de non-tableau en tableau... ...il suffit de ne pas le désordre de votre code ne rien faire mais collage de la même laid ligne, partout.

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

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

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

Maintenant, vous pouvez appeler cette fonction à la place de la plus compliqué et obscur code:

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

Un tableau vide a une propriété forEach dans son prototype qui est une Fonction de l'objet. (Le tableau vide est juste un moyen facile d'obtenir une référence à la forEach fonction que tous les Array objets ont.) La fonction des objets, à leur tour, ont un call la propriété, qui est également une fonction. Lorsque vous appelez une Fonction call fonction, il exécute la fonction avec les arguments donnés. Le premier argument devient this dans la fonction appelée.

Vous pouvez trouver de la documentation pour la call fonction ici. Documentation pour forEach est ici.

Juste un moyen rapide et sale solution, je finis toujours par à l'aide. Je ne voudrais pas toucher prototypes, tout comme de bonnes pratiques. Bien sûr, il ya beaucoup de façons de faire mieux, mais vous obtenez 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}`);
});

Norguard expliqué CE [].forEach.call() ne et James Allardice POURQUOI nous faire: parce que querySelectorAll renvoie une NodeList qui ne dispose pas d'une méthode forEach...

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

Si non, 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);
        }
    };
}