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

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); 
}

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); 
}

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]); 
}

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]); 
};

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]); 
}

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!