Was ist der schnellste Weg, um ein Array in JavaScript zu durchlaufen?

Ich habe aus Büchern gelernt, dass man so eine Schleife schreiben sollte:

for(var i=0, len=arr.length; i < len; i++){
    // blah blah
}

Das arr.lengthwird also nicht jedes Mal berechnet.

Andere sagen, dass der Compiler dies optimieren wird, sodass Sie einfach schreiben können:

for(var i=0; i < arr.length; i++){
    // blah blah
}

Ich möchte nur wissen, welcher Weg in der Praxis der beste ist.

Nach diesem Test mit den meisten modernen Browsern ...

http://jsben.ch/dyM52

Derzeit die schnellste Form der Schleife (und meiner Meinung nach die syntaktisch offensichtlichste).

Ein Standard für Schleifen mit Längen-Caching

for (var i = 0, len = myArray.length; i < len; i++) {

}

Ich würde sagen, dass dies definitiv ein Fall ist, in dem ich Entwickler von JavaScript-Engines begrüße. Eine Laufzeit sollte aus Gründen der Klarheit und nicht der Klugheit optimiert werden .

Der absolut schnellste Weg, um ein Javascript-Array zu durchlaufen, ist:

var len = arr.length;
while (len--) {
    // blah blah
}

Einen vollständigen Vergleich finden Sie unter http://blogs.oracle.com/greimer/entry/best_way_to_code_a

Ab Juni 2016 werden einige Tests in neuestem Chrome durchgeführt (71% des Browsermarktes im Mai 2016 und mehr):

• Die schnellste Schleife ist eine for-Schleife , sowohl mit als auch ohne Caching-Länge, die eine wirklich ähnliche Leistung liefert. (Die for-Schleife mit zwischengespeicherter Länge lieferte manchmal bessere Ergebnisse als die ohne Caching, aber der Unterschied ist nahezu vernachlässigbar, was bedeutet, dass die Engine möglicherweise bereits für den Standard optimiert ist und wahrscheinlich am einfachsten für eine Schleife ohne Caching ist.)
• Die while-Schleife mit Dekrementen war ungefähr 1,5-mal langsamer als die for-Schleife.
• Eine Schleife, die eine Rückruffunktion verwendet (wie der Standard für jede), war ungefähr zehnmal langsamer als die for-Schleife.

Ich glaube, dieser Thread ist zu alt und es ist irreführend, wenn Programmierer glauben, sie müssten die Länge zwischenspeichern oder Reverse-Traversing mit Dekrementen verwenden, um eine bessere Leistung zu erzielen. Sie schreiben Code, der weniger lesbar und fehleranfälliger ist als eine einfache unkomplizierte for-Schleife. Daher empfehle ich:

• Wenn Ihre App viele Elemente durchläuft oder sich Ihr Schleifencode in einer häufig verwendeten Funktion befindet, ist eine einfache for-Schleife die Antwort:

  for (var i = 0; i < arr.length; i++) {
    // Do stuff with arr[i] or i
  }
  

• Wenn Ihre App nicht wirklich viele Elemente durchläuft oder Sie hier und da nur kleine Iterationen durchführen müssen, ist die Verwendung des Standard-forEach-Rückrufs oder einer ähnlichen Funktion aus der JS-Bibliothek Ihrer Wahl möglicherweise verständlicher und weniger fehleranfällig, da Der Bereich der Indexvariablen ist geschlossen und Sie müssen keine Klammern verwenden, um direkt auf den Array-Wert zuzugreifen:

  arr.forEach(function(value, index) {
    // Do stuff with value or index
  });
  

• Wenn Sie wirklich ein paar Millisekunden kratzen müssen, während Sie über Milliarden von Zeilen iterieren, und sich die Länge Ihres Arrays während des Vorgangs nicht ändert, können Sie die Länge in Ihrer for-Schleife zwischenspeichern. Obwohl ich denke, dass dies heutzutage wirklich nicht notwendig ist:

  for (var i = 0, len = arr.length; i < len; i++) {
    // Do stuff with arr[i]
  }
  

Wenn die Reihenfolge nicht wichtig ist, bevorzuge ich diesen Stil:

for(var i = array.length; i--; )

Es speichert die Länge zwischen und ist viel kürzer zu schreiben. Es wird jedoch in umgekehrter Reihenfolge über das Array iteriert.

Es ist erst 2018, also könnte ein Update schön sein ...

Und ich muss der akzeptierten Antwort wirklich widersprechen . Es wird in verschiedenen Browsern verschoben. Einige arbeiten forEachschneller, andere schneller, for-loopund andere sind while hier ein Benchmark für alle Methoden http://jsben.ch/mW36e

arr.forEach( a => {
  // ...
}

und da Sie eine Menge for-Schleifen sehen können for(a = 0; ... ), ist es erwähnenswert, dass ohne 'var' Variablen global definiert werden und dies die Geschwindigkeit dramatisch beeinflussen kann, so dass es langsam wird.

Duffs Gerät läuft in der Oper schneller, aber nicht in Firefox

var arr = arr = new Array(11111111).fill(255);
var benches =     
[ [ "empty", () => {
  for(var a = 0, l = arr.length; a < l; a++);
}]
, ["for-loop", () => {
  for(var a = 0, l = arr.length; a < l; ++a)
    var b = arr[a] + 1;
}]
, ["for-loop++", () => {
  for(var a = 0, l = arr.length; a < l; a++)
    var b = arr[a] + 1;
}]
, ["for-loop - arr.length", () => {
  for(var a = 0; a < arr.length; ++a )
    var b = arr[a] + 1;
}]
, ["reverse for-loop", () => {
  for(var a = arr.length - 1; a >= 0; --a )
    var b = arr[a] + 1;
}]
,["while-loop", () => {
  var a = 0, l = arr.length;
  while( a < l ) {
    var b = arr[a] + 1;
    ++a;
  }
}]
, ["reverse-do-while-loop", () => {
  var a = arr.length - 1; // CAREFUL
  do {
    var b = arr[a] + 1;
  } while(a--);   
}]
, ["forEach", () => {
  arr.forEach( a => {
    var b = a + 1;
  });
}]
, ["for const..in (only 3.3%)", () => {
  var ar = arr.slice(0,arr.length/33);
  for( const a in ar ) {
    var b = a + 1;
  }
}]
, ["for let..in (only 3.3%)", () => {
  var ar = arr.slice(0,arr.length/33);
  for( let a in ar ) {
    var b = a + 1;
  }
}]
, ["for var..in (only 3.3%)", () => {
  var ar = arr.slice(0,arr.length/33);
  for( var a in ar ) {
    var b = a + 1;
  }
}]
, ["Duff's device", () => {
  var len = arr.length;
  var i, n = len % 8 - 1;

  if (n > 0) {
    do {
      var b = arr[len-n] + 1;
    } while (--n); // n must be greater than 0 here
  }
  n = (len * 0.125) ^ 0;
  if (n > 0) { 
    do {
      i = --n <<3;
      var b = arr[i] + 1;
      var c = arr[i+1] + 1;
      var d = arr[i+2] + 1;
      var e = arr[i+3] + 1;
      var f = arr[i+4] + 1;
      var g = arr[i+5] + 1;
      var h = arr[i+6] + 1;
      var k = arr[i+7] + 1;
    }
    while (n); // n must be greater than 0 here also
  }
}]];
function bench(title, f) {
  var t0 = performance.now();
  var res = f();
  return performance.now() - t0; // console.log(`${title} took ${t1-t0} msec`);
}
var globalVarTime = bench( "for-loop without 'var'", () => {
  // Here if you forget to put 'var' so variables'll be global
  for(a = 0, l = arr.length; a < l; ++a)
     var b = arr[a] + 1;
});
var times = benches.map( function(a) {
                      arr = new Array(11111111).fill(255);
                      return [a[0], bench(...a)]
                     }).sort( (a,b) => a[1]-b[1] );
var max = times[times.length-1][1];
times = times.map( a => {a[2] = (a[1]/max)*100; return a; } );
var template = (title, time, n) =>
  `<div>` +
    `<span>${title} &nbsp;</span>` +
    `<span style="width:${3+n/2}%">&nbsp;${Number(time.toFixed(3))}msec</span>` +
  `</div>`;

var strRes = times.map( t => template(...t) ).join("\n") + 
            `<br><br>for-loop without 'var' ${globalVarTime} msec.`;
var $container = document.getElementById("container");
$container.innerHTML = strRes;

body { color:#fff; background:#333; font-family:helvetica; }
body > div > div {  clear:both   }
body > div > div > span {
  float:left;
  width:43%;
  margin:3px 0;
  text-align:right;
}
body > div > div > span:nth-child(2) {
  text-align:left;
  background:darkorange;
  animation:showup .37s .111s;
  -webkit-animation:showup .37s .111s;
}
@keyframes showup { from { width:0; } }
@-webkit-keyframes showup { from { width:0; } }

<div id="container"> </div>

2014 Whileist zurück

Denken Sie einfach logisch.

Schau dir das an

for( var index = 0 , length = array.length ; index < length ; index++ ) {

 //do stuff

}

1. Es müssen mindestens 2 Variablen (Index, Länge) erstellt werden.
2. Sie müssen überprüfen, ob der Index kleiner als die Länge ist
3. Der Index muss erhöht werden
4. Die forSchleife hat 3 Parameter

Sagen Sie mir jetzt, warum dies schneller sein sollte als:

var length = array.length;

while( --length ) { //or length--

 //do stuff

}

1. Eine Variable
2. Keine Schecks
3. der Index wird verringert (Maschinen bevorzugen das)
4. while hat nur einen Parameter

Ich war total verwirrt, als Chrome 28 zeigte, dass die for-Schleife schneller ist als die Weile. Das muss irgendwie ben gewesen sein

"Äh, jeder benutzt die for-Schleife. Konzentrieren wir uns darauf, wenn wir für Chrome entwickeln."

Aber jetzt, im Jahr 2014, ist die while-Schleife wieder auf Chrom. es ist 2 mal schneller, in anderen / älteren Browsern war es immer schneller.

In letzter Zeit habe ich einige neue Tests gemacht. In der realen Welt sind diese Funktionscodes nichts wert und jsperf kann die while-Schleife nicht richtig ausführen, da die array.length neu erstellt werden muss, was ebenfalls Zeit kostet.

Sie können nicht die tatsächliche Geschwindigkeit einer while-Schleife auf jsperf erhalten.

Sie müssen Ihre eigene benutzerdefinierte Funktion erstellen und dies mit überprüfen window.performance.now()

Und ja ... die while-Schleife ist auf keinen Fall einfach schneller.

Das eigentliche Problem ist eigentlich die Dom-Manipulation / Renderzeit / Zeichenzeit oder wie auch immer Sie es nennen möchten.

Zum Beispiel habe ich eine Canvas-Szene, in der ich die Koordinaten und Kollisionen berechnen muss ... dies geschieht zwischen 10 und 200 Mikrosekunden (nicht Millisekunden). Es dauert tatsächlich verschiedene Millisekunden, um alles zu rendern. Wie in DOM.

ABER

Es gibt eine andere super performante Möglichkeit, loopin einigen Fällen das for zu verwenden, um beispielsweise ein Array zu kopieren / klonen

for(
 var i = array.length ;
 i > 0 ;
 arrayCopy[ --i ] = array[ i ] // doing stuff
);

Beachten Sie die Einrichtung der Parameter:

1. Wie in der while-Schleife verwende ich nur eine Variable
2. Sie müssen überprüfen, ob der Index größer als 0 ist.
3. Wie Sie sehen können, unterscheidet sich dieser Ansatz von der normalen for-Schleife, die jeder verwendet, da ich Dinge innerhalb des 3. Parameters mache und auch direkt innerhalb des Arrays abnehme.

Dies bestätigt, dass Maschinen wie die -

Schreiben, dass ich dachte, es ein wenig kürzer zu machen und einige nutzlose Sachen zu entfernen, und schrieb dieses mit dem gleichen Stil:

for(
 var i = array.length ;
 i-- ;
 arrayCopy[ i ] = array[ i ] // doing stuff
);

Selbst wenn es kürzer ist, sieht es so aus, als würde ieine weitere Verwendung alles verlangsamen. Es ist 1/5 langsamer als die vorherige forund die vorherige Schleife while.

Hinweis: Das ;ist sehr wichtig nach dem für looo ohne{}

Auch wenn ich Ihnen gerade gesagt habe, dass jsperf nicht der beste Weg ist, um Skripte zu testen. Ich habe diese 2 Schleifen hier hinzugefügt

http://jsperf.com/caching-array-length/40

Und hier ist eine weitere Antwort zur Leistung in Javascript

https://stackoverflow.com/a/21353032/2450730

Diese Antwort soll performante Möglichkeiten zum Schreiben von Javascript aufzeigen. Wenn Sie das nicht lesen können, fragen Sie und Sie erhalten eine Antwort oder lesen ein Buch über Javascript http://www.ecma-international.org/ecma-262/5.1/

http://jsperf.com/caching-array-length/60

Die letzte Testversion, die ich vorbereitet habe (indem ich eine ältere wiederverwendete), zeigt eines.

Die Caching-Länge ist nicht so wichtig, schadet aber nicht.

Jeder erste Testlauf, der oben verlinkt ist (auf der frisch geöffneten Registerkarte), liefert die besten Ergebnisse für die letzten 4 Snippets (3., 5., 7. und 10. in Diagrammen) in Chrome, Opera und Firefox in meinem Debian Squeeze 64-Bit ( meiner Desktop-Hardware) ). Nachfolgende Läufe ergeben ein ganz anderes Ergebnis.

Leistungsbezogene Schlussfolgerungen sind einfach:

• Gehen Sie mit for-Schleife (vorwärts) und testen Sie mit !==anstelle von <.
• Wenn Sie das Array später nicht wiederverwenden müssen, ist die while-Schleife mit dekrementierter Länge und destruktivem shift()Array ebenfalls effizient.

tl; dr

Heutzutage (2011.10) scheint das folgende Muster das schnellste zu sein.

for (var i = 0, len = arr.length; i !== len; i++) {
    ...
}

Beachten Sie, dass das Caching arr.lengthhier nicht entscheidend ist. Sie können also nur testen, ob die i !== arr.lengthLeistung sinkt, aber Sie erhalten kürzeren Code.

PS: Ich weiß, dass ein Snippet mit shift()seinem Ergebnis verwendet werden kann, anstatt auf das 0. Element zuzugreifen, aber ich habe das irgendwie übersehen, nachdem ich die vorherige Revision (die falsche while-Schleifen hatte) wiederverwendet habe, und später wollte ich die bereits erhaltenen Ergebnisse nicht verlieren.

"Best" wie bei reiner Leistung? oder Leistung UND Lesbarkeit?

Reine Leistung "am besten" ist dies, die einen Cache und den ++ Präfixoperator verwendet (meine Daten: http://jsperf.com/caching-array-length/189 )

for (var i = 0, len = myArray.length; i < len; ++i) {
  // blah blah
}

Ich würde argumentieren, dass die for-Schleife ohne Cache das beste Gleichgewicht zwischen Ausführungszeit und Lesezeit des Programmierers darstellt. Jeder Programmierer, der mit C / C ++ / Java gestartet ist, verschwendet keine ms, um diese durchzulesen

for(var i=0; i < arr.length; i++){
  // blah blah
}

** Cache die Array-Länge innerhalb der Schleife, einige Sekunden Zeit werden verstrichen. Abhängig von den Elementen im Array, wenn mehr Elemente im Array vorhanden sind, gibt es einen großen Unterschied in Bezug auf Ms der Zeit *

** **.

sArr; //Array[158];

for(var i = 0 ; i <sArr.length ; i++) {
 callArray(sArr[i]); //function call
}

***end: 6.875ms***

** **.

** **.

sArr; //Array[158];
for(var i = 0,len = sArr.length ; i < len ; i++) {
  callArray(sArr[i]); //function call
}

***end: 1.354ms***

** **.

Dies scheint bei weitem der schnellste Weg zu sein ...

var el;
while (el = arr.shift()) {
  el *= 2;
}

Berücksichtigen Sie, dass dies das Array verbraucht, es isst und nichts mehr übrig lässt ...

Es ist das Jahr 2017 .

Ich habe einige Tests gemacht.

https://jsperf.com/fastest-way-to-iterate-through-an-array/

Die whileMethode scheint in Chrome die schnellste zu sein.

Sieht aus wie die linke Abnahme ( --i) ist viel schneller als die andere ( ++i, i--, i++) auf Firefox.

Dieser Ansatz ist der Fasten im Durchschnitt. Das Array wird jedoch in umgekehrter Reihenfolge wiederholt.

let i = array.length;
while (--i >= 0) {
    doSomething(array[i]);
}

Wenn die Vorwärtsreihenfolge wichtig ist, verwenden Sie diesen Ansatz.

let ii = array.length;
let i = 0;
while (i < ii) {
    doSomething(array[i]);
    ++i;
}

Ich schreibe immer im ersten Stil.

Auch wenn ein Compiler intelligent genug ist, um ihn für Arrays zu optimieren, aber dennoch intelligent, wenn wir hier DOMNodeList oder ein kompliziertes Objekt mit berechneter Länge verwenden?

Ich weiß, was die Frage über Arrays ist, aber ich denke, es ist eine gute Praxis, alle Ihre Loops in einem Stil zu schreiben.

var arr = []; // The array
var i = 0;
while (i < arr.length) {
    // Do something with arr[i]
    i++;
}

i ++ ist schneller als ++ i, --i und i--

Sie können auch die letzte Zeile speichern, die arr [i ++] ausführt, wenn Sie das letzte Mal auf i zugreifen müssen (dies kann jedoch schwierig zu debuggen sein).

Sie können es hier testen (mit anderen Schleifentests): http://jsperf.com/for-vs-whilepop/5

Ab September 2017 zeigen diese jsperf-Tests, dass das folgende Muster unter Chrome 60 am leistungsfähigsten ist:

function foo(x) {
 x;
};
arr.forEach(foo);

Kann sich jemand reproduzieren?

Ich habe einige andere Möglichkeiten ausprobiert, um ein großes Array zu iterieren, und festgestellt, dass das Halbieren der Array-Länge und das anschließende Iterieren beider Hälften in einer einzigen Schleife schneller ist. Dieser Leistungsunterschied kann bei der Verarbeitung großer Arrays festgestellt werden .

var firstHalfLen =0;
var secondHalfLen = 0;
var count2=0;
var searchterm = "face";
var halfLen = arrayLength/2;
if(arrayLength%2==halfLen)
{
   firstHalfLen = Math.ceil(halfLen);
   secondHalfLen=Math.floor(halfLen);
}
else
{
   firstHalfLen=halfLen;
   secondHalfLen=halfLen;
}
for(var firstHalfCOunter=0,secondHalfCounter = arrayLength-secondHalfLen;
    firstHalfCOunter < firstHalfLen;
    firstHalfCOunter++)
{
  if(mainArray[firstHalfCOunter].search(new RegExp(searchterm, "i"))> -1)
  {
    count2+=1;
  }
  if(secondHalfCounter < arrayLength)
  {
    if(mainArray[secondHalfCounter].search(new RegExp(searchterm, "i"))> -1)
    {
        count2+=1;
    }
    secondHalfCounter++; 
  }
}

Einige Leistungsvergleiche (unter Verwendung von timer.js) zwischen der for-Schleife mit zwischengespeicherter Länge und der obigen Methode.

http://jsfiddle.net/tejzpr/bbLgzxgo/

Ein weiterer jsperf.com-Test: http://jsperf.com/while-reverse-vs-for-cached-length

Die umgekehrte while-Schleife scheint die schnellste zu sein. Das einzige Problem ist, dass while (--i) bei 0 stoppt. Wie kann ich dann in meiner Schleife auf Array [0] zugreifen?

Eine einfache while-Schleife ist oft die schnellste. jsperf.com ist eine großartige Sandbox, um diese Art von Konzepten zu testen.

https://jsperf.com/fastest-array-loops-in-javascript/24

While-Schleife ist etwas schneller als for-Schleife.

var len = arr.length;
while (len--) {
    // blah blah
}

Verwenden Sie stattdessen die while-Schleife

Der schnellste Ansatz ist der traditionelle for-Loop. Hier ist ein umfassenderer Leistungsvergleich.

https://gists.cwidanage.com/2019/11/how-to-iterate-over-javascript-arrays.html

Die eleganteste Lösung, die ich kenne, ist die Verwendung einer Karte.

var arr = [1,2,3];
arr.map(function(input){console.log(input);});

Versuche dies:

var myarray =[],
i = myarray.lenght;
while(i--){
// do somthing
}

Der schnellere Weg, ein Array zu schleifen, ist die Verwendung des Filters. Die filter () -Methode erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const words = ['Floccinaucinihilipilification', 'limit', 'elite', 'Hippopotomonstrosesquipedaliophobia', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(new Date(), result);

Aus meiner Erfahrung bevorzuge ich immer Filter, Karten usw.

Ab 2019 ist WebWorker beliebter geworden. Bei großen Datenmengen können wir WebWorker verwenden, um durch die vollständige Nutzung von Multi-Core-Prozessoren viel schneller zu verarbeiten.

Wir haben auch Parallel.js, die die Verwendung von WebWorker für die Datenverarbeitung erheblich vereinfachen.