JavaScript - Sfumature di myArray.forEach rispetto al ciclo for

Ho visto molte domande che suggeriscono di utilizzare:

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

invece di:

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

per gli array, a causa di iterazioni incoerenti ( vedere qui ).

Tuttavia, non riesco a trovare nulla che sembri preferire il ciclo orientato agli oggetti:

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

Il che mi sembra molto più intuitivo.

Per il mio progetto attuale, la compatibilità con IE8 è importante e sto valutando di utilizzare il polyfill di Mozilla , tuttavia non sono sicuro al 100% come funzionerà.

• Esistono differenze tra lo standard for loop (il primo esempio sopra) e l'implementazione 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 tanto un problema, ma solo la coerenza con cui le proprietà vengono iterate.

La differenza più sostanziale tra il forciclo e il forEachmetodo è che, con il primo, potresti breakuscire dal giro. Puoi simulare continuesemplicemente tornando dalla funzione passata aforEach , ma non c'è modo di interrompere del tutto il ciclo.

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

// '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 forEachsia molto più espressivo: rappresenta il tuo intento di iterare attraverso ogni elemento di un array e ti fornisce un riferimento all'elemento, non solo all'indice. Nel complesso, dipende principalmente dai gusti personali, ma se puoi usarlo forEach, ti consiglio di usarlo.

Ci sono alcune differenze più sostanziali tra le due versioni, in particolare per quanto riguarda le prestazioni. In effetti, il semplice ciclo for funziona notevolmente meglio del forEachmetodo, come dimostrato da questo test jsperf .

Spetta a te decidere se tale esecuzione sia necessaria o meno e nella maggior parte dei casi preferirei l'espressività alla velocità. Questa differenza di velocità è probabilmente dovuta alle minori differenze semantiche tra il ciclo di base e il metodo quando si opera su array sparsi, come indicato in questa risposta .

Se non hai bisogno del comportamento di forEache / o hai bisogno di uscire presto dal ciclo, puoi usare Lo-Dash _.eachcome alternativa, che funzionerà anche cross-browser. Se stai usando jQuery, fornisce anche un file simile$.each , basta notare le differenze negli argomenti passati alla funzione di callback in ogni variazione.

(Per quanto riguarda il forEachpolyfill, dovrebbe funzionare senza problemi nei browser meno recenti, se scegli di seguire quella strada.)

Puoi usare la tua funzione foreach personalizzata che funzionerà molto meglio di Array.forEach

Dovresti aggiungerlo una volta al tuo codice. Questo aggiungerà una nuova funzione all'array.

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 puoi usarlo ovunque come 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.

È suggerito da molti sviluppatori (ad esempio Kyle Simpson) .forEachper indicare che l'array avrà un effetto collaterale e .mapper funzioni pure.fori loop si adattano bene come soluzione generica per un numero noto di loop o qualsiasi altro caso che non si adatta in quanto è più facile comunicare a causa del suo ampio supporto nella maggior parte dei linguaggi di programmazione.

per esempio

/* For Loop known number of iterations */
const numberOfSeasons = 4;
for (let i = 0; i < numberOfSeasons; i++) {
  //Do Something
}

/* Pure transformation */
const arrayToBeUppercased = ['www', 'html', 'js', 'us'];
const acronyms = arrayToBeUppercased.map((el) => el.toUpperCase));

/* Impure, side-effects with .forEach */
const acronymsHolder = [];
['www', 'html', 'js', 'us'].forEach((el) => acronymsHolder.push(el.toUpperCase()));

Per quanto riguarda la convenzione, questa sembra la migliore, tuttavia la comunità non ha davvero stabilito una convenzione sui for incicli di protocollo di iterazione più recenti . In generale, penso che sia una buona idea seguire i concetti di FP che la comunità JS sembra essere aperta ad adottare.