Boucle For en JavaScript : comment utiliser la boucle for…in

Les boucles nous permettent de parcourir des éléments dans des tableaux ou des objets et de faire des choses comme les imprimer, les modifier ou effectuer d’autres types de tâches ou d’actions. Il existe différents types de boucles, et la boucle for en JavaScript nous permet de parcourir une collection (comme un tableau).

Dans cet article, nous allons découvrir les for loop JavaScript fournit. Nous allons voir comment for...in les instructions de boucle sont utilisées dans JavaScript, la syntaxe, des exemples de son fonctionnement, quand l’utiliser ou l’éviter, et quels autres types de boucles nous pouvons utiliser à la place.

Pourquoi utiliser des boucles For dans le code JavaScript

En JavaScript, tout comme dans d’autres langages de programmation, nous utilisons des boucles pour lire ou accéder aux éléments d’une collection. La collection peut être un tableau ou un objet. Chaque fois que l’instruction de boucle parcourt les éléments d’une collection, nous l’appelons un itération.

Il existe deux manières d’accéder à un élément d’une collection. La première consiste à utiliser sa clé dans la collection, qui est un index dans un tableau ou une propriété dans un objet. La deuxième façon est via l’élément lui-même, sans avoir besoin de la clé.

Définition de la boucle for…in

Le Javascript for loop parcourt ou itère les clés d’une collection. A l’aide de ces touches, vous pouvez alors accéder à l’élément qu’il représente dans la collection.

La collection d’éléments peut être soit des tableaux, des objets ou même des chaînes.

Syntaxe de la boucle for…in

Le for loop a la syntaxe ou la structure suivante :

for (let key in value) {
  
}

Dans ce bloc de code, value est la collection d’éléments sur lesquels nous itérons. Il peut s’agir d’un objet, d’un tableau, d’une chaîne, etc. key sera la clé de chaque élément dans valuepassant à chaque itération à la clé suivante de la liste.

Notez que nous utilisons let ou alors const déclarer key.

Utilisation de la boucle for avec des objets

Lors de l’utilisation for...in boucle pour itérer un objet en JavaScript, les clés ou propriétés itérées – qui, dans l’extrait ci-dessus, sont représentées par le key variable — sont les propres propriétés de l’objet.

Comme les objets peuvent hériter d’éléments via la chaîne de prototypes, qui inclut les méthodes et propriétés par défaut des objets ainsi que les prototypes d’objets que nous pourrions définir, nous devrions alors utiliser aOwnProperty.

Exemple de boucle for sur un objet itérable

Dans l’exemple suivant, nous bouclons sur la variable obj:

const obj = {
  1: "JavaScript",
  3: "PHP",
  2: "Python",
  4: "Java"
};

Dans la boucle, nous rendons la propriété et la valeur dans un <div> élément.

Voir le stylo
Objets en boucle par SitePoint (@SitePoint)
sur CodePen.

Notez que l’ordre de l’itération est croissant pour les clés (c’est-à-dire en commençant par les chiffres dans l’ordre numérique puis les lettres dans l’ordre alphabétique). Cependant, cet ordre de sortie est différent de l’ordre d’index des éléments créés lors de l’initialisation de l’objet.

Utilisation d’une boucle for…in avec des tableaux

Lors de l’utilisation du for...in boucle pour itérer les tableaux en JavaScript, key dans ce cas seront les indices des éléments. Cependant, les indices peuvent être itérés dans un ordre aléatoire.

Alors, si le value variables dans le for...in structure de syntaxe de boucle que nous avons montrée ci-dessus était un tableau de cinq éléments, key ne serait pas garanti entre 0 et 4. Certains indices pourraient en précéder d’autres. Les détails sur le moment où cela pourrait se produire sont expliqués plus loin dans cet article.

For…in exemple de tableau de boucles

Dans l’exemple ci-dessous, nous bouclons sur la variable suivante arr:

const arr = ["Javascript", "PHP", "Python", "Java"];

Et dans la boucle, nous rendons l’index et la valeur de chaque élément du tableau.

Voir le stylo
Tableaux en boucle par SitePoint (@SitePoint)
sur CodePen.

Utilisation d’une boucle for…in avec des chaînes

Vous pouvez boucler sur une chaîne avec le JavaScript for...in boucle. Cependant, il n’est pas recommandé de le faire, car vous bouclerez sur les indices des caractères plutôt que sur les caractères eux-mêmes.

Un exemple de chaîne de boucle for…in

Dans l’exemple ci-dessous, nous bouclons sur la variable suivante str:

const str = "Hello, World!";

À l’intérieur de la boucle, nous rendons la clé, ou l’index de chaque caractère, et le caractère à cet index.

Voir le stylo
Boucle de cordes par SitePoint (@SitePoint)
sur CodePen.

Quand utiliser une boucle for…in

Regardons les situations que le JavaScript for...in boucle est la mieux adaptée.

Itération d’objets avec une boucle JavaScript for…in

Parce que le for...in boucle itère uniquement les propriétés énumérables d’un objet – qui sont les propres propriétés de l’objet plutôt que des propriétés comme toString qui font partie du prototype de l’objet — il est bon d’utiliser un for...in boucle pour itérer les objets. UN for...in La boucle fournit un moyen simple d’itérer sur les propriétés d’un objet et, finalement, sur ses valeurs.

Débogage avec une boucle for…in

Un autre bon cas d’utilisation pour le JavaScript for...in la boucle est en cours de débogage. Par exemple, vous pouvez vouloir imprimer sur la console ou un élément HTML les propriétés d’un objet et ses valeurs. Dans ce cas, le for...in boucle est un bon choix.

Lors de l’utilisation du for...in loop pour le débogage des objets et de leurs valeurs, vous devez toujours garder à l’esprit que les itérations ne sont pas ordonnées, ce qui signifie que l’ordre des éléments que la boucle itère peut être aléatoire. Ainsi, l’ordre des propriétés accédées peut ne pas être comme prévu.

Quand ne pas utiliser un JavaScript pour… dans la boucle

Examinons maintenant les situations où un for...in boucle n’est pas la meilleure option.

Itération ordonnée des tableaux

Comme l’ordre des index dans les itérations n’est pas garanti lors de l’utilisation de for...in boucle, il est recommandé de ne pas itérer les tableaux si le maintien de l’ordre est nécessaire.

Ceci est particulièrement essentiel si vous cherchez à prendre en charge des navigateurs comme IE, qui itère dans l’ordre dans lequel les éléments sont créés plutôt que dans l’ordre des index. Ceci est différent du fonctionnement des navigateurs modernes actuels, qui itèrent les tableaux en fonction des indices dans l’ordre croissant.

Ainsi, par exemple, si vous avez un tableau de quatre éléments et que vous insérez un élément en position trois, dans les navigateurs modernes, le for...in boucle itérera toujours le tableau dans l’ordre de 0 à 4. Dans IE, lors de l’utilisation d’un for...in boucle, il itérera les quatre éléments qui étaient à l’origine dans le tableau au début, puis atteindra l’élément qui a été ajouté à la position trois.

Apporter des modifications pendant l’itération

Tout ajout, suppression ou modification de propriétés ne garantit pas une itération ordonnée. Apporter des modifications aux propriétés d’un for...in boucle doit être évitée. Cela est principalement dû à sa nature désordonnée.

Ainsi, si vous supprimez un élément avant de l’atteindre dans l’itération, l’élément ne sera pas visité du tout dans toute la boucle.

De même, si vous apportez des modifications à une propriété, cela ne garantit pas que l’élément ne sera pas revisité à nouveau. Ainsi, si une propriété est modifiée, elle peut être visitée deux fois dans la boucle plutôt qu’une seule fois.

De plus, si une propriété est ajoutée pendant l’itération, elle peut ou non être visitée du tout pendant l’itération.

En raison de ces situations, il est préférable d’éviter d’apporter des modifications, des suppressions ou des ajouts à un objet dans un for...in boucle.

Voici un exemple d’ajout d’un élément dans un for...in boucle. On peut voir le résultat de la première boucle puis de la seconde après avoir fait des ajouts dans la première boucle.

Voir le stylo
Ajout dans la boucle d’objet par SitePoint (@SitePoint)
sur CodePen.

Comme vous pouvez le voir dans l’exemple ci-dessus, les éléments qui ont été ajoutés n’ont pas été itérés.

Alternatives aux boucles For en JavaScript

Ainsi, dans les situations où un for...in loop n’est pas la meilleure option, que devriez-vous utiliser à la place ? Nous allons jeter un coup d’oeil.

Utiliser une boucle for avec des tableaux

Il n’est jamais mauvais d’utiliser un for boucle! Le Javascript for loop est l’un des outils les plus basiques pour boucler sur des éléments de tableau. Le for loop vous permet de prendre le contrôle total des indices lorsque vous parcourez un tableau.

Cela signifie que lors de l’utilisation de la for boucle, vous pouvez avancer et reculer, modifier des éléments dans le tableau, ajouter des éléments, etc., tout en conservant l’ordre du tableau.

L’instruction suivante crée une boucle qui itère sur un tableau et imprime ses valeurs sur la console.

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

méthode forEach pour les tableaux et les objets

pour chaque en JavaScript est une méthode sur les prototypes de tableau qui nous permet d’itérer sur les éléments d’un tableau et leurs indices dans une fonction de rappel.

Fonctions de rappel sont des fonctions que vous transmettez à une autre méthode ou fonction pour être exécutées dans le cadre de l’exécution de cette méthode ou fonction. Quand cela vient à forEach en JavaScript, cela signifie que la fonction callback sera exécutée à chaque itération recevant en paramètre l’item courant dans l’itération.

Par exemple, l’instruction suivante itère sur la variable arr et imprime ses valeurs dans la console en utilisant forEach:

arr.forEach((value) => console.log(value));

Vous pouvez également accéder à l’index du tableau :

arr.forEach((value, index) => console.log(value, index));

Javascript forEach les boucles peuvent également être utilisées pour itérer des objets en utilisant Objet.keys()en lui transmettant l’objet sur lequel vous souhaitez itérer, qui renvoie un tableau des propriétés de l’objet :

Object.keys(obj).forEach((key) => console.log(obj[key]));

Alternativement, vous pouvez forEach pour boucler directement sur les valeurs des propriétés si vous n’avez pas besoin d’accéder aux propriétés en utilisant Objet.values():

Object.values(obj).forEach((value) => console.log(value));

Noter que Object.values() renvoie les éléments dans le même ordre que for...in.

Conclusion

En utilisant le JavaScript for...in boucle, nous pouvons parcourir les clés ou les propriétés d’un objet. Cela peut être utile lors de l’itération des propriétés d’un objet ou pour le débogage, mais doit être évité lors de l’itération de tableaux ou de modifications de l’objet. J’espère que vous avez trouvé les exemples et les explications ci-dessus utiles.