JavaScript dla… w porównaniu z

Czy uważasz, że istnieje duża różnica w ... pętlach i pętlach? Jakiego rodzaju „dla” wolisz używać i dlaczego?

Powiedzmy, że mamy tablicę tablic asocjacyjnych:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

Możemy więc iterować:

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

I:

for (var i in myArray)

Nie widzę dużej różnicy. Czy są jakieś problemy z wydajnością?

Wybór powinien opierać się na tym, który idiom jest najlepiej rozumiany.

Tablica jest iterowana przy użyciu:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

Obiekt używany jako tablica asocjacyjna jest iterowany przy użyciu:

for (var key in o)
  //do stuff with o[key]

Jeśli nie masz powodów do zniszczenia ziemi, trzymaj się ustalonego wzorca użytkowania.

Douglas Crockford zaleca w JavaScript: The Good Parts (strona 24), aby uniknąć używania for ininstrukcji.

Jeśli użyjesz for indo zapętlenia nazw właściwości w obiekcie, wyniki nie zostaną uporządkowane. Gorzej: Możesz uzyskać nieoczekiwane wyniki; obejmuje elementy odziedziczone z łańcucha prototypów i nazwę metod.

Wszystko oprócz właściwości można odfiltrować .hasOwnProperty. Ten przykładowy kod robi to, co prawdopodobnie pierwotnie chciałeś:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI - Użytkownicy jQuery

each(callback)Metoda jQuery for( ; ; )domyślnie używa pętli i będzie używana for( in ) tylko, jeśli długość wynosiundefined .

Dlatego powiedziałbym, że korzystanie z tej funkcji jest bezpieczne.

Przykład :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

Minusem korzystania z tego jest to, że jeśli robisz logikę inną niż interfejs użytkownika, twoje funkcje będą mniej przenośne dla innych platform. Theeach()Funkcja jest prawdopodobnie najlepiej zarezerwowane do użytku z selektorów jQuery i for( ; ; )może być wskazane inaczej.

różnice w wydajności zależą od rodzaju używanej pętli i przeglądarki.

Na przykład:

for (var i = myArray.length-1; i >= 0; i--)

jest prawie dwa razy szybszy w niektórych przeglądarkach niż:

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

Jednakże, chyba że twoje tablice są OGROMNE lub nie zapętlasz ich ciągle, wszystkie są wystarczająco szybkie. Poważnie wątpię, że zapętlenie tablicy jest wąskim gardłem w twoim projekcie (lub w każdym innym projekcie w tym zakresie)

Zauważ, że natywna metoda Array.forEach jest obecnie szeroko obsługiwana .

Zaktualizowana odpowiedź dla bieżącej wersji wszystkich głównych przeglądarek 2012 - Chrome, Firefox, IE9, Safari i Opera obsługują natywną tablicę ES5. Dla każdego.

O ile nie masz żadnego powodu, aby natywnie obsługiwać IE8 (pamiętając, że użytkownicy mogą zapewnić ES5-shim lub ramkę Chrome, co zapewni odpowiednie środowisko JS), czystsze jest użycie właściwej składni języka:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

Pełna dokumentacja dla array.forEach () znajduje się w MDN.

Obie nie są takie same, gdy tablica jest rzadka.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

Użycie forEach do pominięcia łańcucha prototypów

Wystarczy szybki dodatek do powyższej odpowiedzi @ nailer , użycie forEach z Object.keys oznacza, że ​​możesz uniknąć iteracji w łańcuchu prototypów bez konieczności używania hasOwnProperty.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

Druga opinia, że ​​powinieneś wybrać metodę iteracji zgodnie z twoimi potrzebami. Proponuję ci rzeczywiście nie do historii pętli poprzez rodem Arrayz for inkonstrukcji. Jest znacznie wolniejszy i , jak wskazał przed chwilą Chase Seibert, nie jest zgodny z frameworkiem Prototype.

Jest doskonały punkt odniesienia dla różnych stylów zapętlenia, na który absolutnie powinieneś się przyjrzeć, jeśli pracujesz z JavaScript . Nie rób wczesnych optymalizacji, ale powinieneś trzymać to gdzieś z tyłu głowy.

Użyłbym, for inaby uzyskać wszystkie właściwości obiektu, co jest szczególnie przydatne podczas debugowania twoich skryptów. Na przykład, lubię mieć tę linię pod ręką, kiedy eksploruję nieznany obiekt:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

Zrzuca zawartość całego obiektu (wraz z ciałami metod) do mojego dziennika Firebug. Bardzo przydatny.

oto coś, co zrobiłem.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

tak byś go użył to
zadziała na tablicach i obiektach (takich jak lista elementów HTML)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Właśnie to zrobiłem, więc jestem otwarty na sugestie :)

Używałbym różnych metod opartych na tym, jak chciałem odwoływać się do przedmiotów.

Użyj foreach, jeśli chcesz tylko bieżący element.

Użyj, jeśli potrzebujesz indeksatora do porównań względnych. (Tj. Jak to porównać do poprzedniego / następnego elementu?)

Nigdy nie zauważyłem różnicy w wydajności. Zaczęłam się martwić, dopóki nie będę mieć problemu z wydajnością.

Za pomocą for (var i w myArray) możesz także zapętlać obiekty, ja będę zawierał nazwę klucza i możesz uzyskać dostęp do właściwości za pośrednictwem myArray [i] . Dodatkowo, wszelkie metody zostaną dodane do obiektu zostaną uwzględnione w pętli, zbyt, to znaczy, jeśli użyć dowolnego ramy zewnętrznej jak jQuery lub prototyp, lub jeśli dodać metod do prototypów obiektu bezpośrednio, w pewnym momencie i będzie wskazywać na te metody.

Uważaj!

Jeśli masz kilka znaczników skryptu i szukasz na przykład informacji w atrybutach znacznika, musisz użyć właściwości .length z pętlą for, ponieważ nie jest to prosta tablica, ale obiekt HTMLCollection.

https://developer.mozilla.org/en/DOM/HTMLCollection

Jeśli użyjesz instrukcji foreach dla (var i na twojej liście), zwróci ona właściwości i metody HTMLCollection w większości przeglądarek!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

Nawet jeśli getElementsByTagName powinien zwrócić NodeList, większość przeglądarek zwraca HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Bo w pętlach na tablicach nie jest kompatybilny z Prototype. Jeśli uważasz, że w przyszłości będziesz musiał użyć tej biblioteki, warto trzymać się pętli.

http://www.prototypejs.org/api/array

Widziałem problemy z „dla każdego” przy użyciu obiektów, prototypów i tablic

rozumiem, że dla każdego dotyczy właściwości obiektów, a NIE tablic

Jeśli naprawdę chcesz przyspieszyć swój kod, co powiesz na to?

for( var i=0,j=null; j=array[i++]; foo(j) );

jest to rodzaj logiki while w instrukcji for i jest mniej zbędny. Również Firefox ma Array.forEach i Array.filter

Krótszy i najlepszy kod według jsperf to

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Użyj pętli Array (). ForEach, aby skorzystać z równoległości

dla (;;) jest dla tablic : [20,55,33]

for..in jest dla Objects : {x: 20, y: 55: z: 33}

Bądź ostrożny!!! Używam Chrome 22.0 w Mac OS i mam problem z każdą składnią.

Nie wiem, czy jest to problem z przeglądarką, problem z javascript lub jakiś błąd w kodzie, ale jest to BARDZO dziwne. Na zewnątrz obiektu działa idealnie.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

Istnieje ważna różnica między nimi. Funkcja for-in iteruje właściwości obiektu, więc gdy przypadek jest tablicą, będzie iterował nie tylko swoje elementy, ale także funkcję „usuń”, którą posiada.

for (var i = 0; i < myArray.length; i++) { 
    console.log(i) 
}

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

Możesz użyć for-in z if(myArray.hasOwnProperty(i)). Mimo to, podczas iteracji po tablicach zawsze wolę tego unikać i po prostu używam instrukcji for (;;).

Chociaż oba są bardzo do siebie podobne, istnieje niewielka różnica:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

w tym przypadku wynikiem jest:

STANDARD DLA PĘTLI:

Tablica [0] = A

Tablica [1] = B

Tablica [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

podczas gdy w tym przypadku wynikiem jest:

PĘTLA DOSTĘPNA:

Tablica [1] = B

Tablica [2] = C

Tablica [10] = D

Tablica [ABC] = 123

Instrukcja for in pozwala na przeglądanie nazw wszystkich właściwości obiektu. Niestety, zapętla również wszystkie elementy odziedziczone przez łańcuch prototypów. Ma to zły efekt uboczny polegający na udostępnianiu funkcji metod, gdy zainteresowanie dotyczy elementów danych.