JavaScript - nuances de myArray.forEach vs for loop

Já vi muitas perguntas que sugerem o uso de:

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

ao invés de:

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

para matrizes, devido a iteração inconsistente ( veja aqui ).

No entanto, não consigo encontrar nada que pareça preferir o loop orientado a objetos:

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

O que parece muito mais intuitivo para mim.

Para meu projeto atual, a compatibilidade com o IE8 é importante e estou pensando em usar o polyfill da Mozilla , mas não tenho 100% de certeza de como isso funcionará.

• Há alguma diferença entre o loop for padrão (o primeiro exemplo acima) e a implementação de Array.prototype.forEach por navegadores modernos?
• Há alguma diferença entre as implementações de navegador moderno e a implementação do Mozilla vinculada acima (com especial atenção ao IE8)?
• O desempenho não é um problema, apenas a consistência com que as propriedades são iteradas.

A diferença mais substantiva entre o forloop e o forEachmétodo é que, com o primeiro, você pode breaksair do loop. Você pode simular continuesimplesmente retornando da função passada para forEach, mas não há como parar completamente o loop.

Além disso, os dois realizam efetivamente a mesma funcionalidade. Outra pequena diferença envolve o escopo do índice (e todas as variáveis ​​que contêm) no loop for, devido ao içamento de variável.

// '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) { ... });

No entanto, acho que forEaché muito mais expressivo - representa sua intenção de iterar por meio de cada elemento de um array e fornece uma referência ao elemento, não apenas ao índice. No geral, tudo se resume ao gosto pessoal, mas se você puder usar forEach, eu recomendo.

Existem algumas diferenças mais substanciais entre as duas versões, especificamente em relação ao desempenho. Na verdade, o loop for simples tem um desempenho consideravelmente melhor do que o forEachmétodo, conforme demonstrado por este teste jsperf .

Se essa performance é ou não necessária para você, cabe a você decidir e, na maioria dos casos, eu preferiria a expressividade à velocidade. Essa diferença de velocidade provavelmente se deve às pequenas diferenças semânticas entre o loop básico e o método ao operar em matrizes esparsas, conforme observado nesta resposta .

Se você não precisa do comportamento forEache / ou precisa sair do loop antes, pode usar o Lo-Dash _.eachcomo alternativa, que também funcionará em vários navegadores. Se você estiver usando jQuery, ele também fornece um similar $.each, apenas observe as diferenças nos argumentos passados ​​para a função de retorno de chamada em cada variação.

(Quanto ao forEachpolyfill, ele deve funcionar em navegadores mais antigos sem problemas, se você optar por seguir esse caminho.)

Você pode usar sua função foreach personalizada, que terá um desempenho muito melhor do que Array.forEach

Você deve adicionar isso uma vez ao seu código. Isso adicionará uma nova função ao 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
});

Depois, você pode usá-lo em qualquer lugar, como Array.forEach

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

});

A única diferença é 3 vezes mais rápido. https://jsperf.com/native-arr-foreach-vs-custom-foreach

ATUALIZAÇÃO: Na nova versão do Chrome, o desempenho de .forEach () foi melhorado. No entanto, a solução pode fornecer desempenho adicional em outros navegadores.

É sugerido por muitos desenvolvedores (por exemplo, Kyle Simpson) para usar .forEachpara indicar que o array terá um efeito colateral e .mappara funções puras. foros loops se encaixam bem como uma solução de propósito geral para um número conhecido de loops ou qualquer outro caso que não se encaixe, pois é mais fácil de se comunicar por causa de seu amplo suporte na maioria das linguagens de programação.

por exemplo

/* 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()));

Em termos de convenção, isso parece melhor, no entanto, a comunidade ainda não estabeleceu uma convenção sobre os for inloops de protocolo de iteração mais recentes . Geralmente, acho uma boa ideia seguir os conceitos de FP que a comunidade JS parece estar aberta a adotar.