Ich habe mir einige Codeausschnitte angesehen und mehrere Elemente gefunden, die eine Funktion über eine Knotenliste aufrufen, wobei forEach auf ein leeres Array angewendet wurde.

Zum Beispiel habe ich so etwas wie:

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

aber ich kann nicht verstehen, wie es funktioniert. Kann mir jemand das Verhalten des leeren Arrays vor dem forEach erklären und wie das callfunktioniert?

[]ist ein Array.
Dieses Array wird überhaupt nicht verwendet.

Es wird auf die Seite gestellt, da Sie durch die Verwendung eines Arrays Zugriff auf Array-Prototypen wie z .forEach.

Dies ist nur schneller als das Tippen Array.prototype.forEach.call(...);

Als nächstes forEachist eine Funktion, die eine Funktion als Eingabe nimmt ...

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

... und für jedes Element in this(wo thises Array-ähnlich ist, indem es ein hat lengthund Sie auf seine Teile wie zugreifen können this[1]) werden drei Dinge übergeben:

1. das Element im Array
2. der Index des Elements (drittes Element würde passieren 2)
3. ein Verweis auf das Array

Schließlich .callist ein Prototyp, den Funktionen haben (es ist eine Funktion, die für andere Funktionen aufgerufen wird).
.callnimmt das erste Argument und ersetzt es thisinnerhalb der regulären Funktion durch das, was Sie callals erstes Argument übergeben haben ( undefinedoder nullwird windowim alltäglichen JS verwendet oder ist das, was Sie übergeben haben, wenn es sich im "strengen Modus" befindet). Die restlichen Argumente werden an die ursprüngliche Funktion übergeben.

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

Daher erstellen Sie eine schnelle Möglichkeit, die forEachFunktion aufzurufen , und wechseln thisvom leeren Array zu einer Liste aller <a>Tags. Für jede <a>Reihenfolge rufen Sie die bereitgestellte Funktion auf.

BEARBEITEN

Logische Schlussfolgerung / Bereinigung

Unten finden Sie einen Link zu einem Artikel, der darauf hinweist, dass wir Versuche der funktionalen Programmierung abschaffen und uns jedes Mal an manuelle Inline-Schleifen halten, da diese Lösung hackig und unansehnlich ist.

Ich würde sagen , dass , während .forEachweniger hilfreich als seine Kollegen, .map(transformer), .filter(predicate), .reduce(combiner, initialValue), es dient immer noch Zwecke , wenn alles , was Sie wirklich wollen , ist die Außenwelt ändern (nicht das Array), n-mal, während Zugang zu entweder arr[i]oder i.

Wie gehen wir mit der Ungleichheit um, da Motto eindeutig ein talentierter und sachkundiger Typ ist und ich mir vorstellen möchte, dass ich weiß, was ich tue / wohin ich gehe (ab und zu ... ... andere) Mal ist es Head-First-Lernen)?

Die Antwort ist eigentlich recht einfach, und Onkel Bob und Sir Crockford würden aufgrund des Versehens beide Gesichtspalmen:

räum es auf .

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

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

Wenn Sie sich jetzt fragen, ob Sie dies selbst
tun müssen, lautet die Antwort möglicherweise nein ... Genau das erledigt heutzutage ... ... jede (?) Bibliothek mit Funktionen höherer Ordnung.
Wenn Sie lodash oder Unterstrich oder sogar jQuery verwenden, haben alle die Möglichkeit, eine Reihe von Elementen zu übernehmen und eine Aktion n-mal auszuführen.
Wenn Sie so etwas nicht verwenden, schreiben Sie auf jeden Fall Ihre eigenen.

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);
};

Update für ES6 (ES2015) und darüber hinaus

Eine slice( )/ array( )/ etc-Hilfsmethode wird nicht nur Menschen das Leben erleichtern, die Listen genauso verwenden möchten, wie sie Arrays verwenden (wie sie sollten), sondern auch Menschen, die den Luxus haben, in ES6 + -Browsern der relativ nahen Umgebung zu arbeiten Zukunft oder von "Transpilieren" in Babel heute haben Sie Sprachfunktionen eingebaut, die diese Art von Dingen unnötig machen.

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 sauber und sehr nützlich.
Suchen Sie nach den Operatoren Rest und Spread . Probieren Sie sie auf der BabelJS-Website aus. Wenn Ihr Tech-Stack in Ordnung ist, verwenden Sie ihn in der Produktion mit Babel und einem Build-Schritt.

Es gibt keinen guten Grund , nicht in der Lage sein , die aus Nicht-Array in einem Array umwandeln zu verwenden ... ... macht nicht nur ein Durcheinander von Code nichts zu tun , aber der gleichen hässlicher Linie einfügen, überall.

Die querySelectorAllMethode gibt ein zurück NodeList, das einem Array ähnelt, aber kein Array ist. Daher gibt es keine forEachMethode (über die Array-Objekte erben Array.prototype).

Da a NodeListeinem Array ähnlich ist, funktionieren Array-Methoden tatsächlich damit. Wenn Sie also verwenden [].forEach.call, rufen Sie die Array.prototype.forEachMethode im Kontext von auf NodeList, als ob Sie dies einfach hätten tun können yourNodeList.forEach(/*...*/).

Beachten Sie, dass das leere Array-Literal nur eine Verknüpfung zur erweiterten Version ist, die Sie wahrscheinlich auch häufig sehen werden:

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

Die anderen Antworten haben diesen Code sehr gut erklärt, daher füge ich nur einen Vorschlag hinzu.

Dies ist ein gutes Beispiel für Code, der der Einfachheit und Klarheit halber überarbeitet werden sollte. Anstatt [].forEach.call()oder Array.prototype.forEach.call()jedes Mal, wenn Sie dies tun, eine einfache Funktion daraus zu machen:

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

Jetzt können Sie diese Funktion anstelle des komplizierteren und undurchsichtigeren Codes aufrufen:

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

Es kann besser mit geschrieben werden

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

});

Es wird document.querySelectorAll('a')ein Objekt zurückgegeben, das einem Array ähnlich ist, aber nicht vom ArrayTyp erbt . Wir rufen also die forEachMethode aus dem Array.prototypeObjekt mit dem Kontext als dem von zurückgegebenen Wert aufdocument.querySelectorAll('a')

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

Es ist im Grunde das gleiche wie:

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

Möchten Sie diese alte Frage aktualisieren:

Der Grund für [].foreach.call()das Durchlaufen von Elementen in modernen Browsern ist größtenteils vorbei. Wir können document.querySelectorAll("a").foreach()direkt verwenden.

NodeList-Objekte sind Sammlungen von Knoten, die normalerweise von Eigenschaften wie Node.childNodes und Methoden wie document.querySelectorAll () zurückgegeben werden.

Obwohl NodeList kein Array ist, ist es möglich, mit forEach () darüber zu iterieren . Es kann auch mit Array.from () in ein echtes Array konvertiert werden.

Einige ältere Browser haben jedoch weder NodeList.forEach () noch Array.from () implementiert. Dies kann mithilfe von Array.prototype.forEach () umgangen werden - siehe Beispiel dieses Dokuments.

Ein leeres Array hat forEachin seinem Prototyp eine Eigenschaft, die ein Funktionsobjekt ist. (Das leere Array ist nur eine einfache Möglichkeit, einen Verweis auf die forEachFunktion aller ArrayObjekte zu erhalten.) Funktionsobjekte haben wiederum eine callEigenschaft, die auch eine Funktion ist. Wenn Sie die Funktion einer Funktion aufrufen call, wird die Funktion mit den angegebenen Argumenten ausgeführt. Das erste Argument wird thisin der aufgerufenen Funktion.

Dokumentation zur callFunktion finden Sie hier . Dokumentation für forEachist hier .

Fügen Sie einfach eine Zeile hinzu:

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

Und voila!

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

Genießen :-)

Warnung: NodeList ist eine globale Klasse. Verwenden Sie diese Empfehlung nicht, wenn Sie eine öffentliche Bibliothek schreiben. Es ist jedoch eine sehr bequeme Möglichkeit, die Selbstwirksamkeit zu steigern, wenn Sie an einer Website oder einer node.js-App arbeiten.

Nur eine schnelle und schmutzige Lösung, die ich am Ende immer benutze. Ich würde Prototypen nicht anfassen, genauso gute Praxis. Natürlich gibt es viele Möglichkeiten, dies zu verbessern, aber Sie haben die Idee.

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}`);
});

[]Gibt immer ein neues Array zurück. Dies entspricht einem Array, es wird new Array()jedoch garantiert zurückgegeben, da Arrayes vom Benutzer überschrieben werden []kann, während dies nicht möglich ist. Dies ist also ein sicherer Weg, um den Prototyp zu erhalten Array, der dann wie beschrieben callverwendet wird, um die Funktion auf der arraylike Knotenliste (this) auszuführen.

Ruft eine Funktion mit einem bestimmten Wert und Argumenten auf, die einzeln angegeben werden. mdn

Norguard erklärte, WAS [].forEach.call() und James Allardice WARUM wir es tun: weil querySelectorAll eine zurückgibt NodeList, die keine forEach-Methode hat ...

Es sei denn, Sie haben einen modernen Browser wie Chrome 51+, Firefox 50+, Opera 38, Safari 10.

Wenn nicht, können Sie eine Polyfüllung hinzufügen :

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);
        }
    };
}

Viele gute Informationen auf dieser Seite (siehe Antwort + Antwort + Kommentar ), aber ich hatte kürzlich die gleiche Frage wie das OP, und es dauerte einige Grabungen, um das ganze Bild zu erhalten. Hier ist eine kurze Version:

Das Ziel ist es, ArrayMethoden auf einem Array zu verwenden NodeList, das diese Methoden selbst nicht hat.

Ein älteres Muster hat die Methoden von Array über kooptiert Function.call()und ein Array-Literal ( []) verwendet, anstatt Array.prototypedass es kürzer zu tippen war:

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

Ein neueres Muster (nach ECMAScript 2015) ist zu verwenden Array.from():

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