Comment la boucle « for...in » de JavaScript parcourt-elle les propriétés de l'objet et comment puis-je éviter les propriétés héritées ?

Itération dans les propriétés d'un objet

En JavaScript, l'itération dans les propriétés d'un objet se fait souvent à l'aide d'une boucle for...in. Cependant, il est important de comprendre comment fonctionne cette boucle.

Considérez le code suivant :

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

Ce code enregistre les propriétés de l'objet obj à l'aide de la variable propt. Mais comment propt connaît-il ces propriétés ?

Comprendre propt

La variable propt est une variable temporaire qui représente chaque clé de propriété dans l'objet obj. Lorsque la boucle s'exécute, elle parcourt les propriétés de l'objet, attribuant tour à tour chaque clé de propriété à propt.

En effet, la boucle for...in n'est pas une méthode ou une propriété intégrée. Il s'agit d'une construction de langage qui parcourt les propriétés énumérables d'un objet.

La vérification hasOwnProperty()

Cependant, il existe un problème potentiel avec cette approche. Par défaut, les boucles for...in parcourent également les propriétés héritées de la chaîne de prototypes de l'objet. Pour éviter cela, il est recommandé d'ajouter une vérification hasOwnProperty() à la boucle, telle que :

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

Cette vérification garantit que seules les propriétés spécifiques à l'objet obj sont incluses dans la boucle.

Alternativement, la méthode hasOwnProperty() peut être appelée directement sur l'objet :

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

Cette approche est plus sûre, surtout lorsque l'objet inclut des champs non liés portant le même nom que les propriétés intégrées.

Conclusion

En comprenant comment la boucle for...in parcourt les propriétés de l'objet et comment pour éviter les propriétés héritées, les programmeurs peuvent manipuler efficacement les données d'objet en JavaScript.

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!