for.
Parcourt les noms des propriétés énumérables d’un objet, y compris celles héritées du prototype.
Exemple
#const student = { name: 'Léa', level: 3, course: 'JavaScript' }
for (const key in student) {
console.log(`${key}: ${student[key]}`)
}Définition et utilisation
#La boucle for...in fournit à chaque tour la clé suivante de l’objet sous forme de chaîne. Vous lisez la valeur avec les crochets : object[key]. C’est la plus ancienne façon de parcourir les propriétés des objets ordinaires.
La boucle couvre aussi les propriétés énumérables héritées du prototype. Dans les littéraux d’objets ordinaires, cela dérange rarement, mais avec des objets créés par Object.create(), des clés supplémentaires apparaîtront. Vous les filtrez avec la condition Object.hasOwn(object, key).
for...in ne convient pas aux tableaux : il renvoie les indices comme des chaînes ("0", "1") et peut capturer des propriétés supplémentaires. Dans le code moderne, on utilise plus souvent Object.keys() ou Object.entries() avec for...of, car ils ne renvoient que les clés propres.
Syntaxe
#for (const key in object) {
// instructions
}Plus d’exemples
#const defaults = { theme: 'dark' }
const settings = Object.create(defaults)
settings.sounds = true
for (const key in settings) {
console.log(key, Object.hasOwn(settings, key))
}const points = [10, 20, 30]
for (const index in points) {
console.log(index + 1)
}Les indices sont des chaînes, donc + 1 concatène du texte au lieu d’additionner. Pour les tableaux, utilisez for...of ou forEach().
const lessons = { b: 'CSS', 2: 'Boucles', a: 'HTML', 1: 'Variables' }
for (const key in lessons) {
console.log(key)
}Les clés qui ressemblent à des entiers viennent d’abord, par ordre croissant. Les autres gardent leur ordre d’ajout.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si vous n’avez besoin que des clés propres, il est plus simple d’écrire
for (const key of Object.keys(obj)). Il n’est alors pas nécessaire de vérifierObject.hasOwn(). - N’ajoutez ni ne supprimez de propriétés pendant une boucle
for...in. Il n’y a aucune garantie que les nouvelles clés seront visitées. - Les clés de type
Symbolet les propriétés non énumérables sont ignorées.
Entrées associées
#- for...in vs for...offor...of fournit les valeurs successives d’un objet itérable, tandis que for...in fournit les noms successifs des propriétés d’un objet sous forme de chaînes.
- for...ofParcourt les valeurs successives d’un objet itérable : tableau, chaîne, Map, Set et autres.
- Object.keys()Renvoie un tableau des noms des propriétés propres et énumérables d’un objet.
- Object.entries()Renvoie un tableau des paires [clé, valeur] d’un objet.
- Object.hasOwn()Vérifie si un objet a sa propre propriété portant le nom donné.
- Object.create()Crée un nouvel objet avec le prototype donné.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.