4.7 Boucle For...in

Jusqu'à présent, vous avez découvert 3 types de boucles en JavaScript. La boucle for, boucles while et boucles do-while. Avec toutes ces boucles, nous pouvons répéter une action plusieurs fois. Mais nous avons deux autres types de boucles en JavaScript et nous les utilisons pour parcourir les propriétés d'un objet ou d'éléments dans un tableau. Donc dans cette vidéo, nous allons examiner la boucle for-in. Disons que nous avons un objet comme personne, avec deux propriétés, Pour nom: Toto et age 20 ans. Disons que nous voulons afficher toutes les propriétés de cet objet personne. C'est à ce moment que nous utilisons la boucle for in. Donc on fait un for, entre parenthèses et contrairement à la boucle for que nous avons appris auparavant, nous n'avons pas trois parties, donc nous n'avons pas cette expression initiale suivie d'un point-virgule et une condition suivie de la partie d'incrémentation, C'est différent avec la boucle for..in. Donc on fait donc un let key in person. Donc, à chaque itération, cette variable clé dans la boucle contiendra l'une des propriétés de cet objet personne, je vais vous donner un exemple. ici, je vais faire un simple console .log de key, Lorsqu'on enregistre les modifications, on voit dans la première itération que key est le nom, et l'âge est la deuxième itération. Maintenant, que faire si vous souhaitez afficher la valeur de chaque propriété à côté d'elle. Alors, il existe deux façons d'accéder aux propriétés d'un objet. Nous pouvons utiliser la notation par points qui ressemble à ceci person.name ou nous pouvons utiliser la notation entre crochets. Donc, on fait un person entre crochets et le nom de la propriété ciblé sous forme de chaîne. Auparavant, je vous ai dit que nous avons utilisé la notation des crochets lorsque nous ne savons pas à l'avance, au moment de la rédaction du code à quelle propriété nous allons accéder. Le nom de la propriété ciblé est peut-être calculé au moment de l'exécution. Voici un exemple. Lorsque nous parcourons les propriétés de l'objet personne, à chaque itération, la clé de valeur va être différente. Donc, ici, nous pouvons utiliser la notation par points pour afficher la valeur de cette propriété. En d'autres termes, nous ne pouvons pas faire quelque chose comme ça, car nous n'avons pas de propriété appelée key dans l'objet personne. Lorsque nous utilisons la notation entre crochets, nous ajoutons donc des crochets et passons la clé comme nom de la propriété ciblé. On va maintenant supprimer ceci. Enregistrez les modifications afin que vous puissiez voir la valeur du nom Toto et la valeur de âge 20. Voici donc la boucle for in et nous l'utilisons pour itérer sur les propriétés d'un objet. Nous pouvons également les utiliser pour parcourir un tableau. Mais ce n'est pas un moyen idéal, dans la prochaine vidéo, je vais vous montrer une meilleure façon, mais voyons comment cela fonctionne avant de terminer cette vidéo. Je vais donc définir un tableau appelé couleurs, avec trois valeurs, rouge, vert et bleu. Nous pouvons utiliser la boucle for in pour parcourir ce tableau. Donc, pour laisser l'index en couleurs, j'ai nommé cet index de variable de boucle, car à chaque itération, cette variable d'index sera définie sur l'index de l'un des éléments de ce tableau. Donc, 0 1 et 2. On fait un console.log de index, donc on enregistre les modifications. Et nous obtenons 0 1 et 2. Maintenant, si vous voulez obtenir les éléments d'un index donné, encore une fois, nous utilisons la notation entre crochets. Donc, virgule, couleurs, et index entre crochet. Enregistrez les modifications, et maintenant nous pouvons voir chaque élément dans notre tableau de couleurs. À partir du script ecma 6, ou ES6, qui est la version moderne de JavaScript, nous avons un nouveau type de boucle appelé boucle for of, c'est un moyen idéal pour parcourir les tableaux, et c'est ce que vous allez apprendre dans la prochaine vidéo.