TOC

Comprendre les objets en JavaScript

introduction

Unobject en JavaScript est undata type qui est composé d'une collection denames oukeys etvalues, représentés enname:value pairs. Les paires nom: valeur peuvent être constituées deproperties qui peuvent contenir n'importe quel type de données - y compris des chaînes, des nombres et des booléens - ainsi que desmethods, qui sont des fonctions contenues dans un objet.

Les objets en JavaScript sont des entités autonomes pouvant être assimilées à des objets dans la vie réelle. Par exemple, un livre peut être un objet que vous décririez par son titre, son auteur, son nombre de pages et son genre. De même, une voiture peut être un objet que vous décririez par sa couleur, sa marque, son modèle et sa puissance. JavaScriptarrays est également un type d'objet.

Les objets sont un aspect intégral et fondamental de la plupart des programmes JavaScript. Par exemple, un objet de compte d'utilisateur peut contenir des données telles que des noms d'utilisateur, des mots de passe et des adresses de messagerie. Un autre cas d’utilisation courant est le panier d’une plateforme d’achat en ligne qui peut être constitué d’un ensemble d’objets contenant toutes les informations pertinentes pour chaque article, telles que le nom, le prix et le poids des informations d’expédition. Une liste de tâches est une autre application courante pouvant consister en des objets.

Dans ce didacticiel, nous verrons comment créer un objet, quelles sont les propriétés et les méthodes de l’objet, et comment accéder aux propriétés de l’objet, en ajouter, en supprimer.

Créer un objet

Un objet est unJavaScript data type, tout comme un nombre ou une chaîne est également un type de données. En tant que type de données, un objet peut être contenu dans une variable.

Il existe deux manières de construire un objet en JavaScript:

  • Leobject literal, qui utilise des accolades:{}

  • Leobject constructor, qui utilise le mot-clénew

Nous pouvons créer un exemple d'objet vide en utilisant les deux méthodes à des fins de démonstration.

Tout d'abord, l'objet littéral. 

// Initialize object literal with curly brackets
const objectLiteral = {};

Le littéral d'objet initialise l'objet avec des accolades.

Dans cet exemple, nous allons utiliser le constructeur d’objet. 

// Initialize object constructor with new Object
const objectConstructor = new Object();

Les mêmes données ont été créées à l'aide de la méthode du constructeur d'objet qui est initialisée avecnew Object().

Ces deux approches créeront un objet vide. L'utilisation de littéraux d'objet est la méthode la plus courante et la plus recommandée, car elle présente moins de risque d'incohérences et de résultats inattendus.

Nous pouvons créer un exemple d'objet, contenu dans la variablegimli, pour décrire un caractère. 

// Initialize gimli object
const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

Notre nouvel objet estgimli, qui a trois propriétés. Chaque propriété se compose d'une pairename:value, également appelée pairekey:value. weapon est l'un des noms de propriété, qui est lié à la valeur de propriété"axe", une chaîne. Il a une méthode, avec un nom de méthode degreet et la valeur de méthode constituée du contenu de la fonction.

Dansgreet, vous remarquerez peut-être le mot cléthis. Lorsque vous utilisezthis à l'intérieur d'un objet, cela fait référence à l'objet courant, dans ce casgimli.

L'envoi degimli à la console imprimera l'objet entier. 

gimli;
Output{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

Le rendu de cette sortie peut être différent selon la console utilisée, mais vous devez remarquer que toutes les valeurs transmises à l'objet sont affichées dans la sortie.

Nous examinerons ensuite les propriétés et les méthodes d’un objet JavaScript.

Propriétés et méthodes

Les objets peuvent avoirproperties etmethods.

Une propriété est l'association entre un nom (clé) et une valeur dans un objet et peut contenir n'importe quel type de données. Une propriété fait généralement référence à la caractéristique d'un objet.

Une méthode est une fonction qui est la valeur d'une propriété d'objet, et donc une tâche qu'un objet peut effectuer.

Un moyen facile de se souvenir de la différence entre les propriétés d'objet et les méthodes consiste à considérer une propriété comme un nom et une méthode comme un verbe. name,race etweapon sont tous des noms associés à un objet et sont des propriétés. fight() outalk() sont des verbes qui peuvent être utilisés comme définition de fonction de méthode.

Accéder aux propriétés de l'objet

Il existe deux manières d’accéder aux propriétés d’un objet.

  • Notation par points:.

  • Notation entre parenthèses:[]

Revenons à notre exemple d'objet d'origine,gimli. 

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

Si nous voulons récupérer la valeur de propriété deweapon, nous pouvons le faire avec la notation de point d'objet en tapant le nom de variable de l'objet, suivi d'un point (.) et le nom de la propriété ou de la méthode. 

// Retrieve the value of the weapon property
gimli.weapon;
Output"axe"

gimli.weapon renvoie la valeur de la propriété, qui est"axe". Nous pouvons également récupérer les mêmes données avec la notation de support d'objet. Semblable à la façon dont vous pourriezindex and access a string, la syntaxe de la notation entre crochets est de deux crochets ([]) englobant le nom de la propriété. 

// Retrieve the value of the weapon property
gimli["weapon"];
Output"axe"

Les notations à points et à crochets sont utilisées régulièrement. La notation par points est plus rapide et plus lisible, mais a plus de limites. La notation entre crochets permet d’accéder aux noms de propriété stockés dans une variable et doit être utilisée si la propriété d’un objet contient une sorte de caractère spécial.

Afin de récupérer une méthode d'objet, vous l'appelleriez beaucoup de la même manière que vous appelleriez une fonction régulière, juste attachée à la variable d'objet. 

gimli.greet();
Output"Hi, my name is Gimli!"

Dans l'exemple ci-dessus, nous voyons que la valeur de chaîne pour la méthode d'objetgreet() est retournée.

Nous pouvons maintenant passer à la modification des propriétés des objets en ajoutant des paires nom: valeur ou en modifiant des paires existantes.

Ajout et modification des propriétés d'un objet

Afin d'ajouter une nouvelle propriété à un objet, vous affecteriez une nouvelle valeur à une propriété avec l'opérateur d'affectation (=).

Par exemple, nous pouvons ajouter un type de données numérique à l'objetgimli en tant que nouvelle propriétéage. Les notations point et crochet peuvent être utilisées pour ajouter une nouvelle propriété d'objet. 

// Add new age property to gimli
gimli.age = 139;
// Add new age property to gimli
gimli["age"] = 139;

Nous pouvons accéder à cette valeur comme ci-dessus, avec la notation point ou la notation entre crochets. 

gimli.age;
Output139

Une méthode peut également être ajoutée à l'objet en utilisant le même processus. 

// Add new fight method to gimli
gimli.fight = function() {
    return `Gimli attacks with an ${this.weapon}.`;
}

Une fois que nous avons créé cette nouvelle méthode d'objet, nous pouvons l'appeler comme nous l'avons fait ci-dessus. 

gimli.fight();
Output"Gimli attacks with an axe."

En utilisant la même méthode, il est possible de modifier la propriété d’un objet en attribuant une nouvelle valeur à une propriété existante. 

// Update weapon from axe to battle axe
gimli.weapon = "battle axe";

À ce stade, si nous appelons l'objet, nous verrons tous nos ajouts et modifications. 

gimli;
Output{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

Grâce à l'opération d'affectation, nous pouvons modifier les propriétés et les méthodes d'un objet JavaScript.

Supprimer des propriétés d'objet

Afin de supprimer une propriété d'un objet, vous utiliserez le mot-clédelete. delete est un opérateur qui supprime une propriété d'un objet.

Dans l'exemple ci-dessous, nous supprimerons la propriétéweapon degimli en utilisantdelete. 

// Remove weapon from gimli
delete gimli.weapon;
Outputtrue

L’opérationdelete s’évalue en tant quetrue si la propriété a été supprimée avec succès ou si elle a été utilisée sur une propriété qui n’existe pas.

Nous pouvons tester la sortie degimli pour voir si elle a réussi. 

gimli;
Output{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

Dans la sortie ci-dessus, le nom deweaponet sa valeur associée ne sont plus disponibles, ce qui montre que nous avons supprimé la propriété avec succès.

Dans la section suivante, nous verrons différentes méthodes pour parcourir les objets en JavaScript.

Boucle dans les propriétés d'un objet

JavaScript a un type intégré de bouclefor qui est spécifiquement destiné à itérer sur les propriétés d'un objet. Ceci est connu sous le nom de bouclefor...in.

Voici une version simplifiée de notre exemple d'objet principal,gimli. 

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "battle axe",
};

Nous pouvons utiliserfor...in pour parcourir toutes les propriétés degimli et les imprimer sur la console. En utilisant la notation entre crochets, nous pouvons récupérer la valeur de la propriété sous forme de variable, dans ce caskey. 

// Iterate through properties of gimli
for (let key in gimli) {
  console.log(gimli[key]);
}
OutputGimli
dwarf
battle axe

Nous pouvons également récupérer le nom de propriété lui-même en utilisant uniquement la première variable de la bouclefor...in. Nous avons utilisé une méthode de chaîne pourconvert the key values to upper case. 

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}
OutputNAME: Gimli
RACE: dwarf
WEAPON: battle axe

La bouclefor...in ne doit pas être confondue avec la bouclefor...of, qui est utilisée exclusivement sur le type d'objet Array. Pour en savoir plus sur l'itération dans les tableaux, consultez le didacticiel «https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript#looping-through-an-array[Inventer des tableaux en JavaScript].

Une autre méthode d’énumération utile est la méthodeObject.keys(), qui retournera un tableau des clés de l’objet. 

// Initialize method on gimli object to return property keys
Object.keys(gimli);
Output["name", "race", "weapon"]

Cette méthode nous permet de travailler avec les clés ou les noms d'un objet sous forme de tableau, de sorte que vous puissiez exploiter toutes les méthodes disponibles pour les tableaux JavaScript.

Conclusion

Les objets sont une fonctionnalité extrêmement utile et polyvalente du langage de programmation JavaScript. C’est l’une des principales composantes de l’écriture de code en JavaScript et un moyen pratique d’organiser les données et les fonctionnalités associées. Les listes de tâches, les paniers d'achat, les comptes d'utilisateurs et les emplacements sur une carte Web sont quelques-uns des nombreux exemples d'objets JavaScript réels que vous pourriez rencontrer.

Dans ce tutoriel, nous avons appris la différence entre les propriétés et les méthodes, comment créer des objets et comment ajouter, supprimer, modifier et parcourir en boucle les propriétés des objets. Pour en savoir plus sur les objets JavaScript, lisez surWorking with Objects sur le Mozilla Developer Network.

Related