Qual è il modo più veloce per passare in rassegna un array in JavaScript?

Ho imparato dai libri che dovresti scrivere per loop in questo modo ：

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

quindi arr.lengthnon verrà calcolato ogni volta.

Altri dicono che il compilatore farà un po 'di ottimizzazione per questo, quindi puoi semplicemente scrivere:

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

Voglio solo sapere qual è il modo migliore in pratica?

Dopo aver eseguito questo test con i browser più moderni ...

http://jsben.ch/dyM52

Attualmente , la forma più veloce di loop (e secondo me la più sintatticamente ovvia).

uno standard per loop con memorizzazione nella cache della lunghezza

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

}

Direi che questo è sicuramente un caso in cui applaudo gli sviluppatori del motore JavaScript. Un tempo di esecuzione dovrebbe essere ottimizzato per chiarezza , non per intelligenza .

Il modo più veloce in assoluto per scorrere un array javascript è:

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

Vedi http://blogs.oracle.com/greimer/entry/best_way_to_code_a per un confronto completo

A partire da giugno 2016 , eseguendo alcuni test nell'ultimo Chrome (71% del mercato dei browser a maggio 2016 e in aumento):

• Il ciclo più veloce è un ciclo for , sia con che senza lunghezza di cache che offre prestazioni molto simili. (Il ciclo for con lunghezza memorizzata nella cache a volte produceva risultati migliori rispetto a quello senza cache, ma la differenza è quasi trascurabile, il che significa che il motore potrebbe essere già ottimizzato per favorire lo standard e probabilmente il più semplice per loop senza cache).
• Il ciclo while con decrementi era circa 1,5 volte più lento del ciclo for.
• Un loop che utilizzava una funzione di callback (come lo standard forEach), era circa 10 volte più lento del loop for.

Credo che questo thread sia troppo vecchio ed è fuorviante per i programmatori pensare di aver bisogno di memorizzare nella cache la lunghezza, o usare i movimenti di attraversamento inverso con decrementi per ottenere prestazioni migliori, scrivendo codice meno leggibile e più incline agli errori di un semplice semplice ciclo. Pertanto, raccomando:

• Se la tua app scorre su molti elementi o il tuo codice loop si trova all'interno di una funzione che viene spesso utilizzata, la risposta è un semplice ciclo:

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

• Se la tua app non scorre realmente su molti elementi o devi solo fare piccole iterazioni qua e là, usare lo standard callback di ogni call o qualsiasi funzione simile dalla tua libreria JS preferita potrebbe essere più comprensibile e meno soggetto a errori, dal momento che l'ambito della variabile indice è chiuso e non è necessario utilizzare parentesi, accedendo direttamente al valore dell'array:

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

• Se hai davvero bisogno di grattare qualche millisecondo mentre esegui l'iterazione su miliardi di righe e la lunghezza dell'array non cambia durante il processo, potresti considerare di memorizzare nella cache la lunghezza del tuo ciclo for. Anche se penso che questo non sia davvero necessario al giorno d'oggi:

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

Se l'ordine non è importante, preferisco questo stile:

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

Memorizza la lunghezza della cache ed è molto più breve da scrivere. Ma itererà sull'array in ordine inverso.

È solo il 2018, quindi un aggiornamento potrebbe essere bello ...

E devo davvero essere in disaccordo con la risposta accettata . Si differenzia su diversi browser. alcuni lo fanno forEachpiù velocemente, altri for-loope alcuni while qui sono un punto di riferimento su tutti i metodi http://jsben.ch/mW36e

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

e dato che puoi vedere un sacco di for-loop come for(a = 0; ... )allora vale la pena ricordare che senza 'var' le variabili saranno definite a livello globale e questo può influenzare notevolmente la velocità, quindi rallenterà.

Il dispositivo di Duff funziona più velocemente su Opera ma non su 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>

Il 2014 Whileè tornato

Basta pensare logico.

Guarda questo

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

 //do stuff

}

1. È necessario creare almeno 2 variabili (indice, lunghezza)
2. È necessario verificare se l'indice è inferiore alla lunghezza
3. È necessario aumentare l'indice
4. il forloop ha 3 parametri

Ora dimmi perché questo dovrebbe essere più veloce di:

var length = array.length;

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

 //do stuff

}

1. Una variabile
2. Nessun controllo
3. l'indice è diminuito (le macchine preferiscono quello)
4. while ha solo un parametro

Ero totalmente confuso quando Chrome 28 ha mostrato che il ciclo for è più veloce del tempo. Questo deve avere ben una sorta di

"Uh, tutti usano il ciclo for, concentriamoci su quello quando sviluppiamo per Chrome."

Ma ora, nel 2014 il ciclo while è tornato su Chrome. è 2 volte più veloce, su altri / vecchi browser era sempre più veloce.

Ultimamente ho fatto alcuni nuovi test. Ora nel mondo reale quei codici brevi non valgono nulla e jsperf non può effettivamente eseguire correttamente il ciclo while, perché deve ricreare l'array.length che richiede anche tempo.

non è possibile ottenere la velocità effettiva di un ciclo while su jsperf.

devi creare la tua funzione personalizzata e verificarla con window.performance.now()

E sì ... non c'è modo che il ciclo while sia semplicemente più veloce.

Il vero problema è in realtà la manipolazione dom / tempo di rendering / tempo di disegno o comunque tu voglia chiamarlo.

Ad esempio ho una scena su tela in cui ho bisogno di calcolare le coordinate e le collisioni ... questo avviene tra 10-200 MicroSecondi (non millisecondi). in realtà ci vogliono vari millisecondi per eseguire il rendering di tutto. Stesso come in DOM.

MA

C'è un altro modo super performante che usa il per loopin alcuni casi ... per esempio per copiare / clonare un array

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

Si noti l'impostazione dei parametri:

1. Come nel ciclo while sto usando solo una variabile
2. È necessario verificare se l'indice è maggiore di 0;
3. Come puoi vedere, questo approccio è diverso rispetto al normale per il ciclo che tutti usano, poiché faccio cose all'interno del terzo parametro e diminuisco anche direttamente all'interno dell'array.

Detto questo, ciò conferma che le macchine come il -

scrivendo che stavo pensando di renderlo un po 'più corto e rimuovere alcune cose inutili e ho scritto questo usando lo stesso stile:

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

Anche se è più corto, sembra che usare ancora iuna volta rallenta tutto. È 1/5 più lento del forloop precedente e di quello precedente while.

Nota: il ;è molto importante dopo la per Looo senza{}

Anche se ti ho appena detto che jsperf non è il modo migliore per testare gli script .. ho aggiunto qui 2 loop

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

Ed ecco un'altra risposta sulle prestazioni in javascript

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

Questa risposta è mostrare modi performanti di scrivere javascript. Quindi se non riesci a leggerlo, chiedi e otterrai una risposta o leggi un libro su javascript http://www.ecma-international.org/ecma-262/5.1/

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

L'ultima revisione del test, che ho preparato (riutilizzando quella precedente), mostra una cosa.

La lunghezza della cache non è molto importante, ma non danneggia.

Ogni prima esecuzione del test collegata sopra (nella scheda appena aperta) fornisce i migliori risultati per gli ultimi 4 frammenti (3 °, 5 °, 7 ° e 10 ° nelle classifiche) in Chrome, Opera e Firefox nel mio Debian Squeeze 64-bit (il mio hardware desktop ). Le esecuzioni successive danno risultati piuttosto diversi.

Le conclusioni dal punto di vista delle prestazioni sono semplici:

• Vai con per loop (avanti) e prova usando !==invece di <.
• Se non è necessario riutilizzare l'array in un secondo momento, shift()è efficace anche il loop su lunghezza ridotta e l' array distruttivo .

tl; dr

Al giorno d'oggi (2011.10) il modello sotto sembra essere il più veloce.

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

Tieni presente che la memorizzazione nella cache arr.lengthnon è cruciale qui, quindi puoi solo testare i !== arr.lengthe le prestazioni non diminuiranno, ma otterrai un codice più breve.

PS: So che in snippet con il shift()suo risultato potrebbe essere usato invece di accedere allo 0 ° elemento, ma in qualche modo l'ho trascurato dopo aver riutilizzato la revisione precedente (che aveva errori durante i loop), e in seguito non volevo perdere risultati già ottenuti.

"Il migliore" come nelle prestazioni pure? o prestazioni E leggibilità?

La prestazione "migliore" è questa, che utilizza una cache e l'operatore prefisso ++ (i miei dati: http://jsperf.com/caching-array-length/189 )

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

Direi che il for-loop senza cache è il miglior equilibrio tra tempo di esecuzione e tempo di lettura del programmatore. Ogni programmatore che ha iniziato con C / C ++ / Java non sprecherà un ms dovendo leggere questo

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

** memorizza nella cache la lunghezza dell'array all'interno del loop, alcuni secondi di tempo verranno elusi. Dipende dagli elementi nell'array se ci sono più elementi nell'array c'è una grande differenza rispetto al tempo *

**

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***

**

Questo sembra essere di gran lunga il modo più veloce ...

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

Tieni presente che ciò consumerà l'array, lo mangerà e non lascerà nulla ...

È l'anno 2017 .

Ho fatto alcuni test.

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

Sembra che il whilemetodo sia il più veloce su Chrome.

Sembra che il decremento sinistra ( --i) è molto più veloce rispetto agli altri ( ++i, i--,i++ ) su Firefox.

Questo approccio è in media il digiuno. Ma itera l'array in ordine inverso.

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

Se l'ordine di inoltro è importante, utilizzare questo approccio.

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

Scrivo sempre nel primo stile.

Anche se un compilatore è abbastanza intelligente da ottimizzarlo per le matrici, ma è comunque intelligente se stiamo usando DOMNodeList qui o qualche oggetto complicato con lunghezza calcolata?

So qual è la domanda sugli array, ma penso che sia una buona pratica scrivere tutti i tuoi loop in un unico stile.

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

i ++ è più veloce di ++ i, --i e i--

Inoltre, puoi salvare l'ultima riga facendo arr [i ++] l'ultima volta che devi accedere a i (ma può essere difficile eseguire il debug).

Puoi provarlo qui (con altri test di loop): http://jsperf.com/for-vs-whilepop/5

A partire da settembre 2017 questi test jsperf mostrano che il modello seguente è il più performante su Chrome 60:

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

Qualcuno è in grado di riprodurre?

Ho provato alcuni altri modi per eseguire l'iterazione di un array enorme e ho scoperto che dimezzare la lunghezza dell'array e iterare entrambe le metà in un singolo loop è più veloce. Questa differenza di prestazioni può essere vista durante l'elaborazione di array di grandi dimensioni .

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

Qualche confronto delle prestazioni (usando timer.js) tra la lunghezza memorizzata nella cache per il ciclo VS il metodo sopra.

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

Un altro test su jsperf.com: http://jsperf.com/while-reverse-vs-for-cached-length

Il ciclo while inverso sembra essere il più veloce. L'unico problema è che while (--i) si fermerà a 0. Come posso quindi accedere all'array [0] nel mio loop?

Un ciclo while di base è spesso il più veloce. jsperf.com è un ottimo sandbox per testare questi tipi di concetti.

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

Mentre il ciclo è un po 'più veloce rispetto al ciclo.

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

Usa invece il ciclo while

L'approccio più veloce è il tradizionale ciclo. Ecco un confronto delle prestazioni più completo.

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

La soluzione più elegante che conosco è usare la mappa.

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

Prova questo:

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

Il modo più rapido per eseguire il loop in un array è utilizzare il filtro. Il metodo filter () crea un nuovo array con tutti gli elementi che superano il test implementato dalla funzione fornita.

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

Dalla mia esperienza, preferisco sempre filtri, mappe ecc.

Dal 2019 WebWorker è diventato più popolare, per set di dati di grandi dimensioni, possiamo utilizzare WebWorker per elaborare molto più rapidamente utilizzando pienamente i processori multi-core.

Abbiamo anche Parallel.js che rende WebWorker molto più facile da usare per l'elaborazione dei dati.