L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
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 lespour loop JavaScript fournit. Nous allons voir commentpour... dansles 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 unité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 Javascriptpour 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
Lepourloop a la syntaxe ou la structure suivante :
pour (laisserclédansvaleur) {
}
Dans ce bloc de code,valeur 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.clésera la clé de chaque élément dansvaleurpassant à chaque itération à la clé suivante de la liste.
Notez que nous utilisonslaisserou alorsconstantedéclarerclé.
Utilisation de la boucle for avec des objets
Lors de l'utilisationpour... dansboucle 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 leclé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 utiliseraOwnProperty.
Exemple de boucle for sur un objet itérable
Dans l'exemple suivant, nous bouclons sur la variableobj:
constanteobj= {
1: "JavaScript",
3: "PHP",
2: "Python",
4: "Java"
};
Dans la boucle, nous rendons la propriété et la valeur dans un
élément.
Voir le stylo
Objets en bouclepar SitePoint (@SitePoint)
surCodePen.
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 dupour... dansboucle pour itérer les tableaux en JavaScript,clé dans ce cas seront les indices des éléments. Cependant, les indices peuvent être itérés dans un ordre aléatoire.
Alors, si levaleurvariables dans lepour... dansstructure de syntaxe de boucle que nous avons montrée ci-dessus était un tableau de cinq éléments,clé 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 boucle
Dans l'exemple ci-dessous, nous bouclons sur la variable suivantearr:
constantearr= ["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 bouclepar SitePoint (@SitePoint)
surCodePen.
Utilisation d'une boucle for…in avec des chaînes
Vous pouvez boucler sur une chaîne avec le JavaScriptpour... dans 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 suivantechaîne:
constantechaîne= "Bonjour le monde!";
À 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 cordespar SitePoint (@SitePoint)
surCodePen.
Quand utiliser une boucle for…in
Regardons les situations que le JavaScriptpour... dansboucle est la mieux adaptée.
Itération d'objets avec une boucle JavaScript for…in
Parce que lepour... dansboucle 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 commetoStringqui font partie du prototype de l'objet — il est bon d'utiliser unpour... dans boucle pour itérer les objets. UNpour... dansLa 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 JavaScriptpour... dans 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, lepour... dansboucle est un bon choix.
Lors de l'utilisation dupour... dans 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ù unpour... dansboucle 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 depour... dansboucle, 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, lepour... dansboucle itérera toujours le tableau dans l'ordre de 0 à 4. Dans IE, lors de l'utilisation d'unpour... dansboucle, 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'unpour... dans 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 unpour... dansboucle.
Voici un exemple d'ajout d'un élément dans unpour... dans 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'objetpar SitePoint (@SitePoint)
surCodePen.
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ù unpour... dans 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 unpour boucle! Le Javascriptpour loop est l'un des outils les plus basiques pour boucler sur des éléments de tableau. Lepourloop vous permet de prendre le contrôle total des indices lorsque vous parcourez un tableau.
Cela signifie que lors de l'utilisation de lapourboucle, 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.
pour (laisserje= 0;je<arr.longueur;je++) {
console.Journal(arr[je]);
}
méthode forEach pour les tableaux et les objets
pour chaqueen 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 àpour chaqueen 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 variablearret imprime ses valeurs dans la console en utilisantpour chaque:
arr.pour chaque((valeur) => console.Journal(valeur));
Vous pouvez également accéder à l'index du tableau :
arr.pour chaque((valeur,indice) => console.Journal(valeur,indice));
Javascriptpour chaqueles boucles peuvent également être utilisées pour itérer des objets en utilisantObjet.keys()en lui transmettant l'objet sur lequel vous souhaitez itérer, qui renvoie un tableau des propriétés de l'objet :
Objet.clés(obj).pour chaque((clé) => console.Journal(obj[clé]));
Alternativement, vous pouvezpour chaquepour boucler directement sur les valeurs des propriétés si vous n'avez pas besoin d'accéder aux propriétés en utilisantObjet.values():
Objet.valeurs(obj).pour chaque((valeur) => console.Journal(valeur));
Noter queObjet.values()renvoie les éléments dans le même ordre quepour... dans.
Conclusion
En utilisant le JavaScriptpour... dans 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.
Source link