Wie Sie jQuery each() in regelmäßigen javascript-Schleife

Ein paar Fragen:

  1. Ist ein regulärer javascript-Schleife (Schleife, die durch eine Reihe von Elementen) schneller/effizienter als die Verwendung von jQuery each() ??

  2. Wenn ja, was ist der beste Weg zu schreiben, den folgenden code als ein regulärer javascript-Schleife?

$('div').each(function(){ //... })

  • Wenn Sie wirklich interessiert sind in der Schleife, die Effizienz, schauen Sie hier. stackoverflow.com/questions/1340589/...
  • Ein for Schleife ist schneller, aber beachten Sie, dass, wenn das, was du tust, innerhalb der Schleife beinhaltet die callback-Funktionen, die mit der loop-index-Variablen-später dann würden Sie brauchen, um einzuführen, eine Schließung und würde (mehr oder weniger) heben sich die Effizienzgewinne.
InformationsquelleAutor HandiworkNYC.com | 2012-08-24
  1. 14

    Ja, das entfernen der each() geben Sie etwas bessere Leistung. Dies ist, wie Sie schreiben, könnte eine for-Schleife für eine Liste von Elementen.

    var divs = $('div');

for(var i = 0; i < divs.length; i++){
    var thisDiv = divs[i]; //element

    var $thisDiv = $(divs[i]); //jquery object

    //do stuff
}
    • Zur Beantwortung der ersten Teil der Frage, ja eine regelmäßige Schleife wird etwas effizienter ist aufgrund der Entfernung von einigen overhead. Der Unterschied sollte sehr gering sein.
    • Check this out: github.com/jquery/jquery/blob/master/src/core.js#L566
    • Und dieses: jsperf.com/for-vs-foreach-vs-each/24
    • Ist divs[i] ein jquery-Objekt? wenn ich thisDiv.find('a') zum Beispiel, bekomme ich eine Fehlermeldung...
    • divs[i] ist kein jquery-Objekt. Sie müsste $(divs[i])
    • genial Frank, vielen Dank.
    • es ist schneller zu erklären divs.length außerhalb der Schleife

    InformationsquelleAutor Gabe
  2. 5
    var divs = document.getElementsByTagName('div'),
    l = divs.length, i, cur;

for(i=0; i<l; i++) {
    cur = divs[i];
    //do stuff with cur here
}

    Bitte weiter auf den Pfad zum entfernen von jQuery im Namen der Effizienz. Dieser code ist etwa fünfzig mal schneller als das jQuery-äquivalent.

    • Es ist nur 50x schneller, wenn Sie haben nichts in die "Sachen tun, mit cur-hier" - Teil. Es ist schneller, aber der 50x ist irreführend, in den großen Plan.
    InformationsquelleAutor Niet the Dark Absol
  3. 1

    Zur Beantwortung Ihrer zweiten Frage, wegen dem ersten schon beantwortet;

    War ich auch interessiert, und ich beschlossen, einen benchmark für die zwei zu finden, die den Unterschied mit Gabe ' s-Beispiel. Die Antwort ist, unter den Umständen, die ein jQuery-Objekt als Endergebnis:

    Führen Sie genau das gleiche.

    http://jsperf.com/jquery-each-vs-native-selectors

    Firefox findet tatsächlich die jQuery-version schneller, offenbar.

    InformationsquelleAutor Voltlight
  4. 1

    Anstelle der Verwendung von jquery .each()

    $('div').each(function(){ //... })

    Können Sie document.querySelectorAll(), dann konvertieren Sie die HTMLCollection in ein JavaScript-array. Dann können Sie die Karte über das array von Elementen.

     const elems = document.querySelectorAll('.my-elements')
 const $elems = [].slice.call(elems)
 $elems.map( (elem) => { console.log(elem) })
    InformationsquelleAutor svnm
Schreibe einen Kommentar