web-dev-qa-db-fra.com

Différence entre forEach et for loop en javascript

Je me demande: y a-t-il une différence significative entre la boucle forEach et for en JavaScript.

Considérez cet exemple:

var myArray = [1,2,3,4];

myArray.forEach(function(value) {
  console.log(value);
});

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

Voici une partie de mes recherches:

  1. Performance : Selon JsPerf : forEach est un peu plus lent que for loop.
  2. Convivialité : Il n'y a aucun moyen de casser/retourner du rappel en cas de boucle forEach.

Par exemple: vous voulez savoir si un nombre est premier ou non. Je pense que l'utilisation de la boucle for est beaucoup plus facile que l'utilisation de la boucle forEach pour ce faire.

  1. Lisibilité: L'utilisation de la boucle for rend le code plus lisible que d'avoir forEach dans le code.
  2. Compatibilité du navigateur : forEach n'est pas pris en charge dans IE <9 Donc, cela introduit du shim dans notre code.

Mes questions sont:

  1. Quels sont les avantages de forEach over for loop?
  2. Dans quels scénarios, forEach est plus préférable.
  3. Pourquoi est-il même entré en JavaScript? Pourquoi était-il nécessaire?
javascriptloopsfor-loopforeach
22
sachinjain024

forEach est une méthode sur le prototype Array . Il parcourt chaque élément d'un tableau et le transmet à une fonction de rappel.

Donc, fondamentalement, forEach est une méthode abrégée pour le cas d'utilisation "passez chaque élément d'un array à un function ". Voici un exemple courant où je pense Array.forEach est assez utile par rapport à une boucle for:

// shortcut for document.querySelectorAll
function $$(expr, con) {
    return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}

// hide an element
function hide(el) {
    el.style.display = 'none';
}

// hide all divs via forEach
$$('div').forEach(hide); 

// hide all divs via for
for (var divs = $$('div'), i = 0; i < divs.length; i++) {
    hide(divs[i])
}

Comme vous pouvez le voir, la lisibilité de l'instruction forEach est améliorée par rapport à une boucle for.

En revanche, une instruction for est plus flexible: elle n'implique pas nécessairement un tableau. Les performances d'une boucle for normale sont légèrement meilleures, car il n'y a pas d'appel de fonction pour chaque élément impliqué. Malgré cela, il est recommandé d'éviter les boucles for lorsqu'elle peut être écrite sous la forme d'une instruction forEach.

18
Lea Rosema

Dans une boucle forEach, vous ne contrôlez pas la façon dont vous parcourez le tableau. La boucle classique for vous permet de choisir l'algorithme d'itération comme vous le souhaitez (i++; i--; i+=2*i, etc).

Cependant, une boucle forEach est beaucoup plus facile à utiliser - vous n'avez pas besoin de jouer avec tous les comptages i, en trouvant le array[i] object - JS le fait pour vous.

19
naivists
>> sparseArray = [1, 2, , 4];

>> sparseArray.forEach(console.log, console);
1 0 [1, 2, 3: 4] 
2 1 [1, 2, 3: 4] 
4 3 [1, 2, 3: 4] 

>> for(var i = 0; i < sparseArray.length; ++i) { console.log(sparseArray[i]) };
1
2
undefined
4

forEach est un ajout récent pour rendre possible le style expressif de compréhension de liste en javascript. Ici, vous pouvez voir que forEachignore les éléments qui n'ont jamais été définis, mais le mieux que vous puissiez faire avec une boucle for est de vérifier undefined ou null, qui peuvent tous deux être définis comme valeurs et récupérés par forEach. Sauf si vous vous attendez à des valeurs manquantes, forEach est équivalent à for boucles, mais notez que vous ne pouvez pas vous arrêter tôt, pour lequel vous avez besoin de every.

9
Phil H

En termes simples, selon l'article ci-dessous, et la recherche, il semble que les principales différences sont:

Pour la boucle

  1. C'est l'une des façons originales d'itérer sur les tableaux
  2. C'est plus rapide
  3. Vous pouvez break en utiliser ce mot-clé
  4. À mon avis, c'est principalement utilisé pour les calculs avec des nombres entiers (nombres)
  5. Les paramètres sont (iterator, counter, incrementor)

Boucle ForEach

  1. C'est un moyen plus récent avec moins de code pour parcourir les tableaux
  2. Plus facile à lire
  3. Vous permet de garder la variable dans la portée
  4. Moins de risques d'erreurs accidentelles avec le i <= >= etc.....
  5. Les paramètres sont (iterator, Index of item, entire array)

https://alligator.io/js/foreach-vs-for-loops/

0
jso1919