Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser for in en boucle en JavaScript ? A quoi dois-je faire attention ?

伊谢尔伦
Libérer: 2017-07-26 13:21:17
original
1810 Les gens l'ont consulté

Tout le monde sait que JavaScript propose deux façons d'itérer des objets :

(1)for loop;
(2)for..in loop; Il est courant que tout le monde utilise une boucle for pour itérer des objets de tableau. Cependant, lors de l'utilisation de boucles for..in, tout le monde doit faire attention. Pourquoi dites-vous cela ? Tout le monde, écoutez-moi...
Javascript fournit une boucle spéciale (c'est-à-dire la boucle for..in), qui est utilisée pour itérer les propriétés d'un objet ou de chaque élément d'un tableau, for...in Le compteur de boucle dans la boucle est une chaîne et non un nombre. Il contient le nom de la propriété actuelle ou l'index de l'élément actuel du tableau.
Cas 1 :

//使用for..in循环遍历对象属性 
varperson={ 
name: "Admin", 
age: 21, 
address:"shandong" 
}; 
for(vari in person){ 
console.log(i); 
}
Copier après la connexion
Le résultat de l'exécution est :

nom
âge
adresse
Lors du parcours d'un objet, la variable i, qui est le compteur de boucle, est l'objet Nom de l'attribut

//使用for..in循环遍历数组 
vararray = ["admin","manager","db"] 
for(vari in array){ 
console.log(i); 
}
Copier après la connexion
Résultat de l'exécution :

0
1
2
Lors du parcours d'un tableau, la variable i, qui est le compteur de boucle, est l'index de l'élément actuel du tableau
Cas 2 :
Cependant, il semble que la boucle for.. in soit très utile maintenant. Cependant, ne vous réjouissez pas trop tôt. Jetez un œil à l'exemple suivant :

var array =["admin","manager","db"]; 
//给Array的原型添加一个name属性 
Array.prototype.name= "zhangsan"; 
for(var i in array){ 
alert(array[i]); 
}
Copier après la connexion
Résultat de l'exécution :

admin
manager
db
zhangsan
Hé, c'est une merveille, comment se fait-il que zhangsan apparaisse sans raison
Maintenant, voyons voir que se passe-t-il lors de l'utilisation d'une boucle for ?

vararray = ["admin","manager","db"]; 
//给Array的原型添加一个name属性 
Array.prototype.name = "zhangsan"; 
for(var i =0 ; i<array.length; i++){ 
alert(array[i]); 
};
Copier après la connexion
Résultat d'exécution :

admin
manager
db
Oh, maintenant je comprends, la boucle for..in ajoutera des méthodes au prototype d'un certain type avec les propriétés étant itérées, cela peut donc provoquer des erreurs inattendues dans votre code. Afin d'éviter ce problème, nous pouvons utiliser la méthode hasOwnProperty() de l'objet pour éviter ce problème. Si les propriétés ou les méthodes de l'objet ne sont pas héritées, alors la méthode hasOwnProperty() renvoie true. Autrement dit, la vérification ici n'implique pas les propriétés et méthodes héritées d'autres objets, mais uniquement les propriétés créées directement dans l'objet spécifique lui-même.
Cas 3 :

vararray = ["admin","manager","db"]; 
Array.prototype.name= "zhangshan"; 
for(vari in array){ 
//如果不是该对象自身直接创建的属性(也就是该属//性是原型中的属性),则跳过显示 
if(!array.hasOwnProperty(i)){ 
continue; 
} 
alert(array[i]); 
}
Copier après la connexion
Résultat de l'exécution :

admin
manager
db
Tout est à nouveau intact.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal