JavaScript For Loop : Comment utiliser la boucle for…in
Les boucles nous permettent de parcourir les éléments 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 en JavaScript, et l’une d’entre elles est la boucle for…in.
Dans cet article, nous allons découvrir la boucle for...in proposée par JavaScript. Nous verrons comment la boucle for...in est utilisée en JavaScript, sa syntaxe, des exemples de son fonctionnement, quand l’utiliser, quand ne pas l’utiliser et quels autres types de boucles nous pouvons utiliser à la place.
Pourquoi utiliser des boucles
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 passage à travers les éléments d’une collection est appelé une itération.
Il existe deux façons d’accéder à un élément d’une collection. La première est via 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
La boucle JavaScript for...in parcourt ou itère les clés d’une collection. En utilisant ces clés, vous pouvez ensuite accéder à l’élément qu’elle représente dans la collection.
La collection d’éléments peut être un tableau, un objet ou même une chaîne de caractères.
Syntaxe de la boucle for…in
La boucle for...in 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 laquelle nous itérons. Il peut s’agir d’un objet, d’un tableau, d’une chaîne de caractères, etc. key sera la clé de chaque élément de value, passant à chaque itération à la clé suivante dans la liste.
Notez que nous utilisons let ou const pour déclarer key.
Utilisation de la boucle for…in avec des objets
Lorsque vous utilisez la boucle for...in 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 la variable key – sont les propriétés propres de l’objet.
Comme les objets peuvent hériter d’éléments par le biais de la chaîne de prototypes, qui comprend les méthodes et propriétés par défaut des objets ainsi que les prototypes d’objets que nous pouvons définir, nous devrions alors utiliser hasOwnProperty.
Un exemple d’objet for…in loop
Dans l’exemple suivant, nous effectuons une boucle sur la variable obj suivante :
const obj = {
1: "JavaScript",
3: "PHP",
2: "Python",
4: "Java"
};Dans la boucle, nous rendons la propriété et la valeur dans un champ
Voir le stylo
Looping Objects par SitePoint (@SitePoint)
sur CodePen
.
Remarquez que l’ordre de l’itération est ascendant pour les clés (c’est-à-dire qu’il commence par les chiffres dans l’ordre numérique, puis les lettres dans l’ordre alphabétique). Cependant, cet ordre sorti est différent de l’ordre d’indexation des éléments tel que créé lors de l’initialisation de l’objet.
Utilisation d’une boucle for…in avec des tableaux
Lorsque vous utilisez la boucle for...in pour itérer des tableaux en JavaScript, la clé dans ce cas sera les indices des éléments. Cependant, les indices peuvent être itérés dans un ordre aléatoire.
Ainsi, si la variable value dans la structure syntaxique de la boucle for...in que nous avons montrée ci-dessus était un tableau de cinq éléments, la clé ne serait pas garantie de 0 à 4. Certains indices pourraient en précéder d’autres. Les détails sur les cas où cela peut se produire sont expliqués plus loin dans cet article.
Exemple de tableau en boucle For…in
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
Looping Arrays par SitePoint (@SitePoint)
sur CodePen
.
Utilisation d’une boucle for…in avec des chaînes de caractères
Vous pouvez boucler sur une chaîne de caractères avec la boucle for...in de JavaScript. 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 caractères en boucle for…in
Dans l’exemple ci-dessous, nous effectuons une boucle 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
Strings Loop par SitePoint (@SitePoint)
sur CodePen
.
Quand utiliser une boucle for…in
Examinons les situations pour lesquelles la boucle for...in JavaScript est la mieux adaptée.
Itération d’objets avec une boucle for…in JavaScript
Étant donné que la boucle for...in n’itère que les propriétés énumérables d’un objet – qui sont les propriétés propres 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 une boucle for...in pour itérer des objets. Une boucle for...in fournit un moyen facile 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 de la boucle for...in JavaScript est le débogage. Par exemple, vous pouvez vouloir imprimer dans la console ou dans un élément HTML les propriétés d’un objet et ses valeurs. Dans ce cas, la boucle for...in est un bon choix.
Lorsque vous utilisez la boucle for...in pour déboguer des objets et 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 celui attendu.
Quand ne pas utiliser un JavaScript pour… en boucle
Examinons maintenant les situations dans lesquelles une boucle for...in n’est pas la meilleure option.
Itération ordonnée de tableaux
Comme l’ordre des index dans les itérations n’est pas garanti lors de l’utilisation de la boucle for...in, 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 de création des éléments plutôt que dans l’ordre des indices. Cela diffère du mode de fonctionnement des navigateurs modernes actuels, qui itèrent les tableaux en fonction des indices par 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, la boucle for...in itérera toujours le tableau dans l’ordre de 0 à 4. Dans IE, lorsque vous utilisez une boucle for...in, elle itérera les quatre éléments qui étaient initialement dans le tableau au début, puis atteindra l’élément qui a été ajouté en position trois.
Apporter des modifications pendant l’itération
Tout ajout, suppression ou modification des propriétés ne garantit pas une itération ordonnée. Il faut éviter d’apporter des modifications aux propriétés dans une boucle for...in. Cela est principalement dû à sa nature non ordonnée.
Ainsi, si vous supprimez un élément avant de l’atteindre dans l’itération, l’élément ne sera pas du tout visité 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é. Ainsi, si une propriété est modifiée, elle pourrait être visitée deux fois dans la boucle plutôt qu’une.
En outre, si une propriété est ajoutée pendant l’itération, elle peut être visitée ou non pendant l’itération du tout.
En raison de ces situations, il est préférable d’éviter d’effectuer des modifications, des suppressions ou des ajouts à un objet dans une boucle for...in.
Voici un exemple d’ajout d’un élément dans une boucle for...in. Nous pouvons voir le résultat de la première boucle puis de la seconde après avoir effectué des ajouts dans la première boucle.
Voir le stylo
Ajout dans une boucle d’objets 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.
Types de boucles alternatifs
Dans ces situations où une boucle for...in n’est pas la meilleure option, que devriez-vous utiliser à la place ? Jetons un coup d’oeil.
Utilisation d’une boucle for avec des tableaux
Il n’y a jamais de mal à utiliser une boucle for! La boucle for JavaScript est l’un des outils les plus fondamentaux pour boucler les éléments d’un tableau. La boucle for vous permet de prendre le contrôle total des indices lorsque vous itérez un tableau.
Cela signifie que lorsque vous utilisez la boucle for, vous pouvez avancer et reculer, changer les éléments du tableau, ajouter des éléments, et plus encore, 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
forEach 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.
Lesfonctions de rappel sont des fonctions que vous passez à une autre méthode ou fonction pour qu’elles soient exécutées dans le cadre de l’exécution de cette méthode ou fonction. Lorsqu’il s’agit de forEach en JavaScript, cela signifie que la fonction de rappel sera exécutée pour chaque itération en recevant l’élément actuel de l’itération comme paramètre.
Par exemple, l’instruction suivante itère sur la variable arr et imprime ses valeurs dans la console en utilisant forEach:
arr.forEach((valeur) => console.log(valeur));Vous pouvez également accéder à l’index du tableau :
arr.forEach((valeur,index) => console.log(valeur, index));Les boucles forEach JavaScript peuvent également être utilisées pour itérer des objets en utilisant Object.keys(), en lui passant l’objet sur lequel vous voulez itérer, ce qui renvoie un tableau des propriétés propres de l’objet :
Object.keys(obj).forEach((key) => console.log(obj[key]));Vous pouvez également utiliser forEach pour boucler sur les valeurs des propriétés directement si vous n’avez pas besoin d’accéder aux propriétés en utilisant Object.values():
Object.values(obj).forEach((value) => console.log(value));Notez que Object.values() renvoie les éléments dans le même ordre que for...in.
Conclusion
En utilisant la boucle JavaScript for...in, nous pouvons parcourir en boucle les clés ou les propriétés d’un objet. Elle peut être utile pour itérer les propriétés d’un objet ou pour le débogage, mais doit être évitée pour itérer des tableaux ou apporter des modifications à l’objet. J’espère que les exemples et explications ci-dessus vous ont été utiles.
Si vous souhaitez en savoir plus sur les boucles for...in, y compris la prise en charge par les navigateurs et les exemples d’utilisation, consultez la documentation de Mozilla
.
