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

Mastering ou Opérateur en no JavaScript

Mary-Kate Olsen
Libérer: 2024-10-16 22:43:30
original
886 Les gens l'ont consulté

Dominando o Operador in no JavaScript

Découvrez comment vérifier les propriétés d'un objet

Si vous programmez en JavaScript, vous avez peut-être rencontré des situations où vous aviez besoin de savoir si une certaine propriété existe dans un objet, et c'est là que l'opérateur in entre en jeu. Je vais vous montrer comment cela fonctionne, comment l'utiliser et pourquoi il peut être plus efficace que d'autres moyens de vérifier les propriétés d'un objet.

Qu'est-ce que l'opérateur in ?

L'opérateur in est utilisé en JavaScript pour vérifier si une propriété existe sur un objet. Ce qui est cool, c'est qu'il vérifie non seulement les propriétés directement définies dans l'objet, mais aussi celles héritées des prototypes.

La syntaxe est très simple :

'propriedade' in objeto;
Copier après la connexion

Si la propriété existe, elle renvoie vrai et si elle n'existe pas, faux. Cela semble simple, non ? Mais son utilité va au-delà d’un simple contrôle. Souhaitez-vous voir quelques exemples ?

Exemple 1 : Propriété directe de l'objet

Pour commencer, voyons un exemple de base d'utilisation de l'opérateur in pour vérifier une propriété directe.

const carro = {
  marca: 'Toyota',
  ano: 2020
};

console.log('marca' in carro);  // true
console.log('modelo' in carro);  // false
Copier après la connexion

Ici, nous avons un objet automobile avec les propriétés de la marque et de l'année. Lorsque nous utilisons « marque » dans voiture, le résultat est vrai, car la propriété de marque existe directement dans l'objet. 'model' dans carro renvoie false, puisque cette propriété n'a pas été définie.

Ce type de vérification est idéal pour éviter les erreurs lorsque vous essayez d'accéder à des propriétés qui n'existent pas. Avez-vous déjà essayé d'accéder à une propriété inexistante et brisé le code ? Moi déjà ! ?

Exemple 2 : Propriétés héritées du prototype

Maintenant, regardez comment l'opérateur in détecte également les propriétés héritées du prototype

const pessoa = {
  nome: 'Ana'
};

console.log('toString' in pessoa);  // true
Copier après la connexion

Dans ce cas, l'objet personne n'a pas directement la propriété toString, mais cette fonction est héritée de Object.prototype. L'opérateur in peut voir cela et renvoie vrai.

Pourquoi est-ce utile ?

Parfois, vous souhaiterez peut-être vérifier si une fonctionnalité héritée est disponible dans l'objet. Cela peut vous sauver dans certaines situations plus complexes.

Exemple 3 : comparaison avec hasOwnProperty

Faisons maintenant une comparaison avec une autre façon de vérifier les propriétés, la méthode hasOwnProperty. Il vérifie uniquement si la propriété a été définie directement sur l'objet, en ignorant celles héritées.

const pessoa = {
  nome: 'Ana'
};
console.log(pessoa.hasOwnProperty('toString'));  // false
console.log('toString' in pessoa);               // true
Copier après la connexion

La méthode hasOwnProperty renvoie false pour toString, car cette propriété n'est pas directement sur l'objet personne. Pendant ce temps, l'opérateur in renvoie vrai, car il prend également en compte les propriétés héritées.

Quand utiliser ine, quand utiliser hasOwnProperty ?

La réponse est la plus évoquée lorsqu'on demande quoi que ce soit à un développeur senior, ça dépend.

  • Utilisez dans si vous souhaitez vérifier une propriété, qu'elle soit directe ou héritée.
  • Utilisez hasOwnProperty si vous devez vous assurer que la propriété a été définie directement sur l'objet, en ignorant celles héritées du prototype. L'opérateur in est bien plus pratique lorsqu'on n'a pas à se soucier de l'origine du bien, mais les deux ont leur place dans la cour de récréation donc il suffit de savoir à quel endroit et dans quel but on en a besoin.

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!

source:dev.to
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal