[Chaque percée] Comment déterminer si une propriété existe en JavaScript

Préface

Dans le développement JavaScript, nous devons souvent déterminer si une propriété existe dans un objet.
JavaScript étant un langage relativement souple, il nous est difficile de faire quelque chose de plus strict. Par exemple, il y a un problème dans la définition de « si un attribut existe » en JavaScript. Quand existe-t-il et quand est-il considéré comme inexistant ? Il n’y a pas de bonne ou de mauvaise réponse, mais selon les contextes et les besoins de développement, le sens du mot « existence » est différent.
Ici, je vais parler des cinq méthodes de jugement couramment utilisées et de leurs problèmes.

Méthode 1 : jugement booléen

Voici un exemple :

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1.age ? '存在' : '不存在' ); // 存在
console.log( obj2.age ? '存在' : '不存在' ); // 不存在

Parlons d’abord des inconvénients de cette méthode
Si :

const obj = { name: 'Baby', age: 0 }

console.log( obj.age ? '存在' : '不存在' ); // 不存在

Dans ce cas, l'âge devrait "exister", mais il sera jugé comme "n'existe pas".

Cette méthode ne peut donc pas être utilisée ?
Cela dépend des besoins de développement de l'entreprise.
Si vous savez que dans vos exigences de développement commercial, cet attribut ne peut pas être 0, chaîne vide, NaN, non défini, etc., alors ce jugement est toujours réalisable.
Si vous la placez dans un environnement plus strict, cette méthode aura des défauts.

Méthode 2 : chaînage facultatif (?.) et vérifications non définies

Donnons d’abord un exemple :

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1?.age !== undefined ? '存在' : '不存在' ); // 存在
console.log( obj2?.age !== undefined ? '存在' : '不存在' ); // 不存在

La logique de cette comparaison est qu'en langage JS, une valeur qui n'existe pas est indéfinie.

Mais dans un objet, cette situation peut également se produire :

const obj = {
    name: 'Andy',
    age: undefined
}

Dans ce cas, l'attribut age doit-il être « existe » ou « n'existe pas » ?

C'est difficile à dire, cela dépend toujours de votre environnement de demande spécifique.

Méthode 3 : Rechercher Object.keys()

Si je dis, j'ai besoin de savoir s'il y a un attribut d'âge dans un objet, peu m'importe quelle est sa valeur.

On peut utiliser cette méthode :

const obj = { name: 'Andy', age: 21 }

console.log( Object.keys(obj).includes('age') ? '存在' : '不存在' ); // 存在

Utilisez Object.keys() pour obtenir son propre nom de propriété énumérable à des fins de jugement.

Il y a deux mots-clés ici, l'un est « propre » et l'autre est « énumérable ».

Parlons d’abord de ce qu’est le « soi »

Par exemple, il y a un objet ici. Ajoutez un nom d'attribut à l'objet :

const obj = { name: 'Andy' }
// `name` 就是 obj 自身的属性
console.log( Object.keys(obj) ); // [ 'name' ]

Alors, qu'est-ce qui n'est pas un attribut en soi ? C’est là qu’intervient le « prototype ». Un objet possède un prototype et les attributs ajoutés au prototype ne sont pas « ses propres » attributs.

const obj = Object.create( { type: 'human' } );
obj.name = 'Andy';

console.log( obj.name ); // Andy
console.log( obj.type ); // human
console.log( Object.keys(obj) ); // [ 'name' ]

Dans cet exemple, comment déterminer si le type est un attribut d'obj ? C'est difficile à dire, n'est-ce pas ? Vous pouvez dire oui ou non. C'est le problème causé par l'environnement linguistique détendu.

Mais ce que vous devez savoir, c'est que dans ce cas, Object.keys() ne peut pas obtenir les propriétés du prototype. Parce qu’il ne peut lire que « ses propres » propriétés.

Le deuxième est « énumérable »

Les descripteurs d'attributs sont mentionnés ici. Beaucoup de mes collègues ne savent pas qu'en langage JS, dans un objet, chaque attribut a un descripteur.
Comment le lire ? Imprimons-le et jetons un oeil :

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1.age ? '存在' : '不存在' ); // 存在
console.log( obj2.age ? '存在' : '不存在' ); // 不存在

Vous constaterez que ce descripteur est en fait un objet, qui décrit certaines informations sur cet attribut, telles que la valeur, inscriptible, et ceci (énumérable) énumérable ...

Cet énumérable définit cet attribut et s'il peut être énuméré. Par exemple, cet attribut peut être lu pendant la boucle for...in, et il en va de même pour Object.keys().

Si je redéfinis une propriété comme non énumérable, alors Object.keys() ne peut pas lire cette propriété.

const obj = { name: 'Baby', age: 0 }

console.log( obj.age ? '存在' : '不存在' ); // 不存在

Cela implique des connaissances sur les descripteurs d'attributs. Il s'agit d'une connaissance très importante du langage JS natif, et je trouve que de nombreux programmeurs front-end que je connais n'ont pas cette connaissance du JS natif.

Et si l'attribut que vous souhaitez juger doit uniquement être son propre attribut, qu'il soit énumérable ou non ? Ensuite, vous ne pouvez pas utiliser Object.keys(). Vous pouvez utiliser la méthode suivante.

Méthode 4 : utilisez Object.hasOwn() ou hasOwnProperty()

Quelle est la différence entre Object.hasOwn() et hasOwnProperty() ?

Object.hasOwn() est une méthode ajoutée dans ES2022, qui est utilisée pour vérifier si l'objet lui-même possède une certaine propriété et est utilisée pour remplacer le traitement d'optimisation de hasOwnProperty. Cette méthode ayant été ajoutée ultérieurement, la compatibilité reste un problème si l’on considère uniquement les nouvelles versions des navigateurs, elle peut toujours être utilisée.

Ces deux méthodes déterminent le nom de l'attribut "propre" , afin qu'il puisse être lu indépendamment du fait qu'il soit énumérable ou non.

const obj1 = { name: 'Andy', age: 21 }
const obj2 = { name: 'Alice' }

console.log( obj1?.age !== undefined ? '存在' : '不存在' ); // 存在
console.log( obj2?.age !== undefined ? '存在' : '不存在' ); // 不存在

Pourquoi utiliser Object.hasOwn(), car la hasOwnProperty() de l'objet peut être modifiée :

const obj = {
    name: 'Andy',
    age: undefined
}

Si le nom d'attribut que vous souhaitez juger n'a pas besoin d'être propre et énumérable, un prototype est également acceptable, alors la dernière méthode doit être utilisée.

Méthode 5 : en opérateur

L'opérateur

in est utilisé pour déterminer si une propriété existe dans l'objet ou dans sa chaîne de prototypes.

const obj = { name: 'Andy', age: 21 }

console.log( Object.keys(obj).includes('age') ? '存在' : '不存在' ); // 存在

Résumer

Ces méthodes ne disent pas quelle méthode est correcte ou laquelle est fausse. Tous les scénarios ne conviennent pas à la même approche. Adhérez aux meilleures pratiques en fonction de la situation pour améliorer la lisibilité et la sécurité du code.

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!