Quel est le moyen le plus rapide de parcourir un tableau en JavaScript?

J'ai appris des livres que vous devriez écrire pour une boucle comme celle-ci:

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

donc le arr.lengthne sera pas calculé à chaque fois.

D'autres disent que le compilateur optimisera cela, vous pouvez donc simplement écrire:

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

Je veux juste savoir quelle est la meilleure façon de pratiquer?

Après avoir effectué ce test avec la plupart des navigateurs modernes ...

http://jsben.ch/dyM52

Actuellement , la forme de boucle la plus rapide (et à mon avis la plus syntaxiquement évidente).

une norme pour la boucle avec la mise en cache de la longueur

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

}

Je dirais que c'est certainement un cas où j'applaudis les développeurs de moteurs JavaScript. Un temps d'exécution doit être optimisé pour plus de clarté , pas d'intelligence .

Le moyen le plus rapide absolu de parcourir un tableau javascript est:

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

Voir http://blogs.oracle.com/greimer/entry/best_way_to_code_a pour une comparaison complète

En juin 2016 , faire des tests dans le dernier Chrome (71% du marché des navigateurs en mai 2016 et en augmentation):

• La boucle la plus rapide est une boucle for , avec et sans longueur de mise en cache, offrant des performances vraiment similaires. (La boucle for avec une longueur en cache a parfois donné de meilleurs résultats que celle sans mise en cache, mais la différence est presque négligeable, ce qui signifie que le moteur peut déjà être optimisé pour favoriser la boucle standard et probablement la plus simple pour la boucle sans mise en cache).
• La boucle while avec décrémentations était environ 1,5 fois plus lente que la boucle for.
• Une boucle utilisant une fonction de rappel (comme la norme forEach), était environ 10 fois plus lente que la boucle for.

Je pense que ce fil est trop ancien et qu'il est trompeur pour les programmeurs de penser qu'ils doivent mettre en cache la longueur, ou utiliser des whiles à travers inverse avec des décrémentations pour obtenir de meilleures performances, en écrivant du code moins lisible et plus sujet aux erreurs qu'un simple simple pour la boucle. Par conséquent, je recommande:

• Si votre application parcourt de nombreux éléments ou si votre code de boucle se trouve dans une fonction souvent utilisée, une boucle simple pour la réponse est la réponse:

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

• Si votre application ne parcourt pas vraiment beaucoup d'éléments ou si vous avez juste besoin de faire de petites itérations ici et là, l'utilisation du rappel standard forEach ou de toute fonction similaire de la bibliothèque JS de votre choix pourrait être plus compréhensible et moins sujette aux erreurs, car la portée de la variable d'index est fermée et vous n'avez pas besoin d'utiliser de crochets, pour accéder directement à la valeur du tableau:

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

• Si vous avez vraiment besoin de gratter quelques millisecondes tout en itérant sur des milliards de lignes et que la longueur de votre tableau ne change pas au cours du processus, vous pouvez envisager de mettre en cache la longueur dans votre boucle for. Bien que je pense que ce n'est vraiment pas nécessaire de nos jours:

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

Si la commande n'est pas importante, je préfère ce style:

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

Il met en cache la longueur et est beaucoup plus court à écrire. Mais il parcourra le tableau dans l'ordre inverse.

C'est juste 2018 donc une mise à jour pourrait être sympa ...

Et je dois vraiment être en désaccord avec la réponse acceptée . Il diffère sur différents navigateurs. certains font forEachplus vite, certains for-loop, et certains while voici une référence sur toutes les méthodes http://jsben.ch/mW36e

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

et puisque vous pouvez voir beaucoup de for-loop comme for(a = 0; ... )alors vaut la peine de mentionner que sans les variables "var" seront définies globalement et cela peut considérablement affecter la vitesse, donc ça va ralentir.

L'appareil de Duff fonctionne plus rapidement sur l'opéra mais pas sur 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 Whileest de retour

Pensez simplement logique.

Regarde ça

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

 //do stuff

}

1. Besoin de créer au moins 2 variables (index, longueur)
2. Besoin de vérifier si l'indice est plus petit que la longueur
3. Besoin d'augmenter l'indice
4. la forboucle a 3 paramètres

Maintenant, dites-moi pourquoi cela devrait être plus rapide que:

var length = array.length;

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

 //do stuff

}

1. Une variable
2. Pas de chèques
3. l'indice est diminué (les machines préfèrent cela)
4. while n'a qu'un seul paramètre

J'étais totalement confus lorsque Chrome 28 a montré que la boucle for est plus rapide que le temps. Cela doit avoir ben une sorte de

"Euh, tout le monde utilise la boucle for, concentrons-nous sur cela lors du développement pour Chrome."

Mais maintenant, en 2014, la boucle while est de retour sur le chrome. c'est 2 fois plus rapide, sur les autres navigateurs / anciens, c'était toujours plus rapide.

Dernièrement, j'ai fait de nouveaux tests. Maintenant, dans le monde réel, ces codes courts ne valent rien et jsperf ne peut pas réellement exécuter correctement la boucle while, car il doit recréer le array.length, ce qui prend également du temps.

vous ne pouvez pas obtenir la vitesse réelle d'une boucle while sur jsperf.

vous devez créer votre propre fonction personnalisée et vérifier cela avec window.performance.now()

Et oui ... il n'y a aucun moyen que la boucle while soit simplement plus rapide.

Le vrai problème est en fait la manipulation du dom / le temps de rendu / le temps de dessin ou comment vous voulez l'appeler.

Par exemple, j'ai une scène de toile où j'ai besoin de calculer les coordonnées et les collisions ... cela se fait entre 10-200 MicroSecondes (pas millisecondes). il faut en fait plusieurs millisecondes pour tout rendre. Tout comme dans DOM.

MAIS

Il existe une autre manière super performante d'utiliser le for loopdans certains cas ... par exemple pour copier / cloner un tableau

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

Remarquez la configuration des paramètres:

1. Identique à la boucle while, j'utilise une seule variable
2. Besoin de vérifier si l'indice est supérieur à 0;
3. Comme vous pouvez le voir, cette approche est différente de la normale pour la boucle que tout le monde utilise, car je fais des choses à l'intérieur du 3ème paramètre et je diminue également directement à l'intérieur du tableau.

Cela dit, cela confirme que des machines comme le -

en écrivant que je pensais à le raccourcir un peu et à supprimer des trucs inutiles et j'ai écrit celui-ci en utilisant le même style:

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

Même s'il est plus court, il semble que l'utilisation d' iune fois de plus ralentit tout. C'est 1/5 plus lent que la forboucle précédente et celle- whilelà.

Remarque: le ;est très important après le pour looo sans{}

Même si je viens de vous dire que jsperf n'est pas le meilleur moyen de tester des scripts .. j'ai ajouté ces 2 boucles ici

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

Et voici une autre réponse sur les performances en javascript

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

Cette réponse est de montrer des façons d'écrire javascript performantes. Donc, si vous ne pouvez pas lire cela, demandez et vous obtiendrez une réponse ou lirez un livre sur javascript http://www.ecma-international.org/ecma-262/5.1/

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

La dernière révision de test, que j'ai préparée (en réutilisant une ancienne), montre une chose.

La longueur de la mise en cache n'est pas très importante, mais elle ne nuit pas.

Chaque première exécution du test lié ci-dessus (sur l'onglet fraîchement ouvert) donne les meilleurs résultats pour les 4 derniers extraits (3e, 5e, 7e et 10e dans les graphiques) dans Chrome, Opera et Firefox dans mon Debian Squeeze 64 bits ( mon matériel de bureau ). Les exécutions suivantes donnent un résultat assez différent.

Les conclusions en termes de performances sont simples:

• Allez avec pour la boucle (avant) et testez en utilisant !==au lieu de <.
• Si vous n'avez pas à réutiliser le tableau plus tard, alors la boucle while sur la longueur décrémentée et le shift()tableau destructif sont également efficaces.

tl; dr

De nos jours (2011.10), le schéma ci-dessous semble être le plus rapide.

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

Gardez à l'esprit que la mise en cache arr.lengthn'est pas cruciale ici, vous pouvez donc simplement tester i !== arr.lengthet les performances ne chuteront pas, mais vous obtiendrez un code plus court.

PS: Je sais que dans l'extrait de code avec shift()son résultat pourrait être utilisé au lieu d'accéder au 0ème élément, mais j'ai en quelque sorte ignoré cela après avoir réutilisé la révision précédente (qui avait des boucles while incorrectes), et plus tard, je ne voulais pas perdre les résultats déjà obtenus.

"Le meilleur" comme en pure performance? ou performance ET lisibilité?

La meilleure performance pure est celle-ci, qui utilise un cache et l'opérateur de préfixe ++ (mes données: http://jsperf.com/caching-array-length/189 )

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

Je dirais que la boucle for sans cache est le meilleur équilibre entre le temps d'exécution et le temps de lecture du programmeur. Chaque programmeur qui a commencé avec C / C ++ / Java ne perdra pas un ms à lire celui-ci

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

** cache la longueur du tableau à l'intérieur de la boucle, quelques secondes seront éludées. Dépend des éléments dans le tableau s'il y a plus d'éléments dans le tableau, il y a une différence majeure par rapport à Ms de temps *

**

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

**

Cela semble être de loin le moyen le plus rapide ...

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

Tenez compte du fait que cela consommera le tableau, le mangera et ne laissera plus rien ...

C'est l'année 2017 .

J'ai fait quelques tests.

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

Il semble que la whileméthode soit la plus rapide sur Chrome.

On dirait que le décrément gauche ( --i) est beaucoup plus rapide que les autres ( ++i, i--,i++ ) sur Firefox.

Cette approche est le jeûne en moyenne. Mais il itère le tableau dans l'ordre inverse.

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

Si l'ordre à terme est important, utilisez cette approche.

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

J'écris toujours dans le premier style.

Même si un compilateur est assez intelligent pour l'optimiser pour les tableaux, mais quand même intelligent si nous utilisons DOMNodeList ici ou un objet compliqué avec une longueur calculée?

Je sais quelle est la question des tableaux, mais je pense que c'est une bonne pratique d'écrire toutes vos boucles dans un même style.

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

i ++ est plus rapide que ++ i, --i et i--

En outre, vous pouvez enregistrer la dernière ligne en faisant arr [i ++] la dernière fois que vous devez accéder à i (mais cela peut être difficile à déboguer).

Vous pouvez le tester ici (avec d'autres tests de boucle): http://jsperf.com/for-vs-ilstpop/5

En septembre 2017, ces tests jsperf montrent que le modèle suivant est le plus performant sur Chrome 60:

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

Quelqu'un est-il capable de se reproduire?

J'ai essayé d'autres façons d'itérer un énorme tableau et j'ai découvert que la réduction de moitié de la longueur du tableau, puis l'itération des deux moitiés en une seule boucle est plus rapide. Cette différence de performances peut être observée lors du traitement d' énormes tableaux .

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

Comparaison des performances (en utilisant timer.js) entre la longueur en cache pour la boucle VS la méthode ci-dessus.

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

Un autre test jsperf.com: http://jsperf.com/

La boucle inversée while semble être la plus rapide. Le seul problème est que (--i) s'arrêtera à 0. Comment puis-je accéder au tableau [0] dans ma boucle?

Une boucle while de base est souvent la plus rapide. jsperf.com est un excellent bac à sable pour tester ces types de concepts.

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

La boucle while est un peu plus rapide que la boucle.

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

Utilisez la boucle while à la place

L'approche la plus rapide est la boucle for traditionnelle. Voici une comparaison de performances plus complète.

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

La solution la plus élégante que je connaisse est d'utiliser la carte.

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

Essaye ça:

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

Le moyen le plus rapide de boucler dans un tableau consiste à utiliser le filtre. La méthode filter () crée un nouveau tableau avec tous les éléments qui réussissent le test implémenté par la fonction fournie.

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

D'après mon expérience, je préfère toujours les filtres, la carte etc.

Depuis 2019, WebWorker est devenu plus populaire, pour les grands ensembles de données, nous pouvons utiliser WebWorker pour traiter beaucoup plus rapidement en utilisant pleinement des processeurs multicœurs.

Nous avons également Parallel.js qui rend WebWorker beaucoup plus facile à utiliser pour le traitement des données.