Jaki jest najszybszy sposób na przeglądanie tablicy w JavaScript?

Nauczyłem się z książek, które powinieneś pisać dla pętli w ten sposób ：

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

więc arr.lengthnie będzie to obliczane za każdym razem.

Inni twierdzą, że kompilator dokona optymalizacji, więc możesz po prostu napisać:

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

Chcę tylko wiedzieć, który jest najlepszy sposób w praktyce?

Po wykonaniu tego testu w większości nowoczesnych przeglądarek ...

http://jsben.ch/dyM52

Obecnie najszybsza forma pętli (i moim zdaniem najbardziej syntaktycznie oczywista).

standard pętli z buforowaniem długości

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

}

Powiedziałbym, że to zdecydowanie przypadek, w którym pochwalam programistów silnika JavaScript. Czas pracy powinien być zoptymalizowany dla jasności , a nie sprytu .

Absolutnie najszybszym sposobem na przejście przez tablicę javascript jest:

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

Zobacz pełne porównanie na http://blogs.oracle.com/greimer/entry/best_way_to_code_a

Począwszy od czerwca 2016 r. , Przeprowadzając niektóre testy w najnowszym Chrome (71% rynku przeglądarek w maju 2016 r. I stale rośnie):

• Najszybsza pętla to pętla „for” , zarówno z buforowaniem, jak i bez buforowania, co zapewnia naprawdę podobną wydajność. (Pętla for z buforowaną długością czasami dawała lepsze wyniki niż ta bez buforowania, ale różnica jest prawie znikoma, co oznacza, że ​​silnik może być już zoptymalizowany, aby faworyzować standard i prawdopodobnie najprostszy dla pętli bez buforowania).
• Pętla while ze spadkami była około 1,5 razy wolniejsza niż pętla for.
• Pętla korzystająca z funkcji zwrotnej (podobnie jak standardowa forEach) była około 10 razy wolniejsza niż pętla for.

Wierzę, że ten wątek jest za stary i programiści wprowadzają w błąd, myśląc, że muszą buforować długość lub używać odwrotnych przejść z dekrementami w celu uzyskania lepszej wydajności, pisząc kod, który jest mniej czytelny i bardziej podatny na błędy niż prosta prosta pętla for. Dlatego polecam:

• Jeśli aplikacja iteruje wiele elementów lub kod pętli znajduje się w często używanej funkcji, bezpośrednią odpowiedzią dla pętli jest odpowiedź:

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

• Jeśli twoja aplikacja tak naprawdę nie wykonuje iteracji przez wiele elementów lub po prostu musisz wykonywać małe iteracje tu i tam, użycie standardowego wywołania zwrotnego forEach lub dowolnej podobnej funkcji z wybranej biblioteki JS może być bardziej zrozumiałe i mniej podatne na błędy, ponieważ zakres zmiennej indeksu jest zamknięty i nie trzeba używać nawiasów, uzyskując bezpośredni dostęp do wartości tablicy:

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

• Jeśli naprawdę potrzebujesz zarysować kilka milisekund podczas iteracji ponad miliardów wierszy, a długość tablicy nie zmienia się w trakcie procesu, możesz rozważyć buforowanie długości w pętli for. Chociaż myślę, że obecnie nie jest to naprawdę konieczne:

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

Jeśli zamówienie nie jest ważne, wolę ten styl:

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

Buforuje długość i jest znacznie krótszy do napisania. Ale będzie iterować po tablicy w odwrotnej kolejności.

To tylko 2018, więc aktualizacja może być przyjemna ...

I naprawdę muszę się nie zgodzić z przyjętą odpowiedzią . Odracza się w różnych przeglądarkach. niektóre robią forEachszybciej, niektóre for-loop, a niektóre while są testem porównawczym dla wszystkich metod http://jsben.ch/mW36e

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

a ponieważ można zobaczyć wiele for-loop, for(a = 0; ... )warto wtedy wspomnieć, że bez zmiennych zmienne będą definiowane globalnie, co może dramatycznie wpłynąć na szybkość, więc będzie wolniej.

Urządzenie Duffa działa szybciej w operze, ale nie w Firefoxie

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 Whilepowraca

Po prostu myśl logicznie.

Spójrz na to

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

 //do stuff

}

1. Musisz utworzyć co najmniej 2 zmienne (indeks, długość)
2. Musisz sprawdzić, czy indeks jest mniejszy niż długość
3. Musisz zwiększyć indeks
4. forpętla 3 parametry

Powiedz mi teraz, dlaczego powinno to być szybsze niż:

var length = array.length;

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

 //do stuff

}

1. Jedna zmienna
2. Brak czeków
3. indeks jest zmniejszony (maszyny wolą)
4. while ma tylko jeden parametr

Byłem całkowicie zdezorientowany, gdy Chrome 28 pokazał, że pętla for jest szybsza niż w tym czasie. To musi mieć ben

„Uh, wszyscy używają pętli for, skupmy się na tym podczas programowania dla chrome”.

Ale teraz, w 2014 r., Pętla while wraca do Chrome. jest 2 razy szybszy, w innych / starszych przeglądarkach zawsze był szybszy.

Ostatnio zrobiłem kilka nowych testów. Teraz, w środowisku rzeczywistym, te krótkie kody są nic nie warte, a jsperf nie może właściwie wykonać poprawnie pętli while, ponieważ musi odtworzyć długość tablicy. Zajmuje to również trochę czasu.

nie możesz uzyskać rzeczywistej prędkości pętli while na jsperf.

musisz stworzyć własną funkcję niestandardową i sprawdzić to za pomocą window.performance.now()

I tak ... nie ma mowy, żeby pętla while była po prostu szybsza.

Prawdziwym problemem jest tak naprawdę manipulacja domem / czas renderowania / czas rysowania lub jakkolwiek chcesz to nazwać.

Na przykład mam scenę płótna, w której muszę obliczyć współrzędne i kolizje ... odbywa się to między 10-200 mikrosekund (nie w milisekundach). tak naprawdę renderowanie wszystkiego zajmuje kilka milisekund. Tak samo jak w DOM.

ALE

Istnieje inny bardzo wydajny sposób, loopw niektórych przypadkach użycie for ... na przykład do kopiowania / klonowania tablicy

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

Zwróć uwagę na ustawienie parametrów:

1. Tak samo, jak w pętli while, używam tylko jednej zmiennej
2. Musisz sprawdzić, czy indeks jest większy niż 0;
3. Jak widać, to podejście jest inne niż normalne dla pętli, której wszyscy używają, ponieważ robię rzeczy wewnątrz trzeciego parametru i również zmniejszam bezpośrednio w tablicy.

Powiedział to, że potwierdza to, że maszyny takie jak -

pisząc, że chciałem zrobić to trochę krócej i usunąć trochę niepotrzebnych rzeczy i napisałem ten w tym samym stylu:

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

Nawet jeśli jest krótszy, wygląda na to, że użycie jeszcze ijednego czasu wszystko spowalnia. Jest o 1/5 wolniejszy niż poprzednia fori whilepierwsza pętla .

Uwaga:; jest bardzo ważne po za looo bez{}

Nawet jeśli właśnie powiedziałem, że jsperf nie jest najlepszym sposobem testowania skryptów .. dodałem tutaj 2 pętle

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

A oto kolejna odpowiedź na temat wydajności w javascript

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

Ta odpowiedź ma pokazać skuteczne sposoby pisania javascript. Więc jeśli nie możesz tego przeczytać, zapytaj, a otrzymasz odpowiedź lub książkę o javascript http://www.ecma-international.org/ecma-262/5.1/

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

Najnowsza wersja testu, którą przygotowałem (wykorzystując ponownie starszą), pokazuje jedną rzecz.

Długość buforowania nie jest tak ważna, ale nie szkodzi.

Każde pierwsze uruchomienie powyższego testu (na świeżo otwartej karcie) daje najlepsze wyniki dla 4 ostatnich fragmentów (3, 5, 7 i 10 na wykresach) w Chrome, Opera i Firefox w moim Debian Squeeze 64-bitowym ( mój komputer stacjonarny) ). Kolejne przebiegi dają całkiem inny wynik.

Wnioski dotyczące wydajności są proste:

• Przejdź do pętli for (forward) i przetestuj za pomocą !==zamiast <.
• Jeśli nie będziesz musiał ponownie używać tablicy później, to podczas gdy pętla na zmniejszonej długości i shift()tablica niszcząca jest również wydajna.

tl; dr

Obecnie (2011.10) poniższy wzór wydaje się najszybszy.

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

Pamiętaj, że buforowanie arr.lengthnie jest tutaj kluczowe, więc możesz po prostu sprawdzić, i !== arr.lengthczy wydajność nie spadnie, ale otrzymasz krótszy kod.

PS: Wiem, że we fragmencie z shift()jego wynikiem można było użyć zamiast dostępu do 0-tego elementu, ale jakoś przeoczyłem to po ponownym użyciu poprzedniej wersji (która miała błędne pętle while), a później nie chciałem stracić już uzyskanych wyników.

„Najlepszy” jak w czystej wydajności? lub wydajność ORAZ czytelność?

„Najlepsza” czysta wydajność to ta, która wykorzystuje pamięć podręczną i operator prefiksu ++ (moje dane: http://jsperf.com/caching-array-length/189 )

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

Twierdziłbym, że pętla for bez pamięci podręcznej zapewnia najlepszą równowagę między czasem wykonania a czasem odczytu programisty. Każdy programista, który zaczął od C / C ++ / Java, nie zmarnuje ms na przeczytanie tego

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

** buforuj długość tablicy w pętli, uniknie się kilku sekund. Zależy od elementów w tablicy, jeśli jest więcej elementów w tablicy, istnieje znacząca różnica w odniesieniu do Ms *

**

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

**

To zdecydowanie najszybszy sposób ...

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

Weź pod uwagę, że spowoduje to zużycie tablicy, zjedzenie jej i pozostawienie niczego ...

To rok 2017 .

Zrobiłem kilka testów.

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

Wygląda na to, że whilemetoda jest najszybsza w Chrome.

Wygląda lewej zmniejszania ( --i) jest znacznie szybciej niż inni ( ++i, i--, i++) na Firefox.

Takie podejście jest średnio na czczo. Ale iteruje tablicę w odwrotnej kolejności.

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

Jeśli ważne jest zlecenie forward, skorzystaj z tego podejścia.

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

Zawsze piszę w pierwszym stylu.

Nawet jeśli kompilator jest wystarczająco inteligentny, aby zoptymalizować go pod kątem tablic, ale nadal jest inteligentny, jeśli używamy tutaj DOMNodeList lub jakiegoś skomplikowanego obiektu o obliczonej długości?

Wiem, jakie jest pytanie o tablice, ale myślę, że dobrą praktyką jest pisanie wszystkich pętli w jednym stylu.

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

i ++ jest szybszy niż ++ i, --i i i--

Możesz także zapisać ostatnią linię, wykonując arr [i ++], kiedy ostatni raz potrzebujesz dostępu do i (ale może to być trudne do debugowania).

Możesz to przetestować tutaj (z innymi testami pętli): http://jsperf.com/for-vs-whilepop/5

We wrześniu 2017 r. Te testy jsperf pokazują następujący wzorzec, który jest najbardziej wydajny w Chrome 60:

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

Czy ktoś może się rozmnażać?

Próbowałem innych sposobów na iterację ogromnej tablicy i odkryłem, że zmniejszenie o połowę długości tablicy, a następnie iteracja obu połówek w jednej pętli jest szybsze. Tę różnicę wydajności można zobaczyć podczas przetwarzania ogromnych tablic .

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

Pewne porównanie wydajności (przy użyciu timer.js) między buforowaną długością pętli for VS a powyższą metodą.

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

Kolejny test jsperf.com: http://jsperf.com/while-reverse-vs-for-cached-length

Pętla rewersyjna wydaje się być najszybsza. Jedynym problemem jest to, że podczas gdy (--i) zatrzyma się na 0. Jak mogę wtedy uzyskać dostęp do tablicy [0] w mojej pętli?

Podstawowa pętla while jest często najszybsza. jsperf.com to świetna piaskownica do testowania tego rodzaju koncepcji.

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

Podczas gdy pętla jest nieco szybsza niż dla pętli.

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

Zamiast tego użyj pętli while

Najszybsze podejście to tradycyjna pętla. Oto bardziej wszechstronne porównanie wydajności.

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

Najbardziej eleganckim rozwiązaniem, jakie znam, jest użycie mapy.

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

Spróbuj tego:

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

Szybszym sposobem zapętlenia tablicy jest użycie filtra. Metoda filter () tworzy nową tablicę ze wszystkimi elementami, które pomyślnie przejdą test zaimplementowany przez podaną funkcję.

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

Z mojego doświadczenia zawsze wolę filtry, mapę itp.

Począwszy od 2019 roku WebWorker stał się bardziej popularny, w przypadku dużych zestawów danych możemy używać WebWorker do przetwarzania znacznie szybciej dzięki pełnemu wykorzystaniu procesorów wielordzeniowych.

Mamy również plik Parallel.js, dzięki któremu WebWorker jest znacznie łatwiejszy w użyciu do przetwarzania danych.