.forEach() von JavaScript im Vergleich zu .each() von jQuery verstehen und verwenden

Blog

.forEach() von JavaScript im Vergleich zu .each() von jQuery verstehen und verwenden

Ihre Kenntnisse in JavaScript und jQuery sind unvollständig, wenn Sie nicht wissen, wie Sie mit den Methoden .forEach() und .each() Schleifen ausführen. Dieses Tutorial hilft Ihnen, JavaScript .forEach() & jQuery .each() in 2 Minuten schnell zu beherrschen.

Es gibt zwei Methoden, um mit einem Array auf Client-Seite umzugehen – JavaScript .forEach() und jQuery .each(). Hier werde ich Ihnen beibringen, wie Sie diese beiden Methoden in verschiedenen Szenarien anwenden können.

Definition dieser 2 Methoden

A. JavaScript .forEach()-Methode

Die Methode .forEach() von JavaScript führt eine gegebene Funktion einmal für jedes Element des Arrays aus.

Zum Beispiel -

var arr = ['a', 'b', 'c']; arr.forEach(function(element) { console.log(element); });

Der obige JavaScript-Code wird gedruckt – ‚a‘, ‚b‘ und ‚c‘ im Konsolenfenster.

B. jQuery .each() Methode

jQuery hat seine eigene Methode namens jQuery Each Methode und wird verwendet, um Arrays, Arrays von Objekten und übereinstimmende Elemente des DOM zu durchlaufen. Siehe den folgenden Code:

Bestes dunkles Thema für vscode
var arr = ['a', 'b', 'c']; $.each(arr , function (index, value){ console.log(arr); });

Der obige jQuery-Code wird gedruckt – ‚a‘, ‚b‘ und ‚c‘ im Konsolenfenster.

Durchlaufen von DOM-Elementen

A. JavaScript .forEach()-Methode

Angenommen, Sie möchten alle Anker-Tags von der Webseite extrahieren und dann jedes davon durchlaufen. In diesem Fall müssen Sie zuerst alle Anker mit document.getElementsByTagName(a) und dann in ein Array umwandeln. Dies liegt daran, dass JavaScript .für jeden() -Methode durchläuft nur ein Array.

Siehe den folgenden Code:

var links = document.getElementsByTagName('a'); var Arr = Array.from(links); Arr.forEach(someFunction); function someFunction(currentValue) { console.log(currentValue); }

Ich habe die Methode Array.from() verwendet, um in ein Array zu konvertieren.

B. jQuery .each() Methode

Im Fall der Methode .each() durchlaufen Sie einfach alle Anker-Tags, wie im folgenden Code gezeigt, als jQuery Jede Methode kann Arrays, Arrays von Objekten und übereinstimmende Elemente des DOM durchlaufen. Sie müssen also nicht die Konvertierung in ein Array wie die JavaScript-Methode .forEach() durchführen.

Siehe den folgenden Code:

$('a').each(function (index, value) { console.log($(this).attr('href')); });

In diesem Fall können Sie deutlich sehen, dass die Codezeilen sehr gering sind als im Vergleich zur .forEach()-Methode von JavaScript.

Welche sollten Sie wählen?

Fall 1: DOM-Manipulationen

Bei der Arbeit mit DOM-Elementen hat die jQuery-Every-Methode einen großen Vorteil, da sie viele Codezeilen entfernt. Ziehen Sie diese Methode daher bei DOM-Manipulationen vor.

Fall 2: Website verwendet jQuery von früher

Wenn Ihre Website bereits jQuery verwendet, sollten Sie die Methode jQuery Each verwenden, da dies die Codekonsistenz in Ihr Projekt bringt.

In allen anderen Fällen verwenden Sie die JavaScript-Methode .forEach().

Abschluss

Beide oben genannten Methoden sind sehr gut und machen die Codes leicht verständlich. Ich würde jedem Webentwickler empfehlen, diese beiden Methoden zu kennen.

Vielen Dank fürs Lesen.

#JavaScript #jQuery #ES6 #javascript