Warum gibt es in der JavaScript-Funktion [].forEach.call() ein leeres Array?

Die Funktion [].forEach.call() in JavaScript verstehen

Sind Sie neugierig auf die faszinierende Verwendung von [].forEach? call() in JavaScript? Schauen wir uns seinen Zweck und seine Funktionalität genauer an.

In JavaScript verfügen Arrays über eine leistungsstarke Methode namens forEach, mit der Sie Operationen für jedes Element eines Arrays ausführen können. In einigen Fällen kann es jedoch vorkommen, dass Sie auf Code stoßen, bei dem ein leeres Array verwendet wird, bevor forEach auf eine Knotenliste angewendet wird.

Aufschlüsselung des Codes

Bedenken Sie Folgendes Codeausschnitt:

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

Was passiert hier? Lassen Sie es uns aufschlüsseln:

• []: Dies ist ein leeres Array. Es dient im Code keinem eigentlichen Zweck. Sein Vorhandensein dient lediglich dazu, Zugriff auf die forEach-Methode zu ermöglichen, die ein Prototyp von Arrays ist.
• forEach: Die forEach-Methode iteriert über jedes Element in einem Array (oder einem arrayähnlichen Objekt). und ruft die angegebene Funktion mit drei Argumenten auf: dem Element, seinem Index und dem Array selbst.
• .call: Die .call-Methode wird verwendet, um eine Funktion mit einem angegebenen Wert für aufzurufen Es ist das Schlüsselwort „this“. In diesem Fall wird der „this“-Wert der forEach-Methode vom leeren Array in die Liste der -Tags geändert. Dadurch kann die Funktion auf jedes -Element nach Index zugreifen.

Beispielverwendung

Sehen wir uns ein Beispiel an, um besser zu verstehen, wie dieser Code funktioniert:

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

In diesem Code:

• Wir erhalten eine Knotenliste aller -Tags auf der Seite.
• Der [].forEach.call ()-Methode ändert den „this“-Wert in myNodeList und ruft die forEach-Methode über die -Elemente auf.
• Innerhalb der Callback-Funktion können wir mit el auf jedes -Element zugreifen und seinen Stil ändern ( in diesem Fall wird die Farbe in Blau geändert.

Alternative Syntax für ES6

In ES6 (ECMAScript 2015) und darüber hinaus eine modernere und prägnantere Es gibt eine Syntax, um das gleiche Ergebnis zu erzielen:

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

In dieser aktualisierten Syntax verwenden wir den Spread-Operator (...), um die Knotenliste in ein Array umzuwandeln, das dann mit forEach iteriert werden kann.

Fazit

Die [].forEach.call()-Technik bietet eine prägnante und effektive Möglichkeit, die forEach-Methode auf Array-ähnliche Objekte wie Knotenlisten anzuwenden. Mithilfe dieser Technik können Sie ganz einfach Vorgänge für jedes Element in der Liste ausführen. Bedenken Sie jedoch, dass in modernem JavaScript alternative Syntaxen wie der Spread-Operator möglicherweise eine elegantere Lösung bieten.

Das obige ist der detaillierte Inhalt vonWarum gibt es in der JavaScript-Funktion [].forEach.call() ein leeres Array?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!