Liste des propriétés d'objet en JavaScript

1. Répertorier les propriétés d’un objet à l’aide de la boucle for...in en JavaScript
2. Lister les propriétés d’un objet à l’aide de la fonction Object.keys() en JavaScript
3. Lister les propriétés d’un objet avec Object.getOwnPropertyNames() en JavaScript

JavaScript fournit diverses méthodes pour travailler avec des objets comme Object.values() et Object.prototype.valueOf() pour travailler avec des valeurs d’objet, Object.keys() et Object.prototype.hasOwnProperty() pour travailler avec des clés d’objet.

L’utilisateur peut effectuer n’importe quelle action sur les clés et les propriétés de l’objet. Ce didacticiel explique comment répertorier les propriétés d’un objet à l’aide de la boucle for...in, Object.getOwnPropertyNames() et de la fonction Object.keys() en JavaScript.

Répertorier les propriétés d’un objet à l’aide de la boucle for...in en JavaScript

Pour lister les propriétés d’un objet, vous pouvez utiliser la boucle for...in en JavaScript. La boucle for...in itère sur les propriétés énumérables d’un objet.

Il s’agit des propriétés d’un objet dont le drapeau enumerable vaut true. Cela inclut les propriétés énumérables héritées. Cependant, cette boucle ignore les propriétés non énumérables dont le drapeau enumerable est défini sur faux.

Par exemple, créons un objet avec trois propriétés et listons-le en utilisant la boucle for...in. Voir le code ci-dessous.

Syntaxe:

for (variable in object) {
  statement
}

Cette fonction itère object et la variable se voit attribuer un nom de propriété différent à chaque itération. Cette méthode extrait uniquement les propriétés énumérables d’un object.

Pour plus d’informations, en savoir plus sur la méthode for...in.

const inputObject = {
  id: 42,
  name: 'John Doe',
  address: {city: 'Mumbai', country: 'India'}
};
for (const property in inputObject) {
  console.log(property);
}

Dans l’exemple de bloc de code ci-dessus, nous avons défini trois propriétés d’un objet id, name et address. Lorsque vous itérez le inputObject, toutes les propriétés du inputObject sont vérifiées.

La sortie du bloc de code ci-dessus ressemblera à celle illustrée ci-dessous.

Production :

id
name
address

Lister les propriétés d’un objet à l’aide de la fonction Object.keys() en JavaScript

Il s’agit d’une méthode intégrée fournie par JavaScript qui est utilisée pour extraire les propriétés ou les clés d’un objet. Il itère l’objet et renvoie un tableau de propriétés énumérables.

Les propriétés non énumérables sont des propriétés d’objets qui n’apparaissent pas dans la boucle lorsque l’objet respectif est passé avec Object.keys() ou for ...in dans la boucle.

Syntaxe:

Object.keys(object);

Cette fonction prend un object en entrée, et c’est un paramètre obligatoire. Cette méthode extrait uniquement les propriétés énumérables d’un object.

Pour plus d’informations, en savoir plus sur la méthode keys.

const inputObject = {
  id: 42,
  name: 'John Doe',
  address: {city: 'Mumbai', country: 'India'}
};

Object.defineProperty(
    inputObject, 'salary', {value: '30,000$', enumerable: false})

console.log(Object.keys(inputObject));

Dans l’exemple précédent, nous avons défini trois propriétés d’un objet ID, name et address. Lorsque vous passez inputObject, toutes les propriétés de inputObject sont vérifiées.

La sortie du bloc de code ci-dessus ressemblera à celle illustrée ci-dessous.

Production :

["id", "name", "address"]

Lister les propriétés d’un objet avec Object.getOwnPropertyNames() en JavaScript

Il s’agit d’une méthode intégrée fournie par JavaScript utilisée pour extraire les propriétés ou les clés d’un objet. Il itère l’objet et renvoie un tableau de propriétés, y compris des propriétés non énumérables.

Syntaxe:

Object.getOwnPropertyNames(object);

Cette fonction prend un paramètre obligatoire objet en entrée. Cette méthode extrait uniquement les propriétés énumérables et non énumérables d’un Objet et non les valeurs.

Pour plus d’informations, en savoir plus sur la méthode getOwnPropertyNames.

La principale différence entre getOwnPropertyNames() et Object.keys() est que getOwnPropertyName() renvoie à la fois les propriétés énumérables et non énumérables. Alors que Object.keys() ne renvoie que des clés énumérables.

Les propriétés non énumérables peuvent être créées à l’aide de Object.defineProperty. Un indicateur enumerable est défini sur true lorsque l’initialiseur de propriété initialise les propriétés.

Vous pouvez utiliser la méthode propertyIsEnumerable() pour vérifier si un objet contient des propriétés énumérables ou non énumérables.

const inputObject = {
  id: 42,
  name: 'John Doe',
  address: {city: 'Mumbai', country: 'India'}
};

Object.defineProperty(
    inputObject, 'salary', {value: '30,000$', enumerable: false})

console.log(Object.getOwnPropertyNames(inputObject));

Dans l’exemple précédent, nous avons défini trois propriétés d’un objet ID, name et address. Lorsque vous passez inputObject, toutes les propriétés et les propriétés non énumérables de inputObject sont vérifiées.

La sortie du bloc de code ci-dessus ressemblera à celle illustrée ci-dessous.

Production :

["id", "name", "address", "salary"]