TOC

Comment utiliser les méthodes d’objet en JavaScript

introduction

Objects en JavaScript sont des collections de paireskey /value. Les valeurs peuvent être constituées deproperties etmethods, et peuvent contenir tous les autres types de données JavaScript, tels que des chaînes, des nombres et des booléens.

Tous les objets en JavaScript descendent du constructeur parentObject. Object possède de nombreuses méthodes intégrées utiles que nous pouvons utiliser et accéder pour simplifier le travail avec des objets individuels. Contrairement àArray prototype methods commesort() etreverse() qui sont utilisés sur l'instance de tableau, les méthodes Object sont utilisées directement sur le constructeurObject et utilisent l'instance d'objet comme paramètre. Ceci est connu comme une méthode statique.

Ce didacticiel présente d'importantes méthodes d'objet intégrées. Chaque section ci-dessous traite d'une méthode spécifique et fournit un exemple d'utilisation.

Conditions préalables

Pour tirer le meilleur parti de ce didacticiel, vous devez être familiarisé avec la création, la modification et l'utilisation des objets, que vous pouvez consulter dans la section «https://www.digitalocean.com/community/tutorials/understanding-objects- in-javascript [Comprendre les objets en JavaScript] ».

Pour obtenir des conseils supplémentaires sur JavaScript en général, vous pouvez consulter notre sérieHow To Code in JavaScript.

Object.create()

La méthodeObject.create() est utilisée pour créer un nouvel objet et le lier au prototype d'un objet existant.

Nous pouvons créer une instance d'objetjob et l'étendre à un objet plus spécifique. 

// Initialize an object with properties and methods
const job = {
    position: 'cashier',
    type: 'hourly',
    isAvailable: true,
    showDetails() {
        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
    }
};

// Use Object.create to pass properties
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();
OutputThe barista position is hourly and is accepting applications.

L'objetbarista a maintenant une propriété -position - mais toutes les autres propriétés et méthodes dejob sont disponibles via le prototype. Object.create() est utile pour conserver le codeDRY en minimisant la duplication.

Object.keys()

Object.keys() crée un tableau contenant les clés d'un objet.

Nous pouvons créer un objet et imprimer le tableau de clés. 

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);
Output["boss", "secretary", "sales", "accountant"]

Object.keys peut être utilisé pour parcourir les clés et les valeurs d'un objet. 

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});
Outputboss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

Object.keys est également utile pour vérifier la longueur d'un objet. 

// Get the length of the keys
const length = Object.keys(employees).length;

console.log(length);
Output4

En utilisant la propriétélength, nous avons pu compter les propriétés4 deemployees.

Object.values()

Object.values() crée un tableau contenant les valeurs d'un objet. 

// Initialize an object
const session = {
    id: 1,
    time: `26-July-2018`,
    device: 'mobile',
    browser: 'Chrome'
};

// Get all values of the object
const values = Object.values(session);

console.log(values);
Output[1, "26-July-2018", "mobile", "Chrome"]

Object.keys() etObject.values() vous permettent de renvoyer les données d'un objet.

Object.entries()

Object.entries() crée un tableau imbriqué des paires clé / valeur d'un objet. 

// Initialize an object
const operatingSystem = {
    name: 'Ubuntu',
    version: 18.04,
    license: 'Open Source'
};

// Get the object key/value pairs
const entries = Object.entries(operatingSystem);

console.log(entries);
Output[
    ["name", "Ubuntu"]
    ["version", 18.04]
    ["license", "Open Source"]
]

Une fois que nous avons les tableaux de paires clé / valeur, nous pouvons utiliser la méthodeforEach() pour faire une boucle et travailler avec les résultats. 

// Loop through the results
entries.forEach(entry => {
    let key = entry[0];
    let value = entry[1];

    console.log(`${key}: ${value}`);
});
Outputname: Ubuntu
version: 18.04
license: Open Source

La méthodeObject.entries() ne renverra que les propres propriétés de l’instance d’objet, et non les propriétés qui pourraient être héritées via son prototype.

Object.assign()

Object.assign() est utilisé pour copier des valeurs d'un objet à un autre.

Nous pouvons créer deux objets et les fusionner avecObject.assign(). 

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the objects
const character = Object.assign(name, details);

console.log(character);
Output{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Il est également possible d'utiliser l'opérateur d'étalement (...) pour accomplir la même tâche. Dans le code ci-dessous, nous allons modifier la façon dont nous déclaronscharacter en fusionnant les objetsname etdetails. 

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the object with the spread operator
const character = {...name, ...details}

console.log(character);
Output{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Cespread syntax dans les objets littéraux est également connu sous le nom de clonage superficiel.

Object.freeze()

Object.freeze() empêche la modification des propriétés et des valeurs d'un objet et empêche l'ajout ou la suppression de propriétés d'un objet. 

// Initialize an object
const user = {
    username: 'AzureDiamond',
    password: 'hunter2'
};

// Freeze the object
const newUser = Object.freeze(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);
Output{username: "AzureDiamond", password: "hunter2"}

Dans l'exemple ci-dessus, nous avons essayé de remplacer le mot de passehunter2 par*******, mais la propriétépassword est restée la même. Nous avons également essayé d'ajouter une nouvelle propriété,active, mais elle n'a pas été ajoutée.

Object.isFrozen() est disponible pour déterminer si un objet a été gelé ou non, et renvoie une valeur booléenne.

Object.seal()

Object.seal() empêche l'ajout de nouvelles propriétés à un objet, mais permet la modification des propriétés existantes. Cette méthode est similaire àObject.freeze(). Actualisez votre console avant d'implémenter le code ci-dessous pour éviter une erreur. 

// Initialize an object
const user = {
    username: 'AzureDiamond',
    password: 'hunter2'
};

// Seal the object
const newUser = Object.seal(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);
Output{username: "AzureDiamond", password: "*******"}

La nouvelle propriétéactive n'a pas été ajoutée à l'objet scellé, mais la propriétépassword a été modifiée avec succès.

Object.getPrototypeOf()

Object.getPrototypeOf() est utilisé pour obtenir les[[Prototype]] internes cachés d'un objet, également accessibles via la propriété__proto__.

Dans cet exemple, nous pouvons créer un tableau, qui a accès au prototypeArray. 

const employees = ['Ron', 'April', 'Andy', 'Leslie'];

Object.getPrototypeOf(employees);
Output[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

Nous pouvons voir dans la sortie que le prototype du tableauemployees a accès àpop,find et à d'autres méthodes de prototype Array. Nous pouvons le confirmer en testant le prototypeemployees contreArray.prototype. 

Object.getPrototypeOf(employees) === Array.prototype;
Outputtrue

Cette méthode peut être utile pour obtenir plus d'informations sur un objet ou pour vous assurer qu'il a accès au prototype d'un autre objet.

Il existe également une méthodeObject.setPrototypeOf() associée qui ajoutera un prototype à un autre objet. Il est recommandé d'utiliserObject.create() à la place car il est plus rapide et plus performant.

Conclusion

Les objets ont de nombreuses méthodes utiles qui nous aident à les modifier, à les protéger et à les parcourir. Dans ce didacticiel, nous avons expliqué comment créer et affecter de nouveaux objets, effectuer une itération à l'aide des clés et / ou des valeurs d'un objet et figer ou sceller un objet.

Si vous devez passer en revue les objets JavaScript, vous pouvez lire «https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript[Comprendre les objets en JavaScript].» Si vous souhaitez vous familiariser avec le prototype chaîne, vous pouvez consulter «https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript[Comprendre les prototypes et l'héritage en JavaScript].»

Related