Partie 2 / Blogs / Perficient

Plongez avec nous dans le monde fascinant des objets JavaScript ! Nous allons explorer des méthodes et astuces intéressantes qui peuvent améliorer encore davantage vos compétences en codage. Si vous débutez avec les objets en JavaScript, pas de stress ! Notre guide, « La puissance des objets en Javascript : partie 1 » est là pour vous aider. Il décrit à la fois les bases et certains éléments avancés, alors consultez le blog pour découvrir en douceur le fonctionnement des objets en JavaScript. Allez-y et jetez un oeil ici!

Méthodes intégrées aux objets

Les méthodes intégrées sont des fonctions déjà présentes dans le langage JavaScript et peuvent être appliquées directement aux objets. Ces méthodes sont intégrées à des types de données ou à des objets et fournissent des fonctionnalités communes. Voici un aperçu rapide avec des exemples détaillés de diverses méthodes intégrées pour les objets.

La méthode renvoie une liste de tableaux contenant tous les attributs énumérables d’un objet.

Exemple:

//JavaScript
const myObject1 = { 
  firstName: "Percy" ,
  lastName: "Jackson",
  age: 18,
};
let keys = Object.keys(myObject1);
console.log(keys);

Sortir:

Exemple:

//JavaScript
const myObject1 = { 
  firstName: "Percy" ,
  lastName: "Jackson",
  age: 18,
};
let values = Object.values(myObject1);
console.log(values);

Sortir:

Une liste de tableaux de clés et de valeurs pour les propriétés d’un objet est renvoyée à l’aide de cette méthode.

Exemple:

//JavaScript
const myObject1 = { 
  firstName: "Percy" ,
  lastName: "Jackson",
  age: 18,
};
let entries = Object.entries(myObject1);
console.log(entries);

Sortir:

Toutes les propriétés d’un ou plusieurs objets source sont copiées vers l’objet cible par cette méthode.
Exemple:

//JavaScript
const myObject1 = { 
  firstName: "Percy" ,
  lastName: "Jackson",
  age: 18,
};

const myObject2 = { 
 hobby: 'reading',
 power: 'lighting'
};
let mergedObjects = Object.assign({} ,myObject1,myObject2);
console.log(mergedObjects);

Sortir:

Cette méthode vérifie si un objet possède une propriété spécifique comme sa propre propriété, en renvoyant un booléen.

Exemple:

//JavaScript
const myObject1 = { 
  firstName: "Percy" ,
  lastName: "Jackson",
  age: 18,
};

console.log(myObject1.hasOwnProperty('firstName'));
console.log(myObject1.hasOwnProperty('hobby'));

Sortir:

Le gel d’un objet empêche l’ajout de nouvelles propriétés, la suppression de propriétés existantes et la modification des valeurs via cette méthode.
Exemple:

//JavaScript
const myObject1 = { 
  firstName: "Percy" ,
  lastName: "Jackson",
  age: 18,
};

// Attempt to add a new property
Object.freeze(myObject1);
myObject1.hobby = 'travelling' // Ignored in strict mode
console.log(myObject1);

Sortir:

Cette méthode génère un objet à partir d’un tableau de paires clé-valeur.

Exemple:

//JavaScript
let entries = [['firstName', 'Harry'], ['lastName', 'Potter'], ['year', 2001]];
let Movie = Object.fromEntries(entries);

Sortir:

Boucles et objets : un duo dynamique

• entrées() avec forEach()

  La combinaison de Object.entries() avec forEach() peut être puissante pour parcourir des paires clé-valeur.

  Exemple:
  

  //JavaScript
  const myObject1 = { 
    firstName: "Percy" ,
    lastName: "Jackson",
    year: 2024,
  };
  Object.entries(myObject1).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });

  Sortir:
  

• ..en boucle

Exemple:

//JavaScript
const myObject2 = { 
  firstName: "Harry" ,
  lastName: "Potter",
  year: 2001,
};
for(const key in myObject2){
  console.log(`${key}: ${myObject2[key]}`);
}

Sortir:

Accesseurs : élever le contrôle avec les getters et les setters

Les accesseurs fournissent un moyen de contrôler l’accès aux propriétés des objets, garantissant une interaction plus rationalisée avec les données.

Obturateur :

La valeur d’une propriété est accessible à l’aide de la méthode getter. Il est représenté par le obtenir mot-clé.

Exemple:

//JavaScript
const person = {
  _name: 'Harry', // Using underscore convention to indicate a private property
  get name() {
    return this._name;
  }
};

console.log(person.name);

Dans cet exemple, le obtenir le nom() La méthode vous permet d’accéder à la valeur du _nom propriété sans y accéder directement.
Sortir:

Setter:

La valeur d’une propriété peut être modifiée à l’aide d’une méthode setter. Il est défini à l’aide de ensemble.

Exemple:

//JavaScript
const person = {
  _name: 'Harry',
  set name(newName) {
    this._name = newName;
  }
};

person.name="Nesta";
console.log(person._name);

Le définir le nom (nouveau nom) La méthode vous permet de définir une nouvelle valeur pour le _nom propriété utilisant la cession personne.nom = ‘Nesta’.

Sortir:

Les accesseurs sont utiles pour contrôler l’accès et la modification des propriétés des objets, fournissant un moyen d’encapsuler la logique et garantissant une gestion correcte des données.

Comment créer une copie d’un objet et ce qu’il ne faut pas faire lors de la création

En JavaScript, l’attribution d’un objet à une autre variable crée une référence à l’objet d’origine plutôt qu’une nouvelle copie. Cela signifie que toute modification apportée à la variable d’origine ou à la nouvelle variable affectera les deux objets. Pour créer des clones d’objets avec des attributs identiques à l’original, des méthodes doivent être utilisées. Explorons les deux scénarios :

Exemple:

//JavaScript
// Creating a reference to the original object
let originalObject = { key: 'value' };
let referenceObject = originalObject;

// Modifying the reference object
referenceObject.key = 'new value';

console.log(originalObject);

Dans ce cas, les deux Objetoriginal et Objet de référence pointez vers le même objet en mémoire, donc la modification de l’un se répercute sur l’autre.

Sortir:

Création d’une copie :

Exemple:

//JavaScript
// Creating a shallow copy using Object.assign()
let originalObject = { key: 'value' };
let copyObject = Object.assign({}, originalObject);

// Modifying the copy object
copyObject.key = 'new value';

console.log(originalObject);
console.log(copyObject);

Sortir:

• Utilisation de l’opérateur Spread (…)

Exemple:

Javascript
// Creating a shallow copy using the spread operator
let originalObject = { key: 'value' };
let copyObject = { ...originalObject };

// Modifying the copy object
copyObject.key = 'new value';

console.log(originalObject);
console.log(copyObject);

Sortir:

Les méthodes utilisant Objet.assign() et l’opérateur de diffusion (…) créer de nouveaux objets, en garantissant que les modifications apportées à la copie n’affectent pas l’objet d’origine. Gardez à l’esprit que ces méthodes créent des copies superficielles, ce qui signifie que les objets imbriqués seront toujours des références. Pour créer des copies complètes d’objets imbriqués, il faudra peut-être prendre en compte des considérations supplémentaires.

Conclusion

Les objets en JavaScript fournissent un mécanisme puissant pour structurer et organiser les données. En tirant parti de ses méthodes, les développeurs peuvent travailler efficacement avec des objets et créer un code plus maintenable et plus robuste. Au fur et à mesure que vous approfondirez le développement JavaScript, la maîtrise des objets et de leurs méthodes améliorera sans aucun doute votre capacité à créer des applications Web dynamiques et évolutives. Bon codage !