Maison > interface Web > js tutoriel > Maîtriser les objets en JavaScript

Maîtriser les objets en JavaScript

Susan Sarandon
Libérer: 2024-12-25 09:11:56
original
675 Les gens l'ont consulté

Mastering Objects in JavaScript

Objets en JavaScript

En JavaScript, les objets sont des collections de paires clé-valeur où les valeurs peuvent être des données (propriétés) ou des fonctions (méthodes). Les objets sont fondamentaux pour JavaScript, car presque tout dans JavaScript est un objet, y compris les tableaux, les fonctions et même d'autres objets.


1. Créer des objets

A. Objet littéral

La façon la plus simple de créer un objet consiste à utiliser des accolades {}.

Exemple :

const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!
Copier après la connexion
Copier après la connexion

B. Constructeur d'objet

L'utilisation du constructeur Object crée un objet vide.

Exemple :

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!
Copier après la connexion
Copier après la connexion

C. Utilisation d'Object.create()

Cette méthode crée un nouvel objet avec le prototype spécifié.

Exemple :

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!
Copier après la connexion
Copier après la connexion

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

A. Notation par points

Accédez aux propriétés à l'aide d'un point (.).

Exemple :

console.log(person.name); // Output: Alice
Copier après la connexion
Copier après la connexion

B. Notation entre parenthèses

Accédez aux propriétés à l'aide de crochets ([]). Utile pour les noms de propriétés dynamiques.

Exemple :

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25
Copier après la connexion
Copier après la connexion

3. Ajout, modification et suppression de propriétés

  • Ajout :
person.country = "USA";
console.log(person.country); // Output: USA
Copier après la connexion
  • Modification :
person.age = 26;
console.log(person.age); // Output: 26
Copier après la connexion
  • Suppression :
delete person.age;
console.log(person.age); // Output: undefined
Copier après la connexion

4. Méthodes dans les objets

Lorsqu'une fonction est une propriété d'un objet, on l'appelle une méthode.

Exemple :

const car = {
  brand: "Tesla",
  start: function () {
    console.log("Car started!");
  },
};

car.start(); // Output: Car started!
Copier après la connexion

5. Itération sur les propriétés de l'objet

A. Utiliser pour...dans

Parcourir toutes les propriétés énumérables d'un objet.

Exemple :

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
Copier après la connexion

B. Utilisation d'Object.keys()

Renvoie un tableau des clés d'un objet.

Exemple :

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});
Copier après la connexion

C. Utilisation d'Object.entries()

Renvoie un tableau de paires [clé, valeur].

Exemple :

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
Copier après la connexion

6. Méthodes d'objet

JavaScript fournit plusieurs méthodes intégrées pour travailler avec des objets.

  • Object.assign() : Copie les propriétés d'un objet à un autre.
const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!
Copier après la connexion
Copier après la connexion
  • Object.freeze() : Empêche la modification d'un objet.
const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!
Copier après la connexion
Copier après la connexion
  • Object.seal() : empêche l'ajout ou la suppression de propriétés mais permet la modification des propriétés existantes.
const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!
Copier après la connexion
Copier après la connexion

7. Prototypes et Héritage

Les objets en JavaScript ont un prototype, qui est un autre objet dont ils héritent des propriétés et des méthodes.

Exemple :

console.log(person.name); // Output: Alice
Copier après la connexion
Copier après la connexion

8. Déstructuration d'objets

La déstructuration permet d'extraire les propriétés d'un objet vers des variables.

Exemple :

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25
Copier après la connexion
Copier après la connexion

9. Résumé

  • Les objets sont des paires clé-valeur qui peuvent stocker des propriétés et des méthodes.
  • Utilisez des littéraux d'objet pour une création d'objet simple.
  • Accédez aux propriétés de l'objet en utilisant la notation par points ou par crochets.
  • Utilisez des méthodes intégrées telles que Object.keys(), Object.assign() et Object.freeze() pour une manipulation efficace des objets.
  • La maîtrise des objets est cruciale pour comprendre les concepts JavaScript avancés tels que les prototypes et l'héritage.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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