JavaScript - Sfumature di myArray.forEach vs abbondanza per ciclo

Question

che ho visto di domande che suggerisco di usare:

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

invece di:

for (var i in myArray){ /* ... */ } 

per gli array, a causa di iterazione incoerente (see here).

---

Tuttavia, non riesco a trovare nulla che sembra preferire l'oggetto ciclo orientato:

myArray.forEach(function(item, index){ /* ... */ }); 

che sembra modo più intuitivo per me.

Per il mio progetto attuale, IE8 compatibilità è importante, e sto pensando di utilizzare Mozilla's polyfill, però io non sono sicuro al 100% di come questo funzionerà.

• Ci sono delle differenze tra lo standard per ciclo (il primo esempio di cui sopra) e l'attuazione Array.prototype.forEach dai browser moderni?
• C'è qualche differenza tra le moderne implementazioni del browser e l'implementazione di Mozilla collegata a sopra (con particolare riguardo a IE8)?
• Le prestazioni non sono un problema, ma solo la coerenza con le proprietà iterate.

Answer 1

La differenza più sostanziale tra la for loop e il metodo forEach è che, con l'ex, si può break fuori dal giro. È possibile simulare continue semplicemente ritornando dalla funzione passata a forEach, ma non è possibile arrestare del tutto il ciclo.

A parte questo, i due realizzano efficacemente la stessa funzionalità. Un'altra piccola differenza riguarda l'ambito dell'indice (e tutte le variabili contenenti) nel ciclo for, a causa del sollevamento variabile.

// 'i' is scoped to the containing function 
for (var i = 0; i < arr.length; i++) { ... } 

// 'i' is scoped to the internal function 
arr.forEach(function (el, i) { ... }); 

Tuttavia, trovo che forEach è molto più espressivo-che rappresenta l'intenzione di scorrere ogni elemento di un array, e fornisce un riferimento all'elemento, non solo l'indice. Nel complesso, si tratta principalmente di gusti personali, ma se è possibile utilizzare forEach, si consiglia di utilizzarlo.

---

ci sono un paio di differenze sostanziali tra le due versioni, in particolare per quanto riguarda le prestazioni. In effetti, il ciclo for semplice ha prestazioni notevolmente migliori rispetto al metodo forEach, come dimostrato da this jsperf test.

Se tale prestazione è necessaria o meno per voi dipende da voi decidere, e nella maggior parte dei casi, vorrei favorire espressività su velocità. Questa differenza di velocità è probabilmente dovuta alle minori differenze semantiche tra il loop di base e il metodo quando si opera su array sparsi, come indicato in this answer.

Se non è necessario il comportamento di forEach e/o avete bisogno di uscire dal giro iniziale, è possibile utilizzare Lo-Dash di _.each in alternativa, che sarà anche il lavoro cross-browser.Se si utilizza jQuery, fornisce anche un valore simile a $.each, si noti solo le differenze tra gli argomenti passati alla funzione di callback in ciascuna variante.

(Per quanto riguarda il forEach polyfill, dovrebbe funzionare in browser più vecchi senza problemi, se si sceglie di seguire questa strada.)

Answer 2

Si è suggerito da alcuni sviluppatori (ad esempio, Kyle Simpson) da utilizzare .forEach per indicare che la matrice avrà un effetto collaterale e .map per le funzioni pure. for loop in questa equazione, quindi, a mio parere, rientrano in questa equazione come una soluzione generica che è più facile da comunicare in quanto è supportata su una pletora di lingue esp quando il # di iterazioni è precalcolata.

Answer 3

È possibile utilizzare la funzione foreach personalizzato che si esibirà molto meglio allora Array.forEach

Si dovrebbe aggiungere questa volta per il codice. Questo aggiungerà una nuova funzione alla matrice.

function foreach(fn) { 
    var arr = this; 
    var len = arr.length; 
    for(var i=0; i<len; ++i) { 
     fn(arr[i], i); 
    } 
} 

Object.defineProperty(Array.prototype, 'customForEach', { 
    enumerable: false, 
    value: foreach 
}); 

Quindi si può usare ovunque come l'Array.forEach

[1,2,3].customForEach(function(val, i){ 

}); 

L'unica differenza è 3 volte più veloce. https://jsperf.com/native-arr-foreach-vs-custom-foreach

AGGIORNAMENTO: nella nuova versione di Chrome le prestazioni di .forEach() sono state migliorate. Tuttavia, la soluzione può fornire prestazioni aggiuntive in altri browser.