Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Clonage et Fusion d'Objets avec l'Opérateur Spread | Techniques Avancées de Manipulation d'Objets
Structures de Données JavaScript

bookClonage et Fusion d'Objets avec l'Opérateur Spread

L'opérateur de propagation, noté ..., est un outil utile pour créer de nouveaux objets en fusionnant et en copiant les propriétés d'objets existants. Avec l'opérateur de propagation, il est possible d'effectuer les opérations suivantes :

  • Clonage d'objets ;
  • Ajout ou modification de propriétés ;
  • Création de nouveaux objets.

Examinons comment utiliser l'opérateur de propagation avec les objets.

Opérateur de propagation

L'opérateur de propagation (...) peut être utilisé dans divers contextes, mais l'un de ses usages les plus courants consiste à créer de nouveaux objets en étalant les propriétés d'objets existants.

Voici la syntaxe de base de l'opérateur de propagation utilisé pour la création d'objets :

const newObject = { ...sourceObject }; 
  • newObject : Le nouvel objet à créer ;
  • sourceObject : L'objet source dont on souhaite copier les propriétés.

Clonage d’un objet

Examinons comment cloner un objet. Nous allons créer un nouvel objet avec les mêmes propriétés et valeurs que l’objet source. Toute modification apportée au nouvel objet n’affecte pas l’objet d’origine.

const originalObject = {
  name: "Diamond Kite",
  color: "purple",
};

// Create a cloned object by spreading the original object
const clonedObject = { ...originalObject }; // Cloning with the help of the spread operator

// Add a new property to the cloned object
clonedObject.size = "large"; // Adding a new property to the cloned object

console.log(originalObject); // Output: {name: 'Diamond Kite', color: 'purple'}
console.log(clonedObject); // Output: {name: 'Diamond Kite', color: 'purple', size: 'large'}

Dans cet exemple, clonedObject est un nouvel objet qui est un clone de originalObject. Toute modification apportée à clonedObject n’affectera pas originalObject. Ainsi, clonedObject possède trois propriétés tandis que originalObject n’en possède que deux.

Ajout ou modification de propriétés

L’opérateur de propagation est également utile pour ajouter ou modifier des propriétés dans un nouvel objet. Il est possible d’inclure des propriétés supplémentaires ou d’écraser celles existantes dans le nouvel objet.

const waterBottle = {
  brand: "HydroFlask",
  capacity: 32,
};

const extendedWaterBottle = {
  ...waterBottle,
  color: "blue",
  capacity: 24,
};

console.log(waterBottle); // Output: {brand: 'HydroFlask', capacity: 32}
console.log(extendedWaterBottle); // Output: {brand: 'HydroFlask', capacity: 24, color: 'blue'}

Dans cet exemple, extendedWaterBottle est créé en étendant les propriétés de waterBottle. De plus, la propriété color est ajoutée et la propriété capacity est remplacée.

Fusion d’objets

L’opérateur de propagation peut être utilisé pour fusionner les propriétés de plusieurs objets dans un nouvel objet unique. Ceci est particulièrement utile lorsque plusieurs sources de données doivent être combinées.

const apartmentFeatures = {
  size: "1200 square feet",
  bedrooms: 2,
  bathrooms: 2,
};

const apartmentDetails = {
  rent: 2000,
  location: "Downtown City",
};

const apartment = { ...apartmentFeatures, ...apartmentDetails };
console.log(apartment); // Output: {size: '1200 square feet', bedrooms: 2, bathrooms: 2, rent: 2000, location: 'Downtown City'}

Dans cet exemple, apartment est créé en fusionnant les propriétés de apartmentFeatures et apartmentDetails.

1. Quel est le but de l'opérateur de propagation (...) ?

2. Quelle est la syntaxe pour utiliser l'opérateur de propagation afin de créer un nouvel objet en copiant les propriétés d'un objet existant ?

3. Dans l'exemple ci-dessous de fusion d'objets, que contient l'objet resultObj après utilisation de l'opérateur de propagation ?

question mark

Quel est le but de l'opérateur de propagation (...) ?

Select the correct answer

question mark

Quelle est la syntaxe pour utiliser l'opérateur de propagation afin de créer un nouvel objet en copiant les propriétés d'un objet existant ?

Select the correct answer

question mark

Dans l'exemple ci-dessous de fusion d'objets, que contient l'objet resultObj après utilisation de l'opérateur de propagation ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 5

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you explain how the spread operator works with arrays?

What happens if two objects have properties with the same name when merging?

Are there any limitations or caveats when using the spread operator with objects?

Awesome!

Completion rate improved to 2.27

bookClonage et Fusion d'Objets avec l'Opérateur Spread

Glissez pour afficher le menu

L'opérateur de propagation, noté ..., est un outil utile pour créer de nouveaux objets en fusionnant et en copiant les propriétés d'objets existants. Avec l'opérateur de propagation, il est possible d'effectuer les opérations suivantes :

  • Clonage d'objets ;
  • Ajout ou modification de propriétés ;
  • Création de nouveaux objets.

Examinons comment utiliser l'opérateur de propagation avec les objets.

Opérateur de propagation

L'opérateur de propagation (...) peut être utilisé dans divers contextes, mais l'un de ses usages les plus courants consiste à créer de nouveaux objets en étalant les propriétés d'objets existants.

Voici la syntaxe de base de l'opérateur de propagation utilisé pour la création d'objets :

const newObject = { ...sourceObject }; 
  • newObject : Le nouvel objet à créer ;
  • sourceObject : L'objet source dont on souhaite copier les propriétés.

Clonage d’un objet

Examinons comment cloner un objet. Nous allons créer un nouvel objet avec les mêmes propriétés et valeurs que l’objet source. Toute modification apportée au nouvel objet n’affecte pas l’objet d’origine.

const originalObject = {
  name: "Diamond Kite",
  color: "purple",
};

// Create a cloned object by spreading the original object
const clonedObject = { ...originalObject }; // Cloning with the help of the spread operator

// Add a new property to the cloned object
clonedObject.size = "large"; // Adding a new property to the cloned object

console.log(originalObject); // Output: {name: 'Diamond Kite', color: 'purple'}
console.log(clonedObject); // Output: {name: 'Diamond Kite', color: 'purple', size: 'large'}

Dans cet exemple, clonedObject est un nouvel objet qui est un clone de originalObject. Toute modification apportée à clonedObject n’affectera pas originalObject. Ainsi, clonedObject possède trois propriétés tandis que originalObject n’en possède que deux.

Ajout ou modification de propriétés

L’opérateur de propagation est également utile pour ajouter ou modifier des propriétés dans un nouvel objet. Il est possible d’inclure des propriétés supplémentaires ou d’écraser celles existantes dans le nouvel objet.

const waterBottle = {
  brand: "HydroFlask",
  capacity: 32,
};

const extendedWaterBottle = {
  ...waterBottle,
  color: "blue",
  capacity: 24,
};

console.log(waterBottle); // Output: {brand: 'HydroFlask', capacity: 32}
console.log(extendedWaterBottle); // Output: {brand: 'HydroFlask', capacity: 24, color: 'blue'}

Dans cet exemple, extendedWaterBottle est créé en étendant les propriétés de waterBottle. De plus, la propriété color est ajoutée et la propriété capacity est remplacée.

Fusion d’objets

L’opérateur de propagation peut être utilisé pour fusionner les propriétés de plusieurs objets dans un nouvel objet unique. Ceci est particulièrement utile lorsque plusieurs sources de données doivent être combinées.

const apartmentFeatures = {
  size: "1200 square feet",
  bedrooms: 2,
  bathrooms: 2,
};

const apartmentDetails = {
  rent: 2000,
  location: "Downtown City",
};

const apartment = { ...apartmentFeatures, ...apartmentDetails };
console.log(apartment); // Output: {size: '1200 square feet', bedrooms: 2, bathrooms: 2, rent: 2000, location: 'Downtown City'}

Dans cet exemple, apartment est créé en fusionnant les propriétés de apartmentFeatures et apartmentDetails.

1. Quel est le but de l'opérateur de propagation (...) ?

2. Quelle est la syntaxe pour utiliser l'opérateur de propagation afin de créer un nouvel objet en copiant les propriétés d'un objet existant ?

3. Dans l'exemple ci-dessous de fusion d'objets, que contient l'objet resultObj après utilisation de l'opérateur de propagation ?

question mark

Quel est le but de l'opérateur de propagation (...) ?

Select the correct answer

question mark

Quelle est la syntaxe pour utiliser l'opérateur de propagation afin de créer un nouvel objet en copiant les propriétés d'un objet existant ?

Select the correct answer

question mark

Dans l'exemple ci-dessous de fusion d'objets, que contient l'objet resultObj après utilisation de l'opérateur de propagation ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 5
some-alt