JavaScript per ... in vs per

Pensi che ci sia una grande differenza in per ... in e per i loop? Che tipo di "per" preferisci usare e perché?

Diciamo che abbiamo una serie di array associativi:

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

Quindi possiamo iterare:

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

E:

for (var i in myArray)

Non vedo una grande differenza. Ci sono problemi di prestazioni?

La scelta dovrebbe basarsi su quale linguaggio sia meglio compreso.

Un array viene ripetuto usando:

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

Un oggetto utilizzato come un array associativo viene ripetuto usando:

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

A meno che tu non abbia ragioni sconvolgenti per la terra, segui il modello di utilizzo stabilito.

Douglas Crockford raccomanda in JavaScript: le parti buone (pagina 24) per evitare di usare la for indichiarazione.

Se si utilizza for inper scorrere i nomi delle proprietà in un oggetto, i risultati non vengono ordinati. Peggio ancora: potresti ottenere risultati inaspettati; include membri ereditati dalla catena di prototipi e il nome dei metodi.

Tutto tranne le proprietà possono essere filtrati con .hasOwnProperty. Questo esempio di codice fa quello che probabilmente desideravi inizialmente:

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

Cordiali saluti - Utenti jQuery

Il each(callback)metodo di jQuery utilizza il for( ; ; )loop per impostazione predefinita e verrà utilizzato for( in ) solo se la lunghezza è undefined.

Pertanto, direi che è sicuro assumere l'ordine corretto quando si utilizza questa funzione.

Esempio :

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

L'aspetto negativo di questo è che se stai facendo una logica non UI, le tue funzioni saranno meno portabili su altri framework. La each()funzione è probabilmente meglio riservata all'uso con i selettori jQuery e for( ; ; )potrebbe essere consigliabile diversamente.

ci sono differenze di prestazioni a seconda del tipo di loop utilizzato e del browser.

Per esempio:

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

è quasi due volte più veloce su alcuni browser rispetto a:

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

Tuttavia, a meno che i tuoi array non siano ENORMI o non li esegui in loop costantemente, tutti sono abbastanza veloci. Dubito seriamente che il loop array sia un collo di bottiglia nel tuo progetto (o per qualsiasi altro progetto per quella materia)

Si noti che il metodo Array.forEach nativo è ora ampiamente supportato .

Risposta aggiornata per la versione corrente del 2012 di tutti i principali browser: Chrome, Firefox, IE9, Safari e Opera supportano l'array nativo di ES5.

A meno che tu non abbia qualche motivo per supportare IE8 in modo nativo (tenendo presente che a questi utenti possono essere forniti shim ES5 o Chrome frame, che forniranno un ambiente JS adeguato), è più semplice utilizzare semplicemente la sintassi corretta della lingua:

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

La documentazione completa per array.forEach () è in MDN.

I due non sono gli stessi quando l'array è scarso.

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.
}

Usare forEach per saltare la catena di prototipi

Solo un breve addendum alla risposta di @ nailer sopra , l'uso di forEach con Object.keys significa che puoi evitare l'iterazione sulla catena di prototipi senza dover utilizzare 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]);
});

In secondo luogo, dovresti scegliere il metodo di iterazione in base alle tue esigenze. Vorrei suggerire che in realtà non eseguire mai il looping nativo Arraycon for instruttura. È molto più lento e , come sottolineato da Chase Seibert al momento, non è compatibile con il framework Prototype.

Esiste un eccellente benchmark su diversi stili di loop che dovresti assolutamente dare un'occhiata se lavori con JavaScript . Non fare ottimizzazioni anticipate, ma dovresti tenere quelle cose da qualche parte nella parte posteriore della tua testa.

Vorrei usare for inper ottenere tutte le proprietà di un oggetto, che è particolarmente utile quando si esegue il debug degli script. Ad esempio, mi piace avere questa riga a portata di mano quando esploro oggetti sconosciuti:

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

Scarica il contenuto dell'intero oggetto (insieme ai corpi del metodo) nel mio registro Firebug. Molto utile.

ecco qualcosa che ho fatto.

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

ecco come lo
useresti, funzionerà su array e oggetti (come un elenco di elementi 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';
  }
});

Ho appena fatto questo, quindi sono aperto a suggerimenti :)

Userei i diversi metodi in base al modo in cui volevo fare riferimento agli articoli.

Usa foreach se vuoi solo l'oggetto corrente.

Utilizzare per se è necessario un indicizzatore per eseguire confronti relativi. (Cioè come si confronta con l'elemento precedente / successivo?)

Non ho mai notato una differenza di prestazioni. Aspetterei di avere un problema di prestazioni prima di preoccuparmene.

Con for (var i in myArray) è possibile ciclare su oggetti troppo, i conterrà il nome della chiave ed è possibile accedere alla proprietà tramite myArray [i] . Additionaly, i metodi avrete aggiunto all'oggetto saranno inclusi nel ciclo, anche, per esempio, se si utilizza qualsiasi quadro esterno come jQuery o di un prototipo, o se si aggiungono i metodi per prototipi degli oggetti direttamente, ad un certo punto mi farò puntare a quei metodi.

Attento!

Se hai diversi tag di script e stai cercando informazioni negli attributi dei tag, ad esempio, devi usare la proprietà .length con un ciclo for perché non è un array semplice ma un oggetto HTMLCollection.

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

Se usi l'istruzione foreach per (var i in yourList), nella maggior parte dei browser verranno restituiti proterties e metodi di HTMLCollection!

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!

Anche se getElementsByTagName deve restituire un NodeList, la maggior parte dei browser restituisce un HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Perché i loop in array non sono compatibili con Prototype. Se pensi di dover utilizzare quella libreria in futuro, sarebbe logico attenersi ai loop.

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

Ho riscontrato problemi con "per ciascuno" utilizzando oggetti, prototipi e array

la mia comprensione è che il per ciascuno è per proprietà di oggetti e NON matrici

Se vuoi davvero velocizzare il tuo codice, che ne pensi?

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

è una specie di logica while all'interno dell'istruzione for ed è meno ridondante. Anche Firefox ha Array.forEach e Array.filter

Un codice più breve e migliore secondo jsperf è

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

Utilizzare il ciclo Array (). ForEach per sfruttare il parallelismo

per (;;) è per array : [20,55,33]

for..in è per Oggetti : {x: 20, y: 55: z: 33}

Stai attento!!! Sto usando Chrome 22.0 in Mac OS e sto riscontrando problemi con la sintassi per ciascuna.

Non so se questo è un problema del browser, un problema javascript o qualche errore nel codice, ma è MOLTO strano. Al di fuori dell'oggetto funziona perfettamente.

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

C'è una differenza importante tra entrambi. Il for-in scorre le proprietà di un oggetto, quindi quando il case è un array, non solo itererà sui suoi elementi ma anche sulla funzione "rimuovi" che ha.

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

È possibile utilizzare il for-in con un if(myArray.hasOwnProperty(i)). Tuttavia, quando si scorre su array, preferisco sempre evitarlo e usare semplicemente l'istruzione for (;;).

Sebbene entrambi siano molto simili c'è una differenza minore:

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
}

in questo caso l'output è:

STANDARD PER LOOP:

ARRAY [0] = A

ARRAY [1] = B

ARRAY [2] = C

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

mentre in questo caso l'output è:

LOOP FOR-IN:

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

L'istruzione for consente di scorrere ciclicamente i nomi di tutte le proprietà di un oggetto. Sfortunatamente, scorre anche attraverso tutti i membri che sono stati ereditati attraverso la catena di prototipi. Ciò ha il cattivo effetto collaterale di servire le funzioni del metodo quando l'interesse è nei membri dei dati.